From 4645a5c5252800883b9b54a657b569d08569d2cf Mon Sep 17 00:00:00 2001
From: jc <46619361+juancwu@users.noreply.github.com>
Date: Tue, 7 Jan 2025 14:25:10 -0500
Subject: [PATCH] bk

---
 src/components/Schedule/Schedule.test.tsx |  0
 src/components/Schedule/Schedule.tsx      | 66 +++++++++++++++++++++++
 2 files changed, 66 insertions(+)
 create mode 100644 src/components/Schedule/Schedule.test.tsx
 create mode 100644 src/components/Schedule/Schedule.tsx

diff --git a/src/components/Schedule/Schedule.test.tsx b/src/components/Schedule/Schedule.test.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/Schedule/Schedule.tsx b/src/components/Schedule/Schedule.tsx
new file mode 100644
index 00000000..60287bc9
--- /dev/null
+++ b/src/components/Schedule/Schedule.tsx
@@ -0,0 +1,66 @@
+import { EventNameString } from "firebase/analytics";
+import { FC, ReactNode, useEffect, useState } from "react";
+
+// EventType represents the different types of events available.
+// These are used to decide the colour of each event that is rendered on screen.
+export enum EventType {
+    WORKSHOP,
+    EVENT,
+    FOOD,
+    IMPORTANT,
+    GAME_CHILL,
+    NETWORKING,
+}
+
+// EventItem represents an event that is going to be rendered
+export interface EventItem {
+    // unique event id
+    id: string;
+    // ISO-8601 format
+    startsAt: string;
+    // ISO-8601 format
+    endsAt: string;
+
+    // basic information
+    title: string;
+    description: string;
+
+    // optional icon that appears on the far left of an event card
+    icon?: ReactNode;
+
+    // actions
+    onClick?: ((evt: EventItem) => void) | ((evt: EventItem) => Promise<void>);
+}
+
+export interface ScheduleProps {
+    events: EventItem[];
+}
+
+/*
+ * Main idea is to have the schedule component expand the entire width of the given parent container.
+ * The component should handle responsiveness and the parent container is responsible of putting it
+ * somewhere in the page. When an event is clicked, the component bubbles up an onClick so that
+ * the parent component that handle the event and do something with the clicked event.
+ *
+ * The dates have to be strictly in iso-8601 format so that ordering isn't messed up.
+ * All dates have to be strictly in UTC and UTC only.
+ * Dates are converted into the local timezone from UTC.
+ *
+ *
+ * UI:
+ * Events are stacked on the Y-axis and time is on the X-axis (desktop)
+ *
+ * Single column, multi row in mobile, events are ordered by time,
+ * different days switch by selecting on the header (mobile)
+ *
+ */
+const Schedule: FC<ScheduleProps> = ({ events }) => {
+    const [sortedEvents, setSortedEvents] = useState<EventItem[]>([]);
+
+    // sort the events
+    useEffect(() => {}, [events]);
+
+    return <div></div>;
+};
+
+export { Schedule };