Merge pull request #14 from CodeCompasss/club

Club

Author: shadil-rayyan

package-lock.json

@@ -16,7 +16,8 @@
     "next": "^15.3.3",
     "next-pwa": "^5.6.0",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.2"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.7.2",

package.json

@@ -0,0 +1,11 @@
+import { notFound } from 'next/navigation';
+import clubData from '@/components/club/ClubData';
+
+
+export default async function ClubDetailPage({ params }: { params: { slug: string } }) {
+  const { slug } = await Promise.resolve(params); // simulate async destructuring
+
+  const club = clubData.find((c) => c.slug === slug);
+  if (!club) notFound();
+  return <h1>Club Details</h1>;
+}

public/club_image/ieee.jpg

@@ -1,19 +1,5 @@
-//replace with club buttons and stuff accroding to design
-import { BusButtons } from "@/components/Bus/busButton";
-
-const busData = [
-  { slug: 'bus-1', name: 'Bus 1' },
-  { slug: 'bus-2', name: 'Bus 2' },
-  { slug: 'bus-3', name: 'Bus 3' },
-  { slug: 'bus-4', name: 'Bus 4' },
-  { slug: 'bus-5', name: 'Bus 5' },
-  { slug: 'bus-6', name: 'Bus 6' },
-];
-
-export default function BusPage() {
-  return (
-    <div>
-      <BusButtons buses={busData} />
-    </div>
-  );
-}
+'use client';
+import ClubList from "@/components/club/ClubList";
+export default function ClubPage() {
+  return <ClubList/>;
+}

public/club_image/mulearn.png

@@ -0,0 +1,25 @@
+// src/components/clubs/ClubCard.tsx
+import Link from 'next/link';
+
+type Club = {
+  name: string;
+  slug: string;
+  description: string;
+  image: string;
+};
+
+export default function ClubCard({ club }: { club: Club }) {
+  return (
+    <Link href={`/club/${club.slug}`}>
+  <div className="bg-white rounded-3xl border-2 border-black hover:bg-gray-200 transition h-[300px] flex flex-col">
+    <img src={club.image} alt={club.name} className="w-full h-40 object-cover rounded-t-3xl border-b border-bottom-width-2px;" />
+    <div className="p-4 flex flex-col flex-grow">
+      <h2 className="text-2xl text-black font-semibold">{club.name}</h2>
+      <p className="text-sm text-gray-600 mb-1">subtitle</p>
+      <p className="text-gray-600 text-sm mt-1 line-clamp-2">{club.description}</p>
+    </div>
+  </div>
+</Link>
+
+  );
+}

public/wave-line.svg

@@ -0,0 +1,56 @@
+// components/club/ClubData.tsx
+//Static club Data
+
+export type Club = {
+    name: string;
+    slug: string;
+    description: string;
+    image: string;
+    socials: {
+        instagram?: string;
+        linkedin?: string;
+        whatsapp?: string;
+    };
+    enrolled: boolean; // Added the enrolled field
+};
+
+const clubData: Club[] = [
+    {
+    name: "IEEE",
+    slug: "ieee",
+    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.",
+    image: "/club_image/ieee.jpg",
+    socials: {
+        instagram: "https://www.instagram.com/ieeelink?igsh=MXZzM25wbjB1dWxxcA==",
+        linkedin: "https://linkedin.com/company/ieee",
+        whatsapp: "https://wa.me/919876543210"
+    },
+    enrolled: true // Example: IEEE is enrolled
+    },
+    {
+    name: "MuLearn",
+    slug: "mulearn",
+    description: "MuLearn focuses on peer learning, encouraging students to explore and grow through collaborative knowledge sharing.",
+    image: "/club_image/mulearn.png",
+    socials: {
+        instagram: "https://instagram.com/mulearn",
+        linkedin: "https://www.instagram.com/mulearn.official?utm_source=ig_web_button_share_sheet&igsh=MTVxY2I4YWgxMjQ3",
+        whatsapp: "https://wa.me/919876543210"
+    },
+    enrolled: false // Example: MuLearn is not enrolled
+    },
+    {
+    name: "Mulearn",
+    slug: "uuu",
+    description: "   on peer learning, encouraging students to explore and grow through collaborative knowledge sharing.",
+    image: "/club_image/mulearn.png",
+    socials: {
+        instagram: "https://instagram.com/mulearn",
+        linkedin: "https://linkedin.com/company/mulearn",
+        whatsapp: "https://wa.me/919876543210"
+    },
+    enrolled: true
+    }
+];
+
+export default clubData;