diff --git a/skillswap/src/main.jsx b/skillswap/src/main.jsx index f4a5c4660cd81d6fc46afa9f45c305c0fd309726..6b73087c6f09ee2ad9f9576c7b172fc3b02134a3 100644 --- a/skillswap/src/main.jsx +++ b/skillswap/src/main.jsx @@ -9,6 +9,7 @@ import App from './App.jsx'; import LoginPage from './pages/Login'; import RegisterPage from './pages/Register'; import LandingPage from './pages/Landing'; +import Drawing from './pages/Drawing'; const router = createBrowserRouter([ { @@ -24,6 +25,22 @@ const router = createBrowserRouter([ path: '/register', element: <RegisterPage />, }, + { + path: '/drawing', + element: <Drawing />, + }, + // { + // path: '/music', + // element: <Music />, + // }, + // { + // path: '/coding', + // element: <Coding />, + // }, + // { + // path: '/photography', + // element: <Photography />, + // }, ], }, ]); diff --git a/skillswap/src/pages/Drawing.jsx b/skillswap/src/pages/Drawing.jsx new file mode 100644 index 0000000000000000000000000000000000000000..b438b305936da1b015a0e8406ff48ec3b5d78001 --- /dev/null +++ b/skillswap/src/pages/Drawing.jsx @@ -0,0 +1,109 @@ +const files = [ + { + title: 'Mountains with clouds', + by: 'John Doe', + source: + 'https://cdn.pixabay.com/photo/2021/10/31/10/23/nature-6756974_1280.png', + }, + { + title: 'Birds Birth', + by: 'Sarah Doe', + source: + 'https://cdn.pixabay.com/photo/2022/09/05/04/11/birds-7433231_1280.jpg', + }, + { + title: 'Still Lake', + by: 'Alex Kuzmin', + source: + 'https://cdn.pixabay.com/photo/2021/08/25/12/14/nature-6573263_1280.png', + }, + { + title: 'Sunset', + by: 'Felix Doe', + source: + 'https://cdn.pixabay.com/photo/2013/06/07/06/51/tree-117582_1280.jpg', + }, + { + title: 'Cute Moon', + by: 'Kate Doe', + source: + 'https://cdn.pixabay.com/photo/2023/10/20/19/25/moon-8330104_1280.png', + }, + { + title: 'Bear', + by: 'Kamil Aszkowski', + source: + 'https://cdn.pixabay.com/photo/2017/07/20/14/50/bear-2522509_1280.jpg', + }, + { + title: 'Jelly Fish', + by: 'Matthew James', + source: + 'https://cdn.pixabay.com/photo/2022/02/02/04/36/sketch-6987522_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: 'Woman', + by: 'Paula Lee', + source: + 'https://cdn.pixabay.com/photo/2025/02/04/02/30/portrait-9380730_1280.jpg', + }, + { + title: 'Museum', + by: 'Christopher Johnson', + source: + 'https://cdn.pixabay.com/photo/2018/01/26/23/06/architecture-3110016_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 Drawing() { + 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> + ); +} diff --git a/skillswap/src/pages/Landing.jsx b/skillswap/src/pages/Landing.jsx index 78c0c13566039da725ae90c71e169de2da51a4eb..c88a2ba6de3709a89c1ab61825ea07b65e18ccf1 100644 --- a/skillswap/src/pages/Landing.jsx +++ b/skillswap/src/pages/Landing.jsx @@ -17,7 +17,7 @@ const reviews = [ service: 'Photography', skill: 'Guitar', review: - 'Thanks to SkillSwap, I learned to play guitar while teaching photography. It isamazing how much you can grow by helping others!', + 'Thanks to SkillSwap, I learned to play guitar while teaching photography. It is amazing how much you can grow by helping others!', image: '/src/assets/char-1.avif', }, { @@ -25,7 +25,7 @@ const reviews = [ service: 'Coding', skill: 'Graphic Design', review: - 'Thanks to SkillSwap, I learned how to code while teaching graphic design. It isamazing how much you can grow by helping others!', + 'Thanks to SkillSwap, I learned how to code while teaching graphic design. It is amazing how much you can grow by helping others!', image: '/src/assets/char-2.avif', }, ];