Events Page

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@auth/prisma-adapter": "^1.6.0",
     "@gsap/react": "^2.1.0",
+    "@nextui-org/react": "^2.3.1",
     "@prisma/client": "^5.12.1",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
@@ -24,12 +25,13 @@
     "@react-three/drei": "^9.105.1",
     "@react-three/fiber": "^8.16.1",
     "@studio-freight/react-lenis": "^0.0.46",
+    "@tabler/icons-react": "^3.2.0",
     "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
     "@udecode/cn": "^31.0.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "embla-carousel-react": "^8.0.2",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "^11.1.1",
     "glob": "^10.3.10",
     "gsap": "^3.12.5",
     "lucide-react": "^0.363.0",

src/app/(content)/events/[category]/event/[id]/page.tsx

@@ -0,0 +1,131 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import { usePathname } from "next/navigation";
+
+interface Event {
+  name: string;
+  description: string;
+  rules: string[];
+  prerequisites: string[];
+  thumbnail: string;
+  startTime: string;
+  endTime: string;
+  facultyCoordinators: {
+    name: string;
+    phone: string;
+  }[];
+  studentCoordinators: {
+    name: string;
+    phone: string;
+  }[];
+}
+
+const Page = () => {
+  const [category, setCategory] = useState("");
+  const [eventInfo, setEventInfo] = useState<Event | null>(null);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const parts = pathname.split("/");
+    console.log(`/api/events/${parts[2]}/event/1`);
+    fetch(`/api/events/${parts[2]}/event/1`)
+      .then((response) => response.json())
+      .then((data) => {
+        setEventInfo(data);
+        console.log(data);
+        setEventInfo(data);
+      })
+      .catch((error) => console.error("Error fetching categories:", error));
+  }, [pathname]);
+
+  useEffect(() => {
+    console.log("EE: ", eventInfo?.name);
+  }, [eventInfo]);
+  const startTime = eventInfo?.startTime ? new Date(eventInfo.startTime) : null;
+  const formattedDate = startTime ? startTime.getDate() : "";
+  const formattedTime = startTime
+    ? startTime.toLocaleTimeString("en-US", {
+        hour: "2-digit",
+        minute: "2-digit",
+      })
+    : "";
+
+  return (
+    <>
+      <div className="w-maxPhone h-maxHeight sm:flex items-center overflow-auto">
+        <div></div>
+        <div className="h-1/3 sm:w-2/5 h-90% relative">
+          <Image
+            // src={eventInfo?.thumbnail || ""}
+            src="/Categories/Mega.jpg"
+            alt="Mega Category"
+            layout="fill"
+            objectFit="cover"
+            className="rounded-lg"
+          />
+        </div>
+        <div className="mt-4 w-maxPhone  relative sm:w-2/3 lg:ml-3 h-90% sm:ml-1 sm:pl-5  lg:pl-10">
+          <h1 className="font-staat text-5xl text-tiara_red">
+            {eventInfo?.name}{" "}
+            <Button className="absolute pr-5 w-32 h-8 mt-1.5 ml-5">
+              <p className="tracking-widest text-sm font-tiara">register now</p>
+            </Button>
+          </h1>
+          <span className="text-base text-white font-staat">
+            {" "}
+            {formattedDate} May - {formattedTime}
+          </span>
+          <p className="mt-4 text-md">{eventInfo?.description}</p>
+          <h2 className="mt-5 text-tiara_red text-2xl">Prerequisites:</h2>
+          <ul className="relative ml-5 w-4/5">
+            {eventInfo?.prerequisites.map((pre, index) => (
+              <li key={index}>
+                <span className="text-tiara_red">•</span> {pre}
+              </li>
+            ))}
+          </ul>
+          <h2 className="mt-3 text-tiara_red text-2xl">Guidelines:</h2>
+          <ul className="relative ml-5 w-4/5">
+            {eventInfo?.rules.map((rule, index) => (
+              <li key={index}>
+                <span className="text-tiara_red">•</span> {rule}
+              </li>
+            ))}
+          </ul>
+          <div className="mt-8 w-full h-fit">
+            <div className="sm:flex sm:flex-col sm:gap-y-2 lg:flex-row gap-x-6">
+              <div className="mr-10">
+                <h2 className="mt-3 text-tiara_red text-lg">
+                  Faculty Co-ordinators:
+                </h2>
+                {eventInfo?.facultyCoordinators.map((coordinator, index) => (
+                  <div key={index} className="flex flex-row gap-x-6 mt-2">
+                    <p className="text-white">{coordinator.name}</p>
+                    <p className="text-tiara_red">|</p>
+                    <p className="text-white">{coordinator.phone}</p>
+                  </div>
+                ))}
+              </div>
+              <div>
+                <h2 className="mt-3 text-tiara_red text-lg ">
+                  Student Co-ordinators:
+                </h2>
+                {eventInfo?.studentCoordinators.map((coordinator, index) => (
+                  <div key={index} className="flex flex-row gap-x-6 mt-2">
+                    <p className="text-white">{coordinator.name}</p>
+                    <p className="text-tiara_red">|</p>
+                    <p className="text-white">{coordinator.phone}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Page;

src/app/(content)/events/[category]/page.tsx

@@ -0,0 +1,60 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { usePathname } from "next/navigation"; // Import usePathname from next/navigation
+import EventDisplay from "@/components/widgets/EventDisplay";
+
+interface Event {
+  name: string;
+  description: string;
+  rules: string;
+  prerequisites: string;
+  thumbnail: string;
+  startTime: string;
+  endTime: string;
+  facultyCoordinators: {
+    name: string;
+    phone: string;
+  }[];
+  studentCoordinators: {
+    name: string;
+    phone: string;
+  }[];
+}
+
+export default function EventsPage() {
+  const [events, setEvents] = useState<Event[]>([]);
+  const pathname = usePathname(); // Use usePathname instead of useRouter
+  const [category, setCategory] = useState("");
+
+  useEffect(() => {
+    setCategory(pathname.split("/").pop() || ""); // Extract category from pathname
+    fetch(`/api/events/${category}`)
+      .then((response) => response.json())
+      .then((data) => {
+        const eventsData = data[0].events; // Access the events array from the response
+        setEvents(eventsData); // Set the events array to the state
+      })
+      .catch((error) => console.error("Error fetching events:", error));
+  }, [pathname]);
+
+  useEffect(() => {}, [events]);
+
+  return (
+    <div className="w-maxPage h-fit">
+      <div className="-ml-5 flex justify-center items-center pt-5 z-50">
+        <div className="text-6xl sm:text-8xl font-tiara  w-fit pr-8">
+          Ti<span className="text-tiara_red">ar</span>a{" "}
+          <span className="text-tiara_red">{"'"}</span>24
+        </div>
+      </div>
+      <div className="w-full flex justify-center">
+        <p className="font-staat text-2xl mt-3">
+          Explore the <span className="text-tiara_red">Unknown</span>
+        </p>
+      </div>
+      <div className="w-maxPhone sm:w-maxPage flex justify-center items-center mt-10 z-50">
+        <EventDisplay events={events} category={category} />
+      </div>
+    </div>
+  );
+}

src/app/(content)/events/page.tsx

@@ -1,14 +1,33 @@
 "use client";
-import { Text } from "@/components/shared/text";
-import Timeline from "@/components/widgets/Timeline";
-import React from "react";
+import CategoryDisplay from "@/components/widgets/CategoryDisplay";
+import React, { useEffect, useState } from "react";
 
 export default function EventsPage() {
+  const [categories, setCategories] = useState<{ category: string }[]>([]);
+
+  useEffect(() => {
+    fetch("/api/events")
+      .then((response) => response.json())
+      .then((data) => setCategories(data))
+      .catch((error) => console.error("Error fetching categories:", error));
+  }, []);
+
   return (
     <>
-      <div className="flex">
-        <div className="flex justify-center items-center mt-10 ">
-          <Timeline />
+      <div className="w-maxPage h-fit ">
+        <div className="-ml-5 flex justify-center items-center pt-5 z-50">
+          <div className="text-6xl sm:text-8xl font-tiara  w-fit pr-8">
+            Ti<span className="text-tiara_red">ar</span>a{" "}
+            <span className="text-tiara_red">{"'"}</span>24
+          </div>
+        </div>
+        <div className="w-full flex justify-center">
+          <p className="font-staat text-2xl mt-3">
+            Explore the <span className="text-tiara_red">Unknown</span>
+          </p>
+        </div>
+        <div className="w-maxPhone h-fit  flex justify-center mt-10 z-0 overflow-y-scroll sm:overflow-y-hidden">
+          <CategoryDisplay categories={categories.map(category => ({ title: category.category }))} />
         </div>
       </div>
     </>

src/app/api/events/[category]/event/[id]/route.ts

@@ -0,0 +1,28 @@
+export async function GET() {
+  const event = 
+    {
+      id: "1",
+      name: "CodeJam",
+      description: "A coding competition for enthusiasts",
+      rules: ["Rule 1","Rule 2"],
+      prerequisites: ["P 1","P 2"],
+      thumbnail: "/codejam-thumbnail.jpg",
+      startTime: "2024-05-12 10:00",
+      endTime: "2024-05-12 18:00",
+      facultyCoordinators: [
+        {
+          name: "Michael Johnson",
+          phone: "+1122334455",
+        },
+      ],
+      studentCoordinators: [
+        {
+          name: "Emily Brown",
+          phone: "+5566778899",
+        },
+      ],
+    }
+  ;
+
+  return Response.json(event);
+}

src/app/api/events/[category]/route.ts

@@ -0,0 +1,79 @@
+export async function GET() {
+  const eventsList = [
+    {
+      events: [
+        {
+          name: "TechExpo1",
+          description: "Showcasing latest tech innovations",
+          rules: ["rule1","rule2"],
+          prerequisites: "ppp",
+          thumbnail: "/techexpo-thumbnail.jpg",
+          startTime: "2024-05-10 09:00",
+          endTime: "2024-05-10 17:00",
+          facultyCoordinators: [
+            {
+              name: "John Doe",
+              phone: "+1234567890",
+            },
+          ],
+          studentCoordinators: [
+            {
+              name: "Jane Smith",
+              phone: "+9876543210",
+            },
+          ],
+        },
+        {
+          name: "TechExpo2",
+          description: "Showcasing latest tech innovations",
+          rules: "tttt",
+          prerequisites: "ppp",
+          thumbnail: "/techexpo-thumbnail.jpg",
+          startTime: "2024-05-10 09:00",
+          endTime: "2024-05-10 17:00",
+          facultyCoordinators: [
+            {
+              name: "John Doe",
+              phone: "+1234567890",
+            },
+          ],
+          studentCoordinators: [
+            {
+              name: "Jane Smith",
+              phone: "+9876543210",
+            },
+          ],
+        },
+        {
+          name: "TechExpo3",
+          description: "Showcasing latest tech innovations",
+          rules: "tttt",
+          prerequisites: "ppp",
+          thumbnail: "/techexpo-thumbnail.jpg",
+          startTime: "2024-05-10 09:00",
+          endTime: "2024-05-10 17:00",
+          facultyCoordinators: [
+            {
+              name: "John Doe",
+              phone: "+1234567890",
+            },
+          ],
+          studentCoordinators: [
+            {
+              name: "Jane Smith",
+              phone: "+9876543210",
+            },
+          ],
+        }
+      ]
+    }
+  ];
+
+  const mappedCategories = eventsList.map(({ events }) => {
+    return {
+      events,
+    };
+  });
+
+  return Response.json(mappedCategories);
+}