Hornwitser
484c27ece2
Add timetable and event listing based on transforming a simple input data structure.
36 lines
989 B
TypeScript
36 lines
989 B
TypeScript
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>
|
|
}
|