Created event api function and components

src/app/student/_components/EventItem.tsx

@@ -0,0 +1,40 @@
+import { P } from "@/app/_components/Paragraph"
+import {
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger
+} from "@/components/ui/accordion"
+import { cn } from "@/lib/utils"
+
+export function EventItem({
+	children,
+	title,
+	dateString
+}: {
+	children?: React.ReactNode
+	title: string
+	dateString: string
+}) {
+	const expandable = children != null
+	return (
+		<AccordionItem value={title} disabled={!expandable} className="border-none">
+			<div className="absolute -start-1.5 mt-3.5 h-3 w-3 rounded-full border border-white bg-melon-700"></div>
+			<AccordionTrigger
+				disabled={!expandable}
+				className={cn(
+					"mb-2 ml-4 w-full rounded px-2 pb-4 pt-0 text-left font-normal hover:no-underline",
+					{ "transition hover:bg-slate-700": expandable }
+				)}>
+				<div>
+					<P className="text-stone-400">{dateString}</P>
+					<div className="flex w-full justify-between ">
+						<h3 className="text-2xl md:text-3xl">{title}</h3>
+					</div>
+				</div>
+			</AccordionTrigger>
+			<AccordionContent className="-mt-2 ml-1 px-5 text-base">
+				{children}
+			</AccordionContent>
+		</AccordionItem>
+	)
+}

src/app/student/_components/EventsTimeLine.tsx

@@ -0,0 +1,81 @@
+import { P } from "@/app/_components/Paragraph"
+import { fetchDates } from "@/components/shared/hooks/api/useDates"
+import { Accordion } from "@/components/ui/accordion"
+import { Button } from "@/components/ui/button"
+
+import { EventItem } from "@/app/student/_components/EventItem"
+import { DateTime } from "luxon"
+import Link from "next/link"
+
+function formatDate(date: string) {
+	return DateTime.fromISO(date).toFormat(
+		`d MMMM ${DateTime.fromISO(date).year !== DateTime.now().year ? " YYYY" : ""}`
+	)
+}
+
+export async function EventsTimeline() {
+	const dates = await fetchDates()
+
+	//ASSUMPTION: the start date will be first for fair dates
+	return (
+		<Accordion
+			type="single"
+			collapsible={true}
+			className="relative mt-10 border-s border-melon-700">
+			<EventItem
+				dateString={`Before ${formatDate(dates.ir.start)}`}
+				title="Armada is setting up">
+				<P className="mt-3 text-stone-400">
+					Before the Initial Registration can open, we need to make
+					preparations. We are right now choosing a new project group - 20
+					something students who will work hard all year to make Armada happen.
+				</P>
+				<P className="mt-3 text-stone-400">
+					We will open Initial Registration where you apply to be an exhibitor
+					soon. You can express your interest here, and we will contact you as
+					soon as registration opens!
+				</P>
+			</EventItem>
+
+			<EventItem
+				dateString={formatDate(dates.ir.start)}
+				title="Initial Registration starts">
+				<P className="mt-3 text-stone-400">
+					Initial Registration is where you apply to be an exhibitor. When you
+					register you commit to be a part of Armada and if given a spot you are
+					expected to exhibit, so wait with registration until you are sure. If
+					you have any questions, do not hesitate to contact{" "}
+					<Link
+						className="text-white underline hover:no-underline"
+						href="mailto:[email protected]">
+						[email protected]
+					</Link>
+					.
+				</P>
+				<P className="mt-3 text-stone-400">
+					Sadly, we can&apos;t guarantee a spot for everyone that applies. We
+					are right now investigating how many exhibitors we can fit and how big
+					the interest is. We try our best to get a good mix of great exhibitors
+					that make Armada the best place for students to find their dream
+					employer!
+				</P>
+				<P className="mt-3 text-stone-400">
+					During the Initial Registration you don&apos;t need to choose a
+					package, and the packages are outlined{" "}
+					<Link
+						className="text-white underline hover:no-underline"
+						href="/exhibitor/packages">
+						here
+					</Link>{" "}
+					to give you an overview. Prices are set, and small changes can occur
+					in the larger packages.
+				</P>
+				<div className="my-4">
+					<Link href="https://register.armada.nu/register">
+						<Button>Signup to Armada</Button>
+					</Link>
+				</div>
+			</EventItem>
+		</Accordion>
+	)
+}

src/app/student/events/page.tsx

@@ -1,3 +1,4 @@
+import { EventsTimeline } from "@/app/student/_components/EventsTimeLine"
 import { Page } from "@/components/shared/Page"
 import { Suspense } from "react"
 
@@ -7,6 +8,7 @@ export default async function StudentEventPage() {
 			<Page.Boundary>
 				<Page.Header>Events</Page.Header>
 				<Suspense></Suspense>
+				<EventsTimeline />
 			</Page.Boundary>
 		</Page.Background>
 	)

src/components/shared/hooks/api/useEvents.tsx

@@ -0,0 +1,47 @@
+import { env } from "@/env"
+import { useQuery } from "@tanstack/react-query"
+
+export interface Event {
+	id: number
+	name: string
+	description: string
+	location: string
+	food: string
+	event_start: number
+	event_end: number
+	event_start_string: string
+	registration_end: number
+	image_url: string
+	fee: number
+	registration_required: boolean
+	external_event_link: string
+	signup_questions: SignupQuestion[]
+	signup_link: string
+	can_create_teams: boolean
+	can_join_teams: boolean
+	open_for_signup: boolean
+}
+
+export interface SignupQuestion {
+	id: number
+	type: string
+	question: string
+	required: boolean
+	options: string[]
+}
+
+export async function fetchEvents(options?: RequestInit) {
+	const res = await fetch(
+		`${env.NEXT_PUBLIC_API_URL}/api/events`,
+		options ?? {}
+	)
+	const result = await res.json()
+	return result as Event[]
+}
+
+export function useEvents(options?: RequestInit) {
+	return useQuery({
+		queryKey: ["events"],
+		queryFn: () => fetchEvents(options)
+	})
+}