Minimally functional schedule rendering

Add timetable and event listing based on transforming a simple input
data structure.

app/schedule/page.tsx

@@ -0,0 +1,36 @@
+import Timetable from "@/ui/timetable"
+import styles from "./page.module.css"
+import { ScheduleEvent, events, locations } from "./events"
+
+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 function schedule() {
+	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 events={events} />
+		<h2>Events</h2>
+		{events.map(event => <EventInfo event={event} key={event.id}/>)}
+		<h2>Locations</h2>
+		<ul>
+			{locations.map(location => <li key={location.id}>
+				<h3>{location.name}</h3>
+				{location.description ?? "No description provided"}
+			</li>)}
+		</ul>
+	</main>
+}