diff --git a/skillswap/src/assets/music/drums.mp3 b/skillswap/src/assets/music/drums.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..87b4c8619b393df19fd1091a2fb3b660a16f34a0
Binary files /dev/null and b/skillswap/src/assets/music/drums.mp3 differ
diff --git a/skillswap/src/assets/music/flute.mp3 b/skillswap/src/assets/music/flute.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..0ab0f0edd5ca1f897f0b430173fea3bf143cb948
Binary files /dev/null and b/skillswap/src/assets/music/flute.mp3 differ
diff --git a/skillswap/src/assets/music/guitar.mp3 b/skillswap/src/assets/music/guitar.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..63be7a386e22b993fe915e1b256cafa73dde6a5c
Binary files /dev/null and b/skillswap/src/assets/music/guitar.mp3 differ
diff --git a/skillswap/src/assets/music/mouth-organ.mp3 b/skillswap/src/assets/music/mouth-organ.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..a12710c66aa2a8237bfbbd488cdbf614eaf295e6
Binary files /dev/null and b/skillswap/src/assets/music/mouth-organ.mp3 differ
diff --git a/skillswap/src/assets/music/piano.mp3 b/skillswap/src/assets/music/piano.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..76f1576e6ab4cffc7bd0c537b0c04cb9e806f336
Binary files /dev/null and b/skillswap/src/assets/music/piano.mp3 differ
diff --git a/skillswap/src/assets/music/sitar.mp3 b/skillswap/src/assets/music/sitar.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..65518caf9d429123dc01b75507008a126665c543
Binary files /dev/null and b/skillswap/src/assets/music/sitar.mp3 differ
diff --git a/skillswap/src/assets/music/tabla.mp3 b/skillswap/src/assets/music/tabla.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..b96becce834c952001a4dfacd7d89d6f0f054a90
Binary files /dev/null and b/skillswap/src/assets/music/tabla.mp3 differ
diff --git a/skillswap/src/assets/music/violin.mp3 b/skillswap/src/assets/music/violin.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..e27458080b4d9501c22043201b5643083eb3d6f2
Binary files /dev/null and b/skillswap/src/assets/music/violin.mp3 differ
diff --git a/skillswap/src/main.jsx b/skillswap/src/main.jsx
index 3cac986870a018bad6f386aec7aece29efe6c83b..0cb99391e34b4e8908c4f98b9841e157b437e304 100644
--- a/skillswap/src/main.jsx
+++ b/skillswap/src/main.jsx
@@ -12,6 +12,9 @@ import LandingPage from './pages/Landing';
import Drawing from './pages/Drawing';
import Painting from './pages/Painting';
import Photography from './pages/Photography';
+import Music from './pages/Music';
+import Programming from './pages/Programming';
+import Languages from './pages/Languages';
const router = createBrowserRouter([
{
@@ -35,14 +38,18 @@ const router = createBrowserRouter([
path: '/painting',
element: <Painting />,
},
- // {
- // path: '/music',
- // element: <Music />,
- // },
- // {
- // path: '/coding',
- // element: <Coding />,
- // },
+ {
+ path: '/music',
+ element: <Music />,
+ },
+ {
+ path: '/languages',
+ element: <Languages />,
+ },
+ {
+ path: '/programming',
+ element: <Programming />,
+ },
{
path: '/photography',
element: <Photography />,
diff --git a/skillswap/src/pages/Drawing.jsx b/skillswap/src/pages/Drawing.jsx
index b438b305936da1b015a0e8406ff48ec3b5d78001..aa8cdc2c5587fa7c9437f8b1ef04a077fbfaead2 100644
--- a/skillswap/src/pages/Drawing.jsx
+++ b/skillswap/src/pages/Drawing.jsx
@@ -76,9 +76,15 @@ const files = [
export default function Drawing() {
return (
<div className='flex flex-col items-center justify-center bg-muted p-6 md:p-10'>
+ <h2 className='text-center text-2xl lg:text-3xl font-bold'>
+ Drawings Page
+ </h2>
+ <p className='mt-1 text-center text-muted-foreground'>
+ Here are some of the best drawings our members have done.
+ </p>
<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'
+ className='grid mt-8 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'>
diff --git a/skillswap/src/pages/Landing.jsx b/skillswap/src/pages/Landing.jsx
index 63472930b455d0762841841d8a0925759688d502..acd84a9c8f729206976964195b7cec97a6ad8e99 100644
--- a/skillswap/src/pages/Landing.jsx
+++ b/skillswap/src/pages/Landing.jsx
@@ -170,7 +170,7 @@ export default function LandingPage() {
icon: Code,
name: 'Programming',
count: '1,957 members',
- href: '/coding',
+ href: '/programming',
},
{
icon: Languages,
diff --git a/skillswap/src/pages/Languages.jsx b/skillswap/src/pages/Languages.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..608a7205480601a350fea5c42617c1093fb1a334
--- /dev/null
+++ b/skillswap/src/pages/Languages.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 Languages() {
+ 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/Music.jsx b/skillswap/src/pages/Music.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..14026f9a6d5bc789f23f7c2132594de5a858c65b
--- /dev/null
+++ b/skillswap/src/pages/Music.jsx
@@ -0,0 +1,184 @@
+import { useState, useRef } from 'react';
+
+import drums from '../assets/music/drums.mp3';
+import flute from '../assets/music/flute.mp3';
+import guitar from '../assets/music/guitar.mp3';
+import mouthOrgan from '../assets/music/mouth-organ.mp3';
+import piano from '../assets/music/piano.mp3';
+import sitar from '../assets/music/sitar.mp3';
+import tabla from '../assets/music/tabla.mp3';
+import violin from '../assets/music/violin.mp3';
+import { AudioLines, CirclePlay, Pause, Play } from 'lucide-react';
+
+export default function Music() {
+ const [currentTrack, setCurrentTrack] = useState(null);
+ const [isPlaying, setIsPlaying] = useState(false);
+ const audioRef = useRef(null);
+
+ const files = [
+ {
+ id: 1,
+ title: 'Majestic Drums',
+ by: 'John Doe',
+ source: drums,
+ color: 'bg-orange-100',
+ },
+ {
+ id: 2,
+ title: 'Soothing Flute',
+ by: 'Sarah Doe',
+ source: flute,
+ color: 'bg-blue-100',
+ },
+ {
+ id: 3,
+ title: 'Melodious Guitar',
+ by: 'Alex Kuzmin',
+ source: guitar,
+ color: 'bg-green-100',
+ },
+ {
+ id: 4,
+ title: 'Melodious Mouth Organ',
+ by: 'Felix Doe',
+ source: mouthOrgan,
+ color: 'bg-yellow-100',
+ },
+ {
+ id: 5,
+ title: 'Natural Piano',
+ by: 'Kate Doe',
+ source: piano,
+ color: 'bg-purple-100',
+ },
+ {
+ id: 6,
+ title: 'Classical Sitar',
+ by: 'Kamil Aszkowski',
+ source: sitar,
+ color: 'bg-red-100',
+ },
+ {
+ id: 7,
+ title: 'Traditional Tabla',
+ by: 'Matthew James',
+ source: tabla,
+ color: 'bg-indigo-100',
+ },
+ {
+ id: 8,
+ title: 'Majestic Violin',
+ by: 'William James',
+ source: violin,
+ color: 'bg-pink-100',
+ },
+ ];
+
+ const handlePlayPause = (track) => {
+ if (currentTrack && currentTrack.id === track.id) {
+ if (isPlaying) {
+ audioRef.current.pause();
+ } else {
+ audioRef.current
+ .play()
+ .catch((e) => console.log('Audio playback failed:', e));
+ }
+ setIsPlaying(!isPlaying);
+ } else {
+ setCurrentTrack(track);
+ setIsPlaying(true);
+
+ if (audioRef.current) {
+ audioRef.current.load();
+ audioRef.current
+ .play()
+ .catch((e) => console.log('Audio playback failed:', e));
+ }
+ }
+ };
+
+ return (
+ <div className='flex flex-col items-center justify-center bg-gray-100 p-6 md:p-10 min-h-screen'>
+ <h2 className='text-center text-2xl lg:text-3xl font-bold text-gray-900'>
+ Music Collection Page
+ </h2>
+ <p className='mt-2 text-center text-gray-600'>
+ Enjoy these musical pieces created by our talented members.
+ </p>
+
+ {currentTrack && (
+ <div className='w-full max-w-md mt-8 p-4 bg-white rounded-lg shadow-md'>
+ <div className='flex items-center justify-between'>
+ <div>
+ <h3 className='font-medium text-gray-900'>
+ {currentTrack.title}
+ </h3>
+ <p className='text-sm text-gray-500'>By {currentTrack.by}</p>
+ </div>
+ <button
+ onClick={() => handlePlayPause(currentTrack)}
+ className='p-2 rounded-full bg-violet-100 hover:bg-violet-200 text-violet-800'
+ >
+ {isPlaying ? (
+ <Pause className='text-violet-800 h-5 w-5' />
+ ) : (
+ <Play className='text-violet-800 h-5 w-5' />
+ )}
+ </button>
+ </div>
+
+ <audio
+ ref={audioRef}
+ className='w-full mt-4'
+ controls
+ src={currentTrack.source}
+ onEnded={() => setIsPlaying(false)}
+ />
+ </div>
+ )}
+
+ <ul
+ role='list'
+ className='mt-8 grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 w-full '
+ >
+ {files.map((file) => (
+ <li key={file.id} className='relative'>
+ <div
+ className={`${file.color} p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 cursor-pointer`}
+ onClick={() => handlePlayPause(file)}
+ >
+ <div className='aspect-w-1 aspect-h-1 flex items-center justify-center h-32'>
+ {currentTrack && currentTrack.id === file.id ? (
+ isPlaying ? (
+ <AudioLines className='text-violet-600 h-10 w-10 animate-pulse' />
+ ) : (
+ <Play className='text-violet-600 h-10 w-10' />
+ )
+ ) : (
+ <CirclePlay className='text-gray-600 h-10 w-10' />
+ )}
+ </div>
+ </div>
+ <p className='mt-2 block truncate text-sm font-medium text-gray-900'>
+ {file.title}
+ </p>
+ <p className='block text-sm font-medium text-gray-500'>
+ By {file.by}
+ </p>
+ </li>
+ ))}
+ </ul>
+
+ {currentTrack && (
+ <audio
+ ref={audioRef}
+ className='hidden'
+ onEnded={() => setIsPlaying(false)}
+ >
+ <source src={currentTrack.source} type='audio/mpeg' />
+ Your browser does not support the audio element.
+ </audio>
+ )}
+ </div>
+ );
+}
diff --git a/skillswap/src/pages/Painting.jsx b/skillswap/src/pages/Painting.jsx
index 15c3f11f6649a073c2cf0509039bd9238d1b1800..eec9af95bcd179bbda72a5f2c086f3e15cbbec2c 100644
--- a/skillswap/src/pages/Painting.jsx
+++ b/skillswap/src/pages/Painting.jsx
@@ -76,9 +76,16 @@ const files = [
export default function Painting() {
return (
<div className='flex flex-col items-center justify-center bg-muted p-6 md:p-10'>
+ <h2 className='text-center text-2xl lg:text-3xl font-bold'>
+ Paintings Page
+ </h2>
+ <p className='mt-1 text-center text-muted-foreground'>
+ Here are some of the best paintings our members have done.
+ </p>
+
<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'
+ className='mt-8 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'>
diff --git a/skillswap/src/pages/Photography.jsx b/skillswap/src/pages/Photography.jsx
index c262cf99fc3cae74f848222b9da2e2e3ebeaf769..882a7f358d3dac3689d700a9354f24a31749c989 100644
--- a/skillswap/src/pages/Photography.jsx
+++ b/skillswap/src/pages/Photography.jsx
@@ -76,9 +76,16 @@ const files = [
export default function Photography() {
return (
<div className='flex flex-col items-center justify-center bg-muted p-6 md:p-10'>
+ <h2 className='text-center text-2xl lg:text-3xl font-bold'>
+ Photography Page
+ </h2>
+ <p className='mt-1 text-center text-muted-foreground'>
+ Here are some of the best photographs our members have done.
+ </p>
+
<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'
+ className='mt-8 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'>
diff --git a/skillswap/src/pages/Programming.jsx b/skillswap/src/pages/Programming.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..c34bdf5faddf7a382b2fdc7aa0cb742c8a28f7a4
--- /dev/null
+++ b/skillswap/src/pages/Programming.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 Programming() {
+ 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>
+ );
+}