Upcoming Events
- -
- {events.map((event, i) => (
-
+
-
- ))}
-
- {event.date.split(' ')[0]}
- {event.date.split(' ')[1]}
-
-
-
- {event.title}
-
-
- Events
+
-
{/* --- BACKGROUND LAYERS --- */}
);
-}
\ No newline at end of file
+}
diff --git a/src/components/events/EventList.tsx b/src/components/events/EventList.tsx
new file mode 100644
index 0000000..389d5a6
--- /dev/null
+++ b/src/components/events/EventList.tsx
@@ -0,0 +1,370 @@
+"use client";
+import { useEffect, useState } from "react";
+import { MapPin } from "lucide-react";
+
+/**
+ * ============================================================================
+ * TYPES
+ * ============================================================================
+ */
+
+/**
+ * API event structure from Google Calendar
+ */
+type ApiEvent = {
+ id: string;
+ summary?: string;
+ location?: string;
+ description?: string;
+ start: {
+ dateTime?: string;
+ date?: string;
+ };
+ end?: {
+ dateTime?: string;
+ date?: string;
+ };
+};
+
+/**
+ * Normalized event with parsed dates and computed properties
+ * Used internally after processing from raw API response
+ */
+type NormalizedEvent = {
+ id: string;
+ summary?: string;
+ location?: string;
+ description?: string;
+ startDate: Date;
+ endDate?: Date;
+ isMultiDay: boolean;
+ isAllDay: boolean;
+ isToday: boolean;
+ isCurrentTime: boolean;
+};
+
+/**
+ * ============================================================================
+ * UTILITY FUNCTIONS
+ * ============================================================================
+ */
+
+/**
+ * Parse a date string from Google Calendar API
+ * Handles both ISO 8601 (timed) and YYYY-MM-DD (all-day) formats
+ *
+ * @param value - Date string from API, or undefined
+ * @returns Parsed Date object, or undefined if parsing fails
+ */
+function parseGoogleDate(value?: string): Date | undefined {
+ if (!value) return undefined;
+ return new Date(value);
+}
+
+/**
+ * Check if two dates fall on the same calendar day
+ * Ignores time component, only compares year/month/day
+ *
+ * @param date1 - First date to compare
+ * @param date2 - Second date to compare
+ * @returns True if dates are the same day
+ */
+function isSameDay(date1: Date, date2: Date): boolean {
+ return (
+ date1.getFullYear() === date2.getFullYear() &&
+ date1.getMonth() === date2.getMonth() &&
+ date1.getDate() === date2.getDate()
+ );
+}
+
+/**
+ * Format a time string from a Date object
+ * Example: "5:00 PM" or "2:30 PM"
+ *
+ * @param date - Date object to format
+ * @returns Formatted time string
+ */
+function formatTime(date: Date): string {
+ return date.toLocaleTimeString("en-US", {
+ hour: "numeric",
+ minute: "2-digit",
+ hour12: true,
+ });
+}
+
+/**
+ * Format a date range for display
+ * Single-day events show as "Mon, Jan 10"
+ * Multi-day events show as "Mon, Jan 10 → Wed, Jan 12"
+ *
+ * @param start - Start date
+ * @param end - Optional end date (if not provided or same day, shows single date)
+ * @returns Formatted date range string
+ */
+function formatDateRange(start: Date, end?: Date): string {
+ const startStr = start.toLocaleDateString("en-US", {
+ weekday: "short",
+ month: "short",
+ day: "numeric",
+ });
+
+ // Single-day event or no end date provided
+ if (!end || isSameDay(start, end)) {
+ return startStr;
+ }
+
+ // Multi-day event - show range
+ const endStr = end.toLocaleDateString("en-US", {
+ weekday: "short",
+ month: "short",
+ day: "numeric",
+ });
+
+ return `${startStr} → ${endStr}`;
+}
+
+/**
+ * ============================================================================
+ * COMPONENT: EventList
+ * ============================================================================
+ *
+ * Displays upcoming events from Google Calendar
+ * Features:
+ * - Fetches events from /api/calendar endpoint
+ * - Shows only future events (upcoming)
+ * - Handles multi-day events with date ranges
+ * - Responsive design optimized for dark theme
+ * - Loading and error states
+ */
+export default function EventList() {
+ const [events, setEvents] = useState
{/* 1. Grain Texture (White noise on black) */}
-
+
{/* 2. The Tech Grid (Inverted to faint white lines) */}
@@ -38,9 +38,9 @@ export default function RootLayout({
- {children}
+ {children}
+
+ );
+ }
+
+ /**
+ * Error state
+ */
+ if (error) {
+ return (
+
+
+
+
+
+
+ );
+ }
+
+ /**
+ * Empty state (no future events)
+ */
+ if (!events.length) {
+ return (
+
+ {error}
+
+
+
+ );
+ }
+
+ /**
+ * Main render - event cards
+ */
+ return (
+ No upcoming events
+
+
+ );
+}
+ {/* Header */}
+
+
+
+ {/* Event cards */}
+
+ Events
++ {events.length} upcoming event{events.length !== 1 ? "s" : ""} +
+
+ {events.map((event) => {
+ const dateStr = formatDateRange(event.startDate, event.endDate);
+
+ return (
+
+
+ {event.isCurrentTime && (
+
+ );
+ })}
+
+
+
+ Live Now!
+
+
+ )}
+ {event.isAllDay && event.isToday && !event.isCurrentTime && (
+
+
+
+ Live Now!
+
+
+ )}
+ {event.isToday && !event.isCurrentTime && !event.isAllDay && (
+
+
+ Starting Soon!
+
+
+ )}
+
+ {/* Date Section */}
+
+
+
+
+ {/* Divider (visible on desktop only) */}
+
+
+ {/* Content Section */}
+ + {event.isMultiDay ? "Date Range" : "Date"} +
++ {dateStr} +
+ {!event.isAllDay && + (event.startDate.getHours() !== 0 || + event.startDate.getMinutes() !== 0) ? ( ++ {formatTime(event.startDate)} + {event.endDate && + (event.endDate.getHours() !== 0 || + event.endDate.getMinutes() !== 0) ? ( + <> – {formatTime(event.endDate)} + ) : null} +
+ ) : null} +
+ {/* Event title */}
+
+ + {event.summary ?? "Untitled Event"} +
+ + {/* Location (if present) */} + {event.location && ( +
+
+ {event.description} +
+ )} +