From b37ee7bd0625d1619b6d2d7baac3776af2c9e396 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:34:29 +0530
Subject: [PATCH] Add photography
---
skillswap/src/main.jsx | 9 ++-
skillswap/src/pages/Photography.jsx | 109 ++++++++++++++++++++++++++++
2 files changed, 114 insertions(+), 4 deletions(-)
create mode 100644 skillswap/src/pages/Photography.jsx
diff --git a/skillswap/src/main.jsx b/skillswap/src/main.jsx
index 4504506..3cac986 100644
--- a/skillswap/src/main.jsx
+++ b/skillswap/src/main.jsx
@@ -11,6 +11,7 @@ import RegisterPage from './pages/Register';
import LandingPage from './pages/Landing';
import Drawing from './pages/Drawing';
import Painting from './pages/Painting';
+import Photography from './pages/Photography';
const router = createBrowserRouter([
{
@@ -42,10 +43,10 @@ const router = createBrowserRouter([
// path: '/coding',
// element: <Coding />,
// },
- // {
- // path: '/photography',
- // element: <Photography />,
- // },
+ {
+ path: '/photography',
+ element: <Photography />,
+ },
],
},
]);
diff --git a/skillswap/src/pages/Photography.jsx b/skillswap/src/pages/Photography.jsx
new file mode 100644
index 0000000..c262cf9
--- /dev/null
+++ b/skillswap/src/pages/Photography.jsx
@@ -0,0 +1,109 @@
+const files = [
+ {
+ title: 'Fun at beachside',
+ by: 'John Doe',
+ source:
+ 'https://cdn.pixabay.com/photo/2020/03/16/06/39/sunset-4935922_1280.jpg',
+ },
+ {
+ title: 'Forbidden City',
+ by: 'Sarah Doe',
+ source:
+ 'https://cdn.pixabay.com/photo/2023/11/13/14/04/forbidden-city-8385647_1280.png',
+ },
+ {
+ title: 'Beach Cars',
+ by: 'Alex Kuzmin',
+ source:
+ 'https://cdn.pixabay.com/photo/2016/11/29/09/29/beach-1868716_1280.jpg',
+ },
+ {
+ title: 'Long Road',
+ by: 'Felix Doe',
+ source:
+ 'https://cdn.pixabay.com/photo/2018/11/19/03/27/nature-3824498_1280.jpg',
+ },
+ {
+ title: 'Bicycle',
+ by: 'Kate Doe',
+ source:
+ 'https://cdn.pixabay.com/photo/2019/09/22/16/18/bicycle-4496443_1280.jpg',
+ },
+ {
+ title: 'Dandellions',
+ by: 'Kamil Aszkowski',
+ source:
+ 'https://cdn.pixabay.com/photo/2015/07/13/17/58/flowers-843584_1280.jpg',
+ },
+ {
+ title: 'Dockyard',
+ by: 'Matthew James',
+ source:
+ 'https://cdn.pixabay.com/photo/2016/11/22/22/10/anchored-1850849_1280.jpg',
+ },
+ {
+ title: 'Agriculture Cropland',
+ by: 'William James',
+ source:
+ 'https://cdn.pixabay.com/photo/2016/11/29/04/01/agriculture-1867212_1280.jpg',
+ },
+ {
+ title: 'Mountain Forest',
+ by: 'Paula Lee',
+ source:
+ 'https://cdn.pixabay.com/photo/2021/01/24/20/47/mountains-5946500_1280.jpg',
+ },
+ {
+ title: 'City Street',
+ by: 'Christopher Johnson',
+ source:
+ 'https://cdn.pixabay.com/photo/2020/12/15/01/43/cyclist-5832393_1280.jpg',
+ },
+ {
+ title: 'Sleeping Baby',
+ by: 'Zachary Johnson',
+ source:
+ ' https://cdn.pixabay.com/photo/2020/05/30/13/33/baby-5238979_1280.jpg',
+ },
+ {
+ title: 'City Lights',
+ by: 'Oliver James',
+ source:
+ 'https://cdn.pixabay.com/photo/2017/08/06/14/12/bokeh-lights-2592859_1280.jpg',
+ },
+];
+
+export default function Photography() {
+ 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