feat: Sticky-Date-Header

src/app/HomePageClient.tsx

@@ -1,6 +1,7 @@
 "use client";
-import { Box } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import { useSession } from "next-auth/react";
+import { Fragment } from "react";
 
 import { DefaultButton } from "@/components/Button/DefaultButton";
 
@@ -24,29 +25,68 @@ export default function HomePageClient({
   events,
 }: HomePageClientProps): React.ReactElement {
   const { status } = useSession();
+
+  const groups: Record<string, typeof events> = {};
+
+  for (const event of events) {
+    const date = event.eventDate;
+    if (!groups[date]) {
+      groups[date] = [];
+    }
+    groups[date].push(event);
+  }
+
+  const sortedDates = Object.keys(groups).sort();
+
   return (
     <>
-      {events.map((event) => (
-        <VolunteerEventCard
-          key={event.id}
-          id={event.id}
-          title={event.title}
-          eventDate={event.eventDate}
-          startTime={event.startTime}
-          endTime={event.endTime}
-          capacity={event.capacity}
-          streetLine={event.streetLine}
-          description={event.description}
-          isRegistered={event.isRegistered}
-        />
-      ))}
-      {/* Temporary event creation form */}
+      {sortedDates.map((dateString) => {
+        const [year, month, day] = dateString.split("-").map(Number);
+        const dateObj = new Date(year, month - 1, day);
+
+        const weekday = dateObj.toLocaleDateString("en-US", {
+          weekday: "long",
+        });
+        const displayDate = `${weekday}, ${month}/${day}/${year}`;
+
+        return (
+          <Fragment key={dateString}>
+            <Box
+              sx={{
+                backgroundColor: "secondary.main",
+                color: "white",
+                position: "sticky",
+                top: 56.8,
+                zIndex: 1,
+                padding: 2,
+                width: "100%",
+                mt: 2,
+              }}
+            >
+              <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                {displayDate}
+              </Typography>
+            </Box>
+
+            {groups[dateString].map((event) => (
+              <VolunteerEventCard
+                key={event.id}
+                id={event.id}
+                title={event.title}
+                eventDate={event.eventDate}
+                startTime={event.startTime}
+                endTime={event.endTime}
+                capacity={event.capacity}
+                streetLine={event.streetLine}
+                description={event.description}
+              />
+            ))}
+          </Fragment>
+        );
+      })}
+
       {status === "authenticated" && (
-        <Box
-          sx={{
-            display: "flex",
-          }}
-        >
+        <Box sx={{ display: "flex" }}>
           <DefaultButton
             label="temporary one time event creation button"
             href="/admin/one-time-event-creation"

src/app/WelcomeCard.tsx

@@ -10,6 +10,7 @@ export default function WelcomeCard(): React.ReactElement {
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
+        mb: 4,
       }}
     >
       <Card

src/app/page.tsx

@@ -1,7 +1,6 @@
 import Box from "@mui/material/Box";
 import { eq } from "drizzle-orm";
 
-import VolunteerEventCardHeader from "@/app/VolunteerEventCardHeader";
 import WelcomeCard from "@/app/WelcomeCard";
 import db from "@/db";
 import { eventAttendees } from "@/db/schema";