Redesigned Events Page

src/app/events/components/eventCard.jsx

@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+
+import { getPublicUrl } from "@/lib/utils";
+import Link from "next/link";
+
+import { Montserrat, Alata } from "next/font/google";
+const montserratFont = Montserrat({
+  weight: ["100", "200", "400", "600"],
+  subsets: ["latin"],
+});
+const boldMontserratFont = Montserrat({
+  weight: ["600"],
+  subsets: ["latin"],
+});
+
+export default function EventCard(props) {
+  const [event, setEvent] = useState(props.event);
+  const [eventDate, setEventDate] = useState(event.date);
+  const [eventTime, setEventTime] = useState(event.time);
+  let posterUrl = getPublicUrl(`/events/${event.id}/poster`);
+  return (
+    <div className={`${montserratFont.className} lg:row-span-2 lg:col-span-1 w-full h-full`}>
+      <Link href={`\\event\\${event.id}`}>
+        <div className="flex flex-col">
+          <div className="w-full h-full border-2 border-primary rounded-2xl overflow-hidden">
+            <img src={posterUrl} className="object-cover" />
+          </div>
+          <div className={`${montserratFont.className} ms-2 mt-1`}>
+            <p className="text-primary">{formatDate(eventDate)} | {formatTime(eventTime)}</p>
+            <p className="font-semibold text-xl">{event.name}</p>
+            <p className="text-sm">{trimString(event.description,50)}</p>
+          </div>
+        </div>
+      </Link>
+    </div>
+  );
+}
+function formatDate(dateString) {
+    const [year, month, day] = dateString.split("-");
+    const date = new Date(year, month - 1, day); // Month is 0-indexed
+
+    const formattedDay = date.getDate();
+    const monthName = date.toLocaleString("default", { month: "long" });
+    const formattedYear = date.getFullYear();
+
+    return `${formattedDay} ${monthName} ${formattedYear}`;
+  }
+
+
+  const formatTime = (timeString) => {
+    const timeRegex = /^(\d{2}):(\d{2}):(\d{2})$/;
+    const match = timeString.match(timeRegex);
+    if (!match) {
+        return 'Invalid Time Format';
+    }
+    let hours = parseInt(match[1], 10);
+    const minutes = parseInt(match[2], 10);
+    const ampm = hours >= 12 ? 'PM' : 'AM';
+    hours = hours % 12;
+    hours = hours ? hours : 12; 
+    const formattedMinutes = String(minutes).padStart(2, '0');
+    return `${hours}:${formattedMinutes} ${ampm}`;
+};
+
+const trimString = (str, maxLength) => {
+    if (str.length > maxLength) {
+        return str.substring(0, maxLength) + '...';
+    }
+    return str;
+};

src/app/events/layout.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import Navbar from "@/components/navbar";
+import Footer from "@/components/footer";
+
+interface RootLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <>
+      <Navbar />
+      {children}
+      <Footer />
+    </>
+  );
+}

src/app/events/page.jsx

@@ -1,23 +1,40 @@
 "use client";
-import { useEffect, useState } from "react";
-import EventBox from "../../components/ui/EventBox";
-import { getPublicUrl } from "@/lib/utils";
-function Page() {
+import React, { useState ,useEffect } from "react";
+import { useRouter } from "next/navigation";
+import "./styles.css"
+import Loader from "@/components/ui/loader";
+import EventCard from "./components/eventCard"
+
+import { Montserrat, Alata } from "next/font/google";
+const montserratFont = Montserrat({
+  weight: ["100", "200", "400", "600"],
+  subsets: ["latin"],
+});
+const alataFont = Alata({ weight: ["400"], subsets: ["latin"] });
+
+export default function Events() {
+  const router = useRouter();
   const [events, setEvents] = useState([]);
   const [nextPageEvents, setNextPageEvents] = useState([]);
   const [pageCount, setPageCount] = useState(1);
-  const [hasMoreEvents, setHasMoreEvents] = useState(true);
-  const [columnCount, setColumnCount] = useState(3);
+  const [hasMoreEvents, setHasMoreEvents] = useState(false);
+  const [loading, setLoading] = useState(false);
 
   const fetchEvents = async (page) => {
     try {
+      setHasMoreEvents(false);
+      setLoading(true); 
       const response = await fetch(`/api/v1/get/events?page=${page}`);
       const data = await response.json();
       return data;
     } catch (error) {
       console.error("Error fetching events:", error);
       return [];
     }
+    finally {
+      setHasMoreEvents(true);
+      setLoading(false);
+    }
   };
 
   const getMoreEvents = async () => {
@@ -44,69 +61,48 @@ function Page() {
         setHasMoreEvents(false);
       }
     };
-
-    const handleResize = () => {
-      if (window.innerWidth < 768) {
-        setColumnCount(2);
-      } else {
-        setColumnCount(3);
-      }
-    };
-
-    window.addEventListener("resize", handleResize);
-    handleResize();
     loadInitialEvents();
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
-  const columns = Array.from({ length: columnCount }, () => []);
-
-  events.forEach((event, index) => {
-    let posterUrl = getPublicUrl(`/events/${event.id}/poster`);
-
-    columns[index % columnCount].push(
-      <EventBox
-        img={posterUrl}
-        key={event.id}
-        caption={event.description}
-        time={event.date}
-        category={event.name}
-        hostLink={event.host_link}
-      />,
-    );
-  });
+    }, []);
 
   return (
-    <div className="flex flex-col w-full h-full">
-      <div className="self-center h-fit py-2 w-11/12 flex flex-col bg-[#201f31] mt-4">
-        <p className="md:pl-12 pt-5 text-2xl font-medium mb-7 ">Events Near</p>
-        <div className="self-center w-full grid grid-flow-row grid-cols-2 md:grid-cols-3">
-          {columns.map((column, colIndex) => (
-            <section
-              key={colIndex}
-              className={`h-fit w-full gap-8 py-4 grid grid-flow-row md:pl-12 ${
-                colIndex === 1 && columnCount === 3 ? "mt-32" : ""
-              }
-              ${colIndex === 1 && columnCount === 2 ? "mt-20" : ""}`}
-            >
-              {column}
-            </section>
+    <div className="w-full flex justify-center mt-6">
+      <div className="w-[95%]">
+        <p className={`underline text-3xl ml-4 ${alataFont.className}`}>
+          Events
+        </p>
+        <div className="grid lg:grid-cols-3 gap-8 px-4 mt-6 sm:grid-cols-2 grid-cols-1 grid-rows-1">
+          {/* Static Quote Box in 2nd column, 1st row */}
+          <div className="h-full lg:col-start-2 lg:col-span-1 lg:row-start-1 lg:row-span-1 sm:col-span-2 col-span-1 p-4 bg-gray-700 rounded-2xl flex items-center justify-center text-white text-center">
+            Random image or quote
+          </div>
+
+          {events.map((event, index) => (
+            <EventCard event={event} key={index}/>
           ))}
         </div>
-        {hasMoreEvents && (
-          <button
-            onClick={getMoreEvents}
-            className="text-sm md:text-xl hover:border-[#e890bd] text-[#FFBADE] border-[#FFBADE] border-[0.5vh] w-fit px-24 md:px-32  active:scale-95 transition-all duration-100 self-center rounded-3xl py-3"
+
+        {loading ? (
+          <div className="w-full flex justify-center p-12">
+            <p className={`text-xl px-5 ${montserratFont.className}`}>
+              Loading...{" "}
+            </p>
+            <Loader />
+          </div>
+        ) : (
+          hasMoreEvents && (
+            <div
+            className={`${montserratFont.className} w-full flex justify-center my-10`}
           >
-            Show More
-          </button>
+            <button
+              className="show-more-button"
+              onClick={getMoreEvents}
+            >
+              <p>Show More</p>
+            </button>
+          </div>
+          )
         )}
       </div>
     </div>
   );
 }
-
-export default Page;

src/app/events/styles.css

@@ -0,0 +1,30 @@
+.show-more-button{
+
+    box-sizing: border-box;
+    width: 300px;
+    height: 45px;
+
+    background-color : color-mix(in srgb, var(--primary) 5%, transparent);
+    box-shadow:  color-mix(in srgb, #fff 5%, transparent) 1px 1px 15px;
+    border: solid color-mix(in srgb, var(--primary) 20%, transparent) 1px;
+    border-radius: 43px;
+
+    transition: 0.5s;
+}
+.show-more-button:hover{
+    background-color : color-mix(in srgb, var(--muted-foreground) 40%, transparent);
+}
+.show-more-button>p{
+    font-weight: 700;
+    font-size: 18px;
+
+    color: var(--primary);
+}
+
+@media screen and (max-width : 1024px){
+    .show-more-button{
+
+        box-sizing: border-box;
+        width: 200px;
+    }
+}