Events page added

package.json

@@ -22,6 +22,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@reduxjs/toolkit": "^2.2.6",
     "@supabase/ssr": "^0.4.0",
+    "@types/sharp": "^0.31.1",
     "@vercel/analytics": "^1.3.1",
     "@vercel/speed-insights": "^1.0.12",
     "axios": "^1.7.2",

src/app/api/v1/create/event/route.ts

@@ -1,6 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import { createClient } from "@/utils/supabase/server";
 import { Tables } from "@/types/supabase";
+//@ts-ignore
 import sharp from "sharp";
 
 async function convertToAvif(inputFile: File): Promise<File> {

src/app/events/page.jsx

@@ -0,0 +1,117 @@
+"use client";
+import { useEffect, useState } from "react";
+import EventBox from "../../components/ui/EventBox";
+import { getPublicUrl } from "@/lib/utils"
+function Page() {
+  const [events, setEvents] = useState([]);
+  const [nextPageEvents, setNextPageEvents] = useState([]);
+  const [pageCount, setPageCount] = useState(1);
+  const [hasMoreEvents, setHasMoreEvents] = useState(true);
+  const [columnCount, setColumnCount] = useState(3); 
+
+  const fetchEvents = async (page) => {
+    try {
+      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 [];
+    }
+  };
+
+  const getMoreEvents = async () => {
+    setEvents((prevEvents) => [...prevEvents, ...nextPageEvents]);
+    setPageCount((prev) => prev + 1);
+
+    const newEvents = await fetchEvents(pageCount + 2);
+    if (newEvents.length === 0) {
+      setHasMoreEvents(false);
+    } else {
+      setNextPageEvents(newEvents);
+    }
+  };
+
+  useEffect(() => {
+    const loadInitialEvents = async () => {
+      const firstPageEvents = await fetchEvents(pageCount);
+      const secondPageEvents = await fetchEvents(pageCount + 1);
+
+      setEvents(firstPageEvents);
+      setNextPageEvents(secondPageEvents);
+
+      if (secondPageEvents.length === 0) {
+        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>
+        {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"
+          >
+            Show More
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Page;
+

src/components/ui/EventBox.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+function EventBox({ time, category, caption, secondCat = false, hostLink , img }) {
+  return (
+    <div >
+      <div style={{
+      backgroundImage:`url(${img})`,
+      backgroundPosition:"center",
+      backgroundRepeat:"no-repeat",
+      backgroundSize:"cover"
+    }}
+        className={`w-11/12 ${
+          secondCat ? "h-24 md:h-40" : "h-40 md:h-60"
+        } rounded-3xl ${
+          secondCat ? "border-[0.1vh]" : "border-[0.4vh] md:border-[1vh]"
+        } border-[#FFBADE]`}
+      ></div>
+      <p className="text-[#FFBADE] px-2 md:ml-2 font-mono text-xl md:text-2xl">
+        {time}
+      </p>
+      <p className="text-[#FFBADE] px-2 md:ml-2 font-mono text-nowrap  text-xs md:text-xl">
+        {category}
+      </p>
+      <a
+        href={hostLink}
+        className="text-white md:ml-2 hover:underline text-center self-center text-xs md:text-2xl px-2 font-semibold"
+      >
+        {caption}
+      </a>
+    </div>
+  );
+}
+
+export default EventBox;

src/lib/utils.ts

@@ -1,11 +1,10 @@
 import { type ClassValue, clsx } from "clsx";
-import sharp from "sharp";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
 export const getPublicUrl = (path: string) => {
-  return `https://${process.env.PROJECT_ID}.supabase.co/storage/v1/object/public/${process.env.BUCKET}${path}`;
+  return `https://${process.env.NEXT_PUBLIC_PROJECT_ID}.supabase.co/storage/v1/object/public/${process.env.NEXT_PUBLIC_BUCKET}${path}`;
 };