feat: implemented events views

src/app/events/page.tsx

@@ -1,19 +1,74 @@
 "use client";
-import Calendar from "@/components/events/Calendar";
-import MonthlyEvents from "@/components/events/MonthlyEvents";
+import Calendar from "@/components/events/CalendarMonthView/Calendar";
+import FiveDayCalendar from "@/components/events/CalendarWeekView/WeekViewCalendar";
+import MonthlyEvents from "@/components/events/CalendarListView/MonthlyEvents";
+import { FaRegCalendarAlt, FaList } from "react-icons/fa";
 import Footer from "@/components/Footer";
+import { Clock, Calendar as CalendarIcon, List } from "lucide-react";
+import { useState } from "react";
 
 export default function Events() {
+  const [calendarView, setCalendarView] = useState<"month" | "day" | "list">(
+    "month",
+  );
+
   return (
     <>
       <section className="relative min-h-screen bg-[#080d14]">
-        <div className="noise-bg"/>
-        <div className="mx-auto max-w-7xl px-4 md:px-10 pt-20 sm:pt-32 pb-12 text-white">
-        <Calendar />
-          <MonthlyEvents /> 
+        <div className="mx-auto max-w-7xl px-4 pb-12 pt-28 text-white sm:pt-36 md:px-10">
+          <h1 className="text-3xl sm:text-4xl font-semibold">Events</h1>
+          <h2 className="max-w-2xl sm:text-balance pt-4 text-xl sm:text-2xl text-gray-200">
+            Discover everything you need to know about upcoming{" "}
+            <span className="text-blue">club events</span> and{" "}
+            <span className="text-blue">exclusive opportunities.</span>
+          </h2>
+          <p className="pt-8 text-lg text-gray-300">Views:</p>
+
+          {/* buttons to change view */}
+          <div className="flex gap-2 pt-2 flex-wrap">
+          <button
+              className={`flex items-center gap-2 rounded-sm border px-4 py-1.5 transition-all ${calendarView === "month" ? "border-gray-600 bg-gray-800" : "border-gray-700 bg-gray-900"}`}
+              onClick={() => setCalendarView("month")}
+            >
+              <span
+                className={`flex items-center gap-2 transition-all ${calendarView === "month" ? "opacity-100" : "opacity-50 hover:opacity-100"}`}
+              >
+                Month View <CalendarIcon className="h-5" />
+              </span>
+            </button>
+            <button
+              className={`rounded-sm border px-4 py-1.5 transition-all ${calendarView === "day" ? "border-gray-600 bg-gray-800" : "border-gray-700 bg-gray-900"}`}
+              onClick={() => setCalendarView("day")}
+            >
+              <span
+                className={`flex items-center gap-2 transition-all ${calendarView === "day" ? "opacity-100" : "opacity-50 hover:opacity-100"}`}
+              >
+                {" "}
+                Day View <Clock className="h-5" />
+              </span>
+            </button>
+            <button
+              className={`flex items-center gap-2 rounded-sm border px-4 py-1.5 transition-all ${calendarView === "list" ? "border-gray-600 bg-gray-800" : "border-gray-700 bg-gray-900"}`}
+              onClick={() => setCalendarView("list")}
+            >
+
+              <span
+                className={`flex items-center gap-2 transition-all ${calendarView === "list" ? "opacity-100" : "opacity-50 hover:opacity-100"}`}
+              >
+                List View <List className="h-5" />
+              </span>
+            </button>
+          </div>
+          {/* end buttons */}
+
+          {/* Views */}
+          {calendarView ===  "day" && <FiveDayCalendar />}
+          {calendarView === "month" && <Calendar />}
+          {calendarView === "list" &&  <MonthlyEvents />}
+
         </div>
       </section>
-      <Footer/>
+      <Footer />
     </>
   );
 }

src/components/events/Calendar.tsx → src/components/events/CalendarMonthView/Calendar.tsx

@@ -39,20 +39,20 @@ export default function Calendar() {
   };
 
   return (
-    <div className="pt-8 md:pt-12 text-white">
+    <div className="pt-8 md:pt-16 text-white">
       <div className="flex items-end justify-between gap-5">
         <p className="text-lg md:text-3xl">
-         Calendar - {currentMonthName} {currentYear}
+         {currentMonthName} {currentYear}
         </p>
         <div className="flex gap-2">
           <button
-            className="rounded-full p-2 md:hover:bg-[#404040]"
+            className="rounded-full p-2 md:hover:bg-gray-700"
             onClick={handlePrevMonth}
           >
             <FaChevronLeft />
           </button>
           <button
-            className="rounded-full p-2 md:hover:bg-[#404040]"
+            className="rounded-full p-2 md:hover:bg-gray-700"
             onClick={handleNextMonth}
           >
             <FaChevronRight />
@@ -61,7 +61,7 @@ export default function Calendar() {
       </div>
 
       {/* Desktop Days of the Week */}
-      <div className="mt-4 hidden md:grid grid-cols-7 text-center font-semibold">
+      <div className="mt-4 hidden lg:grid grid-cols-7 text-center font-semibold">
         {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => (
           <div
             key={day}
@@ -73,7 +73,7 @@ export default function Calendar() {
       </div>
 
       {/* Mobile Days of the Week */}
-      <div className="mt-4 md:hidden grid grid-cols-7 text-center font-semibold">
+      <div className="mt-4 lg:hidden grid grid-cols-7 text-center font-semibold">
         {["Su", "M", "T", "W", "Th", "F", "Sa"].map((day) => (
           <div
             key={day}

src/components/events/CalendarDay.tsx → src/components/events/CalendarMonthView/CalendarDay.tsx

@@ -27,13 +27,13 @@ const CalendarDay: React.FC<CalendarDayProps> = ({
       <>
         {/* Desktop Calendar Day not in current month */}
         <div
-          className={`hidden border-l border-t border-gray-800 bg-[#0F1319] p-2 text-[#808080] md:block ${daysInMonth % 7 === 0 ? "border-r" : ""} ${daysInMonth - index <= 7 ? "border-b" : ""}`}
+          className={`hidden border-l border-t border-gray-800 bg-[#0F1319] p-2 text-[#808080] lg:block ${daysInMonth % 7 === 0 ? "border-r" : ""} ${daysInMonth - index <= 7 ? "border-b" : ""}`}
         >
           <p className="flex justify-end">{format(day, "dd")}</p>
         </div>
 
         {/* Mobile Calendar Day not in current month */}
-        <div className="flex justify-center p-2 md:hidden">
+        <div className="flex justify-center p-2 lg:hidden">
           <div className="p-2 text-[#808080]">{format(day, "dd")}</div>
         </div>
       </>
@@ -43,7 +43,7 @@ const CalendarDay: React.FC<CalendarDayProps> = ({
     <>
       {/* Desktop Calendar day in current month */}
       <div
-        className={`hidden h-32 border-l border-t border-gray-800 bg-[#0F1319] p-2 md:block  ${daysInMonth % 7 === 0 ? "border-r" : ""} ${daysInMonth - index <= 7 ? "border-b" : ""}`}
+        className={`hidden h-32 border-l border-t border-gray-800 bg-[#0F1319] p-2 lg:block  ${daysInMonth % 7 === 0 ? "border-r" : ""} ${daysInMonth - index <= 7 ? "border-b" : ""}`}
       >
         <div className={`flex justify-end `}><span className={`${today ? "bg-light-blue text-black rounded-full px-2" : ""}`}>{format(day, "dd")}</span></div>
         {dayEvents && (
@@ -57,7 +57,7 @@ const CalendarDay: React.FC<CalendarDayProps> = ({
 
       {/* Mobile Calendar day in current month */}
 
-      <div className="flex justify-center pt-2 md:hidden">
+      <div className="flex justify-center pt-2 lg:hidden">
         {dayEvents && dayEvents.length > 0 ? (
          <MobileCalendarEvent day={day} dayEvents={dayEvents}/>
         ) : (

src/components/events/CalendarMonthView/CalendarEvent.tsx

@@ -0,0 +1,53 @@
+import { FirebaseEvent } from "@/types/events"; 
+import { AnimatePresence, easeInOut, motion } from "framer-motion"; 
+import { useEffect, useState } from "react"; 
+import EventModal from "../EventModal";   
+
+type CalendarEventProps = {   
+  _event: FirebaseEvent; 
+};  
+
+const CalendarEvent: React.FC<CalendarEventProps> = ({ _event }) => {   
+  const [showEventModal, setShowEventModal] = useState<boolean>(false);    
+
+  const handleEventClick = () => {     
+    setShowEventModal((prev) => !prev);     
+    document.body.style.overflowY =       
+      document.body.style.overflowY === "hidden" ? "auto" : "hidden";   
+  };    
+
+  useEffect(() => {     
+    return () => {       
+      if (document.body.style.overflowY === "hidden") {         
+        document.body.style.overflowY = "auto";       
+      }     
+    };   
+  }, []);    
+
+  return (     
+    <>       
+      <AnimatePresence>
+        <motion.div
+          key={`event-${_event.id}`}
+          initial={{ opacity: 0, y: 10 }}           
+          animate={{ opacity: 1, y: 0 }}           
+          transition={{ duration: 0.2, ease: easeInOut }}           
+          className="cursor-pointer rounded-sm bg-light-blue p-1 text-xs text-black"           
+          onClick={handleEventClick}         
+        >           
+          {_event.title}         
+        </motion.div>          
+
+        {showEventModal && (           
+          <EventModal 
+            key={`modal-${_event.id}`} 
+            _event={_event} 
+            onClose={handleEventClick} 
+          />         
+        )}       
+      </AnimatePresence>     
+    </>   
+  ); 
+};  
+
+export default CalendarEvent;

src/components/events/MobileCalendarEvent.tsx → src/components/events/CalendarMonthView/MobileCalendarEvent.tsx

@@ -2,7 +2,7 @@ import { FirebaseEvent } from "@/types/events";
 import { format } from "date-fns";
 import { useEffect, useState } from "react";
 import { FaXmark } from "react-icons/fa6";
-import MonthlyEvent from "./MonthlyEvent";
+import MonthlyEvent from "../CalendarListView/MonthlyEvent";
 
 type MobileCalendarEventProps = {
   day: Date;

src/components/events/CalendarWeekView/WeekViewCalendar.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { format } from 'date-fns';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useCalendarEvents } from '@/hooks/useCalendarEvents';
+import WeekViewDay from './WeekViewDay';
+import { useResponsiveDayCount } from '@/hooks/useResponsiveDayCount';
+
+const FiveDayCalendar: React.FC = () => {
+  // Get the responsive day count.
+  const dayCount = useResponsiveDayCount();
+  const {
+    currentStartDate,
+    dayRange,
+    isLoading,
+    error,
+    navigateDays,
+    getEventsForDay,
+  } = useCalendarEvents(dayCount);
+
+  // Determine the grid columns based on dayCount.
+  let gridColsClass = 'grid-cols-1';
+  if (dayCount === 5) gridColsClass = 'grid-cols-5';
+  else if (dayCount === 4) gridColsClass = 'grid-cols-4';
+  else if (dayCount === 3) gridColsClass = 'grid-cols-3';
+  else if (dayCount === 2) gridColsClass = 'grid-cols-2';
+  else if (dayCount === 1) gridColsClass = 'grid-cols-1';
+
+  return (
+    <div className="px-4 pt-16">
+      <div className="flex items-center justify-center gap-4 mb-6">
+        <button
+          onClick={() => navigateDays('backward')}
+          className="p-1.5 hover:bg-gray-700 rounded-full"
+        >
+          <ChevronLeft />
+        </button>
+        <h2 className="text-xl font-bold">
+          {format(currentStartDate, 'MMMM yyyy')}
+        </h2>
+        <button
+          onClick={() => navigateDays('forward')}
+          className="p-1.5 hover:bg-gray-700 rounded-full"
+        >
+          <ChevronRight />
+        </button>
+      </div>
+
+      <div className={`grid ${gridColsClass} gap-6`}>
+        {dayRange.map((day) => (
+          <WeekViewDay
+            key={day.toISOString()}
+            day={day}
+            isLoading={isLoading}
+            error={error}
+            getEventsForDay={getEventsForDay}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default FiveDayCalendar;