added exhibitor timeline

src/app/exhibitor/_components/ExhibitorTimeline.tsx

@@ -0,0 +1,52 @@
+import { fetchDates } from "@/components/shared/hooks/api/useDates"
+import { DateTime } from "luxon"
+
+export async function ExhibitorTimeline() {
+	const dates = await fetchDates()
+
+	console.log(dates)
+
+	function formatDate(date: string) {
+		return DateTime.fromISO(date).toFormat(
+			`d MMMM ${DateTime.fromISO(date).year !== DateTime.now().year ? " YYYY" : ""}`
+		)
+	}
+
+	//ASSUMPTION: the start date will be first for fair dates
+	return (
+		<div className="mt-10">
+			<div className="mt-10 flex flex-col space-y-4">
+				<div className="flex space-x-4">
+					<p className="w-28">{formatDate(dates.ir.start)}</p>
+					<p>Initial registration start</p>
+				</div>
+				<div className="flex space-x-4">
+					<p className="w-28">{formatDate(dates.ir.end)}</p>
+					<p>Initial registration end</p>
+				</div>
+			</div>
+
+			<div className="mt-10 flex flex-col space-y-4">
+				<div className="flex space-x-4">
+					<p className="w-28">{formatDate(dates.fr.start)}</p>
+					<p>Final registration start</p>
+				</div>
+				<div className="flex space-x-4">
+					<p className="w-28">{formatDate(dates.fr.end)}</p>
+					<p>Final registration end</p>
+				</div>
+			</div>
+
+			<div className="mt-10 flex flex-col space-y-4">
+				<div className="flex space-x-4">
+					<p className="w-28">{formatDate(dates.fair.days[0])}</p>
+					<p>Armada fair start</p>
+				</div>
+				<div className="flex space-x-4">
+					<p className="w-28">{formatDate(dates.fair.days[1])}</p>
+					<p>Armada fair end</p>
+				</div>
+			</div>
+		</div>
+	)
+}

src/app/exhibitor/timeline/page.tsx

@@ -1,13 +1,16 @@
+import { ExhibitorTimeline } from "@/app/exhibitor/_components/ExhibitorTimeline"
 import { Page } from "@/components/shared/Page"
 
-export default function WhyKTHPage() {
+export default async function WhyKTHPage() {
+
+
 	return (
 		<Page.Background withIndents>
 			<Page.Boundary maxWidth={600}>
 				<Page.Header>Timeline</Page.Header>
 				<div className="h-5" />
 				<p className="leading-8 text-stone-400">text here</p>
-				<p>timeline here</p>
+				<ExhibitorTimeline />
 			</Page.Boundary>
 		</Page.Background>
 	)