Skip to content

Commit 81de4db

Browse files
Ruba466Ruba466
committed
Updated club page
1 parent 2d88140 commit 81de4db

5 files changed

Lines changed: 173 additions & 105 deletions

File tree

‎src/app/club/page.tsx‎

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,5 @@
1-
//replace with club buttons and stuff accroding to design
2-
import { BusButtons } from "@/components/Bus/busButton";
3-
4-
const busData = [
5-
{ slug: 'bus-1', name: 'Bus 1' },
6-
{ slug: 'bus-2', name: 'Bus 2' },
7-
{ slug: 'bus-3', name: 'Bus 3' },
8-
{ slug: 'bus-4', name: 'Bus 4' },
9-
{ slug: 'bus-5', name: 'Bus 5' },
10-
{ slug: 'bus-6', name: 'Bus 6' },
11-
];
12-
13-
export default function BusPage() {
14-
return (
15-
<div>
16-
<BusButtons buses={busData} />
17-
</div>
18-
);
1+
'use client';
2+
import ClubList from "@/components/club/ClubList";
3+
export default function ClubPage() {
4+
return <ClubList/>;
195
}

‎src/app/club/slug/page.tsx‎

Lines changed: 8 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,11 @@
1-
// app/bus/[busNumber]/page.tsx
1+
import { notFound } from 'next/navigation';
2+
import clubData from '@/components/club/ClubData';
23

34

4-
export default function Home() {
5-
return (
6-
<div>
7-
<p>
8-
In this dynamic page, when you click any bus button, the UI/UX for all bus locations remains the same.
9-
We use a dynamic page system so that clicking on, for example, the "Bus 1" button redirects here,
10-
but the displayed content updates to show the respective bus's location.
11-
</p>
12-
</div>
13-
);
14-
}
5+
export default async function ClubDetailPage({ params }: { params: { slug: string } }) {
6+
const { slug } = await Promise.resolve(params); // simulate async destructuring
157

16-
// import { notFound } from 'next/navigation';
17-
18-
// // Mock data for clubs (replace with actual data fetching logic)
19-
// const clubsData = [
20-
// {
21-
// slug: 'coding',
22-
// clubName: 'Coding Club',
23-
// subheading: 'Innovate. Code. Build.',
24-
// image: '/images/coding-club.jpg',
25-
// description: 'Join us to learn and build amazing projects with the latest technologies.',
26-
// socialMedia: {
27-
// instagram: 'https://instagram.com/codingclub',
28-
// linkedin: 'https://linkedin.com/company/codingclub',
29-
// whatsapp: 'https://wa.me/1234567890',
30-
// },
31-
// },
32-
// {
33-
// slug: 'drama',
34-
// clubName: 'Drama Club',
35-
// subheading: 'Act. Perform. Inspire.',
36-
// image: '/images/drama-club.jpg',
37-
// description: 'Express yourself through the art of drama and theater.',
38-
// socialMedia: {
39-
// instagram: 'https://instagram.com/dramaclub',
40-
// linkedin: 'https://linkedin.com/company/dramaclub',
41-
// whatsapp: 'https://wa.me/1234567890',
42-
// },
43-
// },
44-
// // Add more clubs as needed
45-
// ];
46-
47-
// export default function ClubDetailPage({ params }: { params: { slug: string } }) {
48-
// const { slug } = params;
49-
50-
// // Find the club data based on the slug
51-
// const club = clubsData.find((club) => club.slug === slug);
52-
53-
// // If club not found, return a 404 page
54-
// if (!club) {
55-
// notFound();
56-
// }
57-
58-
// return (
59-
// <div className="flex flex-col items-center justify-center min-h-screen p-4 bg-black text-white">
60-
// {/* Heading */}
61-
// <h1 className="text-4xl font-bold mb-2">{club.clubName}</h1>
62-
63-
// {/* Subheading */}
64-
// <h2 className="text-xl text-gray-400 mb-6">{club.subheading}</h2>
65-
66-
// {/* Picture */}
67-
// <img
68-
// src={club.image}
69-
// alt={club.clubName}
70-
// className="w-full max-w-md rounded-lg mb-6"
71-
// />
72-
73-
// {/* Description */}
74-
// <p className="text-lg text-center max-w-2xl mb-8">{club.description}</p>
75-
76-
// {/* Social Media Icons */}
77-
// <div className="flex space-x-4">
78-
// <a href={club.socialMedia.instagram} target="_blank" rel="noopener noreferrer">
79-
// <img src="/icons/instagram.svg" alt="Instagram" className="w-8 h-8" />
80-
// </a>
81-
// <a href={club.socialMedia.linkedin} target="_blank" rel="noopener noreferrer">
82-
// <img src="/icons/linkedin.svg" alt="LinkedIn" className="w-8 h-8" />
83-
// </a>
84-
// <a href={club.socialMedia.whatsapp} target="_blank" rel="noopener noreferrer">
85-
// <img src="/icons/whatsapp.svg" alt="WhatsApp" className="w-8 h-8" />
86-
// </a>
87-
// </div>
88-
// </div>
89-
// );
90-
// }
8+
const club = clubData.find((c) => c.slug === slug);
9+
if (!club) notFound();
10+
return <h1>Club Details</h1>;
11+
}

‎src/components/club/ClubCard.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// src/components/clubs/ClubCard.tsx
2+
import Link from 'next/link';
3+
4+
type Club = {
5+
name: string;
6+
slug: string;
7+
description: string;
8+
image: string;
9+
};
10+
11+
export default function ClubCard({ club }: { club: Club }) {
12+
return (
13+
<Link href={`/club/${club.slug}`}>
14+
<div className="bg-white rounded-3xl border-2 border-black hover:bg-gray-200 transition h-[300px] flex flex-col">
15+
<img src={club.image} alt={club.name} className="w-full h-40 object-cover rounded-t-3xl border-b border-bottom-width-2px;" />
16+
<div className="p-4 flex flex-col flex-grow">
17+
<h2 className="text-2xl text-black font-semibold">{club.name}</h2>
18+
<p className="text-sm text-gray-600 mb-1">subtitle</p>
19+
<p className="text-gray-600 text-sm mt-1 line-clamp-2">{club.description}</p>
20+
</div>
21+
</div>
22+
</Link>
23+
24+
);
25+
}

‎src/components/club/ClubData.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
// components/club/ClubData.tsx
2+
//Static club Data
3+
4+
export type Club = {
5+
name: string;
6+
slug: string;
7+
description: string;
8+
image: string;
9+
socials: {
10+
instagram?: string;
11+
linkedin?: string;
12+
whatsapp?: string;
13+
};
14+
enrolled: boolean; // Added the enrolled field
15+
};
16+
17+
const clubData: Club[] = [
18+
{
19+
name: "IEEE",
20+
slug: "ieee",
21+
description: "IEEE is a professional club focused on advancing technology and innovation through workshops, seminars, and projects.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
22+
image: "/club_image/ieee.jpg",
23+
socials: {
24+
instagram: "https://www.instagram.com/ieeelink?igsh=MXZzM25wbjB1dWxxcA==",
25+
linkedin: "https://linkedin.com/company/ieee",
26+
whatsapp: "https://wa.me/919876543210"
27+
},
28+
enrolled: true // Example: IEEE is enrolled
29+
},
30+
{
31+
name: "MuLearn",
32+
slug: "mulearn",
33+
description: "MuLearn focuses on peer learning, encouraging students to explore and grow through collaborative knowledge sharing.",
34+
image: "/club_image/mulearn.png",
35+
socials: {
36+
instagram: "https://instagram.com/mulearn",
37+
linkedin: "https://www.instagram.com/mulearn.official?utm_source=ig_web_button_share_sheet&igsh=MTVxY2I4YWgxMjQ3",
38+
whatsapp: "https://wa.me/919876543210"
39+
},
40+
enrolled: false // Example: MuLearn is not enrolled
41+
},
42+
{
43+
name: "Mulearn",
44+
slug: "uuu",
45+
description: " on peer learning, encouraging students to explore and grow through collaborative knowledge sharing.",
46+
image: "/club_image/mulearn.png",
47+
socials: {
48+
instagram: "https://instagram.com/mulearn",
49+
linkedin: "https://linkedin.com/company/mulearn",
50+
whatsapp: "https://wa.me/919876543210"
51+
},
52+
enrolled: true // Example: Ujuhun is enrolled
53+
}
54+
];
55+
56+
export default clubData;

‎src/components/club/ClubList.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
// components/club/ClubList.tsx
2+
'use client';
3+
4+
import { useState } from 'react';
5+
import ClubCard from './ClubCard';
6+
import clubData from './ClubData';
7+
import { ArrowLeftIcon, Filter } from "lucide-react";
8+
import { useRouter } from 'next/navigation';
9+
10+
export default function ClubList(){
11+
const router = useRouter();
12+
const [filterOpen, setFilterOpen] = useState(false); // State to manage filter dropdown visibility
13+
const [filter, setFilter] = useState('all'); // State to manage the active filter ('all' or 'enrolled')
14+
15+
// Filter the clubs based on the current filter state
16+
const filteredClubs = clubData.filter(club => {
17+
if (filter === 'enrolled') {
18+
return club.enrolled;
19+
}
20+
return true; // If filter is 'all', show all clubs
21+
});
22+
23+
return (
24+
<div className='p-4 min-h-screen text-white'>
25+
<div className="flex justify-between items-center mb-2">
26+
<button
27+
className="border text-black border-gray-400 rounded-full p-2"
28+
onClick={() => router.push('/home')}
29+
>
30+
<ArrowLeftIcon className="w-5 h-5" />
31+
</button>
32+
<div className="relative flex-shrink-0 w-fit mx-auto mb-6">
33+
<h1 className="text-4xl text-black font-bold text-center relative">Club</h1>
34+
<img
35+
className="absolute left-1/2 -translate-x-1/2 bottom-0 translate-y-[50%] h-70 w-auto z-0"
36+
src="/wave-line.svg"
37+
alt="wave underline"
38+
/>
39+
</div>
40+
41+
<div className="relative">
42+
<button
43+
className="border text-black border-gray-400 rounded-full p-2"
44+
onClick={() => setFilterOpen(prev => !prev)} // Toggle filter dropdown
45+
>
46+
<Filter className="w-5 h-5" />
47+
</button>
48+
49+
{filterOpen && (
50+
<div className="absolute right-0 mt-2 w-40 bg-white text-black rounded-md shadow-lg z-10">
51+
<button
52+
className={`block w-full text-left px-4 py-2 hover:bg-gray-200 ${filter === 'all' ? 'font-semibold bg-gray-100' : ''}`}
53+
onClick={() => {
54+
setFilter('all');
55+
setFilterOpen(false);
56+
}}
57+
>
58+
All Clubs
59+
</button>
60+
<button
61+
className={`block w-full text-left px-4 py-2 hover:bg-gray-200 ${filter === 'enrolled' ? 'font-semibold bg-gray-100' : ''}`}
62+
onClick={() => {
63+
setFilter('enrolled');
64+
setFilterOpen(false);
65+
}}
66+
>
67+
Enrolled Clubs
68+
</button>
69+
</div>
70+
)}
71+
</div>
72+
</div>
73+
<div className='grid sm:grid-cols-2 lg:grid-cols-3 gap-6'>
74+
{filteredClubs.map((club) => ( // Use filteredClubs here
75+
<ClubCard key={club.slug} club={club}/>
76+
))}
77+
</div>
78+
</div>
79+
);
80+
}

0 commit comments

Comments
 (0)