Merge pull request #44 from IEEE-Student-Branch-NSBM/feat/events-Page

feat(events): add event data components for 2021-2024 and event-data …
IEEE-Student-Branch-NSBM · Oct 6, 2024 · bb37cd0 · bb37cd0
2 parents 74de4a9 + f1270d2
commit bb37cd0
Show file tree

Hide file tree

Showing 5 changed files with 327 additions and 0 deletions.
diff --git a/src/components/events-page-tabs/2021-events.tsx b/src/components/events-page-tabs/2021-events.tsx
@@ -0,0 +1,57 @@
+import Image, { StaticImageData } from "next/image";
+import Link from "next/link";
+import { events } from "../../content/event-data";
+import { Button } from "../ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../ui/card";
+
+export default function TwentyOneEvents() {
+  const TwentyOneEvents = events.filter(
+    (event: { year: number }) => event.year === 2021,
+  );
+
+  const eventsCard = TwentyOneEvents.map(
+    (event: {
+      year: number;
+      title: string;
+      description: string;
+      image: StaticImageData;
+      link: string;
+    }) => (
+      <Card key={event.year} className="bg-slate-300 rounded-xl ">
+        <CardHeader>
+          <Image
+            src={event.image}
+            alt="duothan 4.0"
+            width={1600}
+            height={900}
+            className="mx-auto mb-5 aspect-video"
+          />
+          <CardTitle>{event.title}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm lg:text-base text-justify">
+            {event.description}
+          </p>
+        </CardContent>
+        <CardFooter>
+          <Button asChild className="bg-blue-950 text-white border-none">
+            <Link href="#">View More</Link>
+          </Button>
+        </CardFooter>
+      </Card>
+    ),
+  );
+  return (
+    <div className="mx-auto mb-10">
+      <div className="grid grid-cols-1 md:grid-cols-2 container mx-auto max-w-[390px] md:max-w-[690px] lg:max-w-[850px] xl:max-w-[1100px] gap-5">
+        {eventsCard}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/events-page-tabs/2022-events.tsx b/src/components/events-page-tabs/2022-events.tsx
@@ -0,0 +1,57 @@
+import Image, { StaticImageData } from "next/image";
+import Link from "next/link";
+import { events } from "../../content/event-data";
+import { Button } from "../ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../ui/card";
+
+export default function TwentyTwoEvents() {
+  const TwentyTwoEvents = events.filter(
+    (event: { year: number }) => event.year === 2022,
+  );
+
+  const eventsCard = TwentyTwoEvents.map(
+    (event: {
+      year: number;
+      title: string;
+      description: string;
+      image: StaticImageData;
+      link: string;
+    }) => (
+      <Card key={event.year} className="bg-slate-300 rounded-xl ">
+        <CardHeader>
+          <Image
+            src={event.image}
+            alt="duothan 4.0"
+            width={1600}
+            height={900}
+            className="mx-auto mb-5 aspect-video"
+          />
+          <CardTitle>{event.title}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm lg:text-base text-justify">
+            {event.description}
+          </p>
+        </CardContent>
+        <CardFooter>
+          <Button asChild className="bg-blue-950 text-white border-none">
+            <Link href="#">View More</Link>
+          </Button>
+        </CardFooter>
+      </Card>
+    ),
+  );
+  return (
+    <div className="mx-auto mb-10">
+      <div className="grid grid-cols-1 md:grid-cols-2 container mx-auto max-w-[390px] md:max-w-[690px] lg:max-w-[850px] xl:max-w-[1100px] gap-5">
+        {eventsCard}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/events-page-tabs/2023-events.tsx b/src/components/events-page-tabs/2023-events.tsx
@@ -0,0 +1,57 @@
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import Image, { StaticImageData } from "next/image";
+import Link from "next/link";
+import { events } from "../../content/event-data";
+import { Button } from "../ui/button";
+
+export default function TwentyThreeEvents() {
+  const TwentyThreeEvents = events.filter(
+    (event: { year: number }) => event.year === 2023,
+  );
+
+  const eventsCard = TwentyThreeEvents.map(
+    (event: {
+      year: number;
+      title: string;
+      description: string;
+      image: StaticImageData;
+      link: string;
+    }) => (
+      <Card key={event.year} className="bg-slate-300 rounded-xl ">
+        <CardHeader>
+          <Image
+            src={event.image}
+            alt="duothan 4.0"
+            width={1600}
+            height={900}
+            className="mx-auto mb-5 aspect-video"
+          />
+          <CardTitle>{event.title}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm lg:text-base text-justify">
+            {event.description}
+          </p>
+        </CardContent>
+        <CardFooter>
+          <Button asChild className="bg-blue-950 text-white border-none">
+            <Link href="#">View More</Link>
+          </Button>
+        </CardFooter>
+      </Card>
+    ),
+  );
+  return (
+    <div className="mx-auto mb-10">
+      <div className="grid grid-cols-1 md:grid-cols-2 container mx-auto max-w-[390px] md:max-w-[690px] lg:max-w-[850px] xl:max-w-[1100px] gap-5">
+        {eventsCard}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/events-page-tabs/2024-events.tsx b/src/components/events-page-tabs/2024-events.tsx
@@ -0,0 +1,57 @@
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import Image, { StaticImageData } from "next/image";
+import Link from "next/link";
+import { events } from "../../content/event-data";
+import { Button } from "../ui/button";
+
+export default function TwentyFourEvents() {
+  const TwentyFourEvents = events.filter(
+    (event: { year: number }) => event.year === 2024,
+  );
+
+  const eventsCard = TwentyFourEvents.map(
+    (event: {
+      year: number;
+      title: string;
+      description: string;
+      image: StaticImageData;
+      link: string;
+    }) => (
+      <Card key={event.year} className="bg-slate-300 rounded-xl ">
+        <CardHeader>
+          <Image
+            src={event.image}
+            alt={event.title}
+            width={1600}
+            height={900}
+            className="mx-auto mb-5 aspect-video"
+          />
+          <CardTitle>{event.title}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm lg:text-base text-justify">
+            {event.description}
+          </p>
+        </CardContent>
+        <CardFooter>
+          <Button asChild className="bg-blue-950 text-white border-none">
+            <Link href={event.link}>View More</Link>
+          </Button>
+        </CardFooter>
+      </Card>
+    ),
+  );
+  return (
+    <div className="mx-auto mb-10">
+      <div className="grid grid-cols-1 md:grid-cols-2 container mx-auto max-w-[390px] md:max-w-[690px] lg:max-w-[850px] xl:max-w-[1100px] gap-5">
+        {eventsCard}
+      </div>
+    </div>
+  );
+}
diff --git a/src/content/event-data.tsx b/src/content/event-data.tsx
@@ -0,0 +1,99 @@
+import { StaticImageData } from "next/image";
+export const events = [
+  {
+    year: 2024,
+    title: "Duothan 4.0",
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque tempora laborum consequatur illum, earum iusto cumque odio! Ab rerum nam, facere delectus consequuntur in aspernatur perspiciatis quidem perferendis nesciunt, voluptate eius magnam quo quis quos error! Fuga, quibusdam eius reiciendis accusamus veritatis, magni inventore perspiciatis ad quisquam dolore laborum facilis.",
+    image: require("@/assets/placeholder.png") as StaticImageData,
+    link: "#",
+  },
+  {
+    year: 2024,
+    title: "Skill Share 1.0",
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque tempora laborum consequatur illum, earum iusto cumque odio! Ab rerum nam, facere delectus consequuntur in aspernatur perspiciatis quidem perferendis nesciunt, voluptate eius magnam quo quis quos error! Fuga, quibusdam eius reiciendis accusamus veritatis, magni inventore perspiciatis ad quisquam dolore laborum facilis.",
+    image: require("@/assets/placeholder.png") as StaticImageData,
+    link: "#",
+  },
+  {
+    year: 2024,
+    title: "IEEE Day 2024",
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque tempora laborum consequatur illum, earum iusto cumque odio! Ab rerum nam, facere delectus consequuntur in aspernatur perspiciatis quidem perferendis nesciunt, voluptate eius magnam quo quis quos error! Fuga, quibusdam eius reiciendis accusamus veritatis, magni inventore perspiciatis ad quisquam dolore laborum facilis.",
+    image: require("@/assets/placeholder.png") as StaticImageData,
+    link: "#",
+  },
+  {
+    year: 2023,
+    title: "Duothan 3.0",
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque tempora laborum consequatur illum, earum iusto cumque odio! Ab rerum nam, facere delectus consequuntur in aspernatur perspiciatis quidem perferendis nesciunt, voluptate eius magnam quo quis quos error! Fuga, quibusdam eius reiciendis accusamus veritatis, magni inventore perspiciatis ad quisquam dolore laborum facilis.",
+    image: require("@/assets/placeholder.png") as StaticImageData,
+    link: "#",
+  },
+  {
+    year: 2023,
+    title: "Manthra 1.0",
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque tempora laborum consequatur illum, earum iusto cumque odio! Ab rerum nam, facere delectus consequuntur in aspernatur perspiciatis quidem perferendis nesciunt, voluptate eius magnam quo quis quos error! Fuga, quibusdam eius reiciendis accusamus veritatis, magni inventore perspiciatis ad quisquam dolore laborum facilis.",
+    image: require("@/assets/placeholder.png") as StaticImageData,
+    link: "#",
+  },
+  {
+    year: 2023,
+    title: "IEEE Day 2023",
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque tempora laborum consequatur illum, earum iusto cumque odio! Ab rerum nam, facere delectus consequuntur in aspernatur perspiciatis quidem perferendis nesciunt, voluptate eius magnam quo quis quos error! Fuga, quibusdam eius reiciendis accusamus veritatis, magni inventore perspiciatis ad quisquam dolore laborum facilis.",
+    image: require("@/assets/placeholder.png") as StaticImageData,
+    link: "#",
+  },
+  {
+    year: 2022,
+    title: "Duothan 2.0",
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque tempora laborum consequatur illum, earum iusto cumque odio! Ab rerum nam, facere delectus consequuntur in aspernatur perspiciatis quidem perferendis nesciunt, voluptate eius magnam quo quis quos error! Fuga, quibusdam eius reiciendis accusamus veritatis, magni inventore perspiciatis ad quisquam dolore laborum facilis.",
+    image: require("@/assets/placeholder.png") as StaticImageData,
+    link: "#",
+  },
+  {
+    year: 2022,
+    title: "Event 2.0",
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque tempora laborum consequatur illum, earum iusto cumque odio! Ab rerum nam, facere delectus consequuntur in aspernatur perspiciatis quidem perferendis nesciunt, voluptate eius magnam quo quis quos error! Fuga, quibusdam eius reiciendis accusamus veritatis, magni inventore perspiciatis ad quisquam dolore laborum facilis.",
+    image: require("@/assets/placeholder.png") as StaticImageData,
+    link: "#",
+  },
+  {
+    year: 2022,
+    title: "IEEE Day 2022",
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque tempora laborum consequatur illum, earum iusto cumque odio! Ab rerum nam, facere delectus consequuntur in aspernatur perspiciatis quidem perferendis nesciunt, voluptate eius magnam quo quis quos error! Fuga, quibusdam eius reiciendis accusamus veritatis, magni inventore perspiciatis ad quisquam dolore laborum facilis.",
+    image: require("@/assets/placeholder.png") as StaticImageData,
+    link: "#",
+  },
+  {
+    year: 2021,
+    title: "Duothan 1.0",
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque tempora laborum consequatur illum, earum iusto cumque odio! Ab rerum nam, facere delectus consequuntur in aspernatur perspiciatis quidem perferendis nesciunt, voluptate eius magnam quo quis quos error! Fuga, quibusdam eius reiciendis accusamus veritatis, magni inventore perspiciatis ad quisquam dolore laborum facilis.",
+    image: require("@/assets/placeholder.png") as StaticImageData,
+    link: "#",
+  },
+  {
+    year: 2021,
+    title: "Event 1.0",
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque tempora laborum consequatur illum, earum iusto cumque odio! Ab rerum nam, facere delectus consequuntur in aspernatur perspiciatis quidem perferendis nesciunt, voluptate eius magnam quo quis quos error! Fuga, quibusdam eius reiciendis accusamus veritatis, magni inventore perspiciatis ad quisquam dolore laborum facilis.",
+    image: require("@/assets/placeholder.png") as StaticImageData,
+    link: "#",
+  },
+  {
+    year: 2021,
+    title: "IEEE Day 2021",
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque tempora laborum consequatur illum, earum iusto cumque odio! Ab rerum nam, facere delectus consequuntur in aspernatur perspiciatis quidem perferendis nesciunt, voluptate eius magnam quo quis quos error! Fuga, quibusdam eius reiciendis accusamus veritatis, magni inventore perspiciatis ad quisquam dolore laborum facilis.",
+    image: require("@/assets/placeholder.png") as StaticImageData,
+    link: "#",
+  },
+];