Implement EventStream for live schedule updates

app/schedule/page.tsx

@@ -1,38 +1,26 @@
 import Timetable from "@/ui/timetable"
-import styles from "./page.module.css"
-import { Schedule, ScheduleEvent } from "./types"
+import { Schedule } from "./types"
 import { readFile } from "fs/promises"
+import { ScheduleProvider } from "./context"
+import { Events } from "@/ui/events";
+import { Locations } from "@/ui/locations";
 
-function EventInfo(props: { event: ScheduleEvent }) {
-	return <section className={styles.event}>
-		<h3>{props.event.name}</h3>
-		<p>{props.event.description ?? "No description provided"}</p>
-		<h4>Timeslots</h4>
-		<ul>
-			{props.event.slots.map(slot => <li key={slot.id}>
-				{slot.start} - {slot.end}
-			</li>)}
-		</ul>
-	</section>
-}
-
-export default async function schedule() {
+export default async function page() {
 	const schedule: Schedule = JSON.parse(await readFile("schedule.json", "utf-8"));
-	return <main className={styles.schedule}>
-		<h1>Schedule & Events</h1>
-		<p>
-			Study carefully, we only hold these events once a year.
-		</p>
-		<h2>Schedule</h2>
-		<Timetable schedule={schedule} />
-		<h2>Events</h2>
-		{schedule.events.map(event => <EventInfo event={event} key={event.id}/>)}
-		<h2>Locations</h2>
-		<ul>
-			{schedule.locations.map(location => <li key={location.id}>
-				<h3>{location.name}</h3>
-				{location.description ?? "No description provided"}
-			</li>)}
-		</ul>
-	</main>
+	return (
+		<ScheduleProvider schedule={schedule}>
+			<main>
+				<h1>Schedule & Events</h1>
+				<p>
+					Study carefully, we only hold these events once a year.
+				</p>
+				<h2>Schedule</h2>
+				<Timetable />
+				<h2>Events</h2>
+				<Events />
+				<h2>Locations</h2>
+				<Locations />
+			</main>
+		</ScheduleProvider>
+	);
 }