From fad4c44424f6733cfccce1dbeecf65b3dcb10b33 Mon Sep 17 00:00:00 2001
From: "ALMAZROUEI Shamma (2021) WKIS203"
<shamma.almazrouei.2021@live.rhul.ac.uk>
Date: Wed, 26 Feb 2025 01:19:33 +0530
Subject: [PATCH] Add paintings
---
skillswap/src/main.jsx | 5 ++
skillswap/src/pages/Landing.jsx | 76 ++++++++++++++-------
skillswap/src/pages/Painting.jsx | 109 +++++++++++++++++++++++++++++++
3 files changed, 167 insertions(+), 23 deletions(-)
create mode 100644 skillswap/src/pages/Painting.jsx
diff --git a/skillswap/src/main.jsx b/skillswap/src/main.jsx
index 6b73087..4504506 100644
--- a/skillswap/src/main.jsx
+++ b/skillswap/src/main.jsx
@@ -10,6 +10,7 @@ import LoginPage from './pages/Login';
import RegisterPage from './pages/Register';
import LandingPage from './pages/Landing';
import Drawing from './pages/Drawing';
+import Painting from './pages/Painting';
const router = createBrowserRouter([
{
@@ -29,6 +30,10 @@ const router = createBrowserRouter([
path: '/drawing',
element: <Drawing />,
},
+ {
+ path: '/painting',
+ element: <Painting />,
+ },
// {
// path: '/music',
// element: <Music />,
diff --git a/skillswap/src/pages/Landing.jsx b/skillswap/src/pages/Landing.jsx
index c88a2ba..478075d 100644
--- a/skillswap/src/pages/Landing.jsx
+++ b/skillswap/src/pages/Landing.jsx
@@ -10,6 +10,7 @@ import {
Camera,
Brush,
} from 'lucide-react';
+import { Link } from 'react-router-dom';
const reviews = [
{
@@ -148,31 +149,60 @@ export default function LandingPage() {
</div>
<div className='mx-auto grid max-w-5xl items-center gap-6 py-12 md:grid-cols-2 lg:grid-cols-3'>
{[
- { icon: Brush, name: 'Drawing', count: '2,845 members' },
- { icon: Music, name: 'Music', count: '2,368 members' },
- { icon: Code, name: 'Programming', count: '1,957 members' },
- { icon: Languages, name: 'Languages', count: '1,756 members' },
- { icon: Camera, name: 'Photography', count: '1,543 members' },
- { icon: Palette, name: 'Painting', count: '1,245 members' },
+ {
+ icon: Brush,
+ name: 'Drawing',
+ count: '2,845 members',
+ href: '/drawing',
+ },
+ {
+ icon: Music,
+ name: 'Music',
+ count: '2,368 members',
+ href: '/music',
+ },
+ {
+ icon: Code,
+ name: 'Programming',
+ count: '1,957 members',
+ href: '/coding',
+ },
+ {
+ icon: Languages,
+ name: 'Languages',
+ count: '1,756 members',
+ href: '/languages',
+ },
+ {
+ icon: Camera,
+ name: 'Photography',
+ count: '1,543 members',
+ href: '/photography',
+ },
+ {
+ icon: Palette,
+ name: 'Painting',
+ count: '1,245 members',
+ href: '/painting',
+ },
].map((skill, index) => (
- <Card
- key={index}
- className='group cursor-pointer transition-colors hover:border-primary'
- >
- <CardContent className='p-6'>
- <div className='flex items-center space-x-4'>
- <div className='rounded-full bg-primary/10 p-3'>
- <skill.icon className='h-6 w-6 text-primary' />
- </div>
- <div>
- <h3 className='font-bold'>{skill.name}</h3>
- <p className='text-sm text-muted-foreground'>
- {skill.count}
- </p>
+ <Link key={index} to={skill.href}>
+ <Card className='group cursor-pointer transition-colors hover:border-primary'>
+ <CardContent className='p-6'>
+ <div className='flex items-center space-x-4'>
+ <div className='rounded-full bg-primary/10 p-3'>
+ <skill.icon className='h-6 w-6 text-primary' />
+ </div>
+ <div>
+ <h3 className='font-bold'>{skill.name}</h3>
+ <p className='text-sm text-muted-foreground'>
+ {skill.count}
+ </p>
+ </div>
</div>
- </div>
- </CardContent>
- </Card>
+ </CardContent>
+ </Card>
+ </Link>
))}
</div>
</div>
diff --git a/skillswap/src/pages/Painting.jsx b/skillswap/src/pages/Painting.jsx
new file mode 100644
index 0000000..15c3f11
--- /dev/null
+++ b/skillswap/src/pages/Painting.jsx
@@ -0,0 +1,109 @@
+const files = [
+ {
+ title: 'Beautiful Girl',
+ by: 'John Doe',
+ source:
+ 'https://cdn.pixabay.com/photo/2020/04/16/09/57/watercolor-5049980_1280.jpg',
+ },
+ {
+ title: 'Wolf',
+ by: 'Sarah Doe',
+ source:
+ ' https://cdn.pixabay.com/photo/2018/07/18/15/43/animal-3546613_1280.jpg',
+ },
+ {
+ title: 'Man Face',
+ by: 'Alex Kuzmin',
+ source:
+ ' https://cdn.pixabay.com/photo/2019/03/02/16/26/man-4030112_1280.jpg',
+ },
+ {
+ title: 'Bird',
+ by: 'Felix Doe',
+ source:
+ ' https://cdn.pixabay.com/photo/2022/10/31/02/44/chinese-painting-7558715_1280.jpg',
+ },
+ {
+ title: 'Landscape',
+ by: 'Kate Doe',
+ source:
+ ' https://cdn.pixabay.com/photo/2017/08/22/18/03/watercolour-2669975_1280.jpg',
+ },
+ {
+ title: 'Scene at Dusk',
+ by: 'Kamil Aszkowski',
+ source:
+ 'https://cdn.pixabay.com/photo/2015/03/26/15/20/art-692876_1280.jpg',
+ },
+ {
+ title: 'Garden',
+ by: 'Matthew James',
+ source:
+ 'https://cdn.pixabay.com/photo/2015/08/30/00/38/oil-paint-913745_1280.jpg',
+ },
+ {
+ title: 'Old Man',
+ by: 'William James',
+ source:
+ 'https://cdn.pixabay.com/photo/2017/01/22/00/18/the-old-man-1998604_1280.jpg',
+ },
+ {
+ title: 'Flowers',
+ by: 'Paula Lee',
+ source:
+ ' https://cdn.pixabay.com/photo/2017/07/03/18/36/thistles-2468602_1280.jpg',
+ },
+ {
+ title: 'Buildings',
+ by: 'Christopher Johnson',
+ source:
+ 'https://cdn.pixabay.com/photo/2015/03/30/10/59/oil-painting-698266_1280.jpg',
+ },
+ {
+ title: 'Girl Woman Cloud',
+ by: 'Zachary Johnson',
+ source:
+ 'https://cdn.pixabay.com/photo/2022/04/13/16/46/girl-7130668_1280.png',
+ },
+ {
+ title: 'Tree',
+ by: 'Oliver James',
+ source:
+ 'https://cdn.pixabay.com/photo/2021/09/07/20/33/tree-6604898_1280.jpg',
+ },
+];
+
+export default function Painting() {
+ return (
+ <div className='flex flex-col items-center justify-center bg-muted p-6 md:p-10'>
+ <ul
+ role='list'
+ className='grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8'
+ >
+ {files.map((file) => (
+ <li key={file.source} className='relative'>
+ <div className='group overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-violet-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100'>
+ <img
+ alt=''
+ src={file.source}
+ className='pointer-events-none aspect-[10/7] object-cover group-hover:opacity-75'
+ />
+ <button
+ type='button'
+ className='absolute inset-0 focus:outline-none'
+ >
+ <span className='sr-only'>View details for {file.title}</span>
+ </button>
+ </div>
+ <p className='pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900'>
+ {file.title}
+ </p>
+ <p className='pointer-events-none block text-sm font-medium text-gray-500'>
+ By {file.by}
+ </p>
+ </li>
+ ))}
+ </ul>
+ </div>
+ );
+}
--
GitLab