Xi duosi/event overview page

src/app/student/_components/EventItem.tsx

@@ -0,0 +1,47 @@
+import { DateTime } from "luxon"
+
+export function EventItem({
+	id,
+	title,
+	event_start,
+	registration_end,
+	image_url
+}: {
+	id: string
+	title: string
+	event_start: number
+	registration_end: number
+	image_url?: string
+}) {
+	return (
+		<div className="mb-6 ml-6 w-5/6 rounded-lg border-2 border-solid border-emerald-900 bg-gradient-to-br from-emerald-950 to-liqorice-700 hover:brightness-95 md:w-3/5">
+			<a
+				href="#"
+				className="flex flex-auto flex-col items-center md:h-48 md:max-w-xl md:flex-row">
+				<div className="absolute -start-1.5 mt-3.5 h-3 w-3 rounded-full border border-white bg-melon-700"></div>
+				{image_url && (
+					<img
+						className="h-full w-full rounded-t-lg object-contain md:h-48 md:w-48 md:rounded-l-lg md:rounded-tr-none "
+						src={image_url}
+						alt=""
+					/>
+				)}
+				<div className="flex flex-col justify-between md:pl-5">
+					<h5 className="mb-4 mt-5 font-bold text-gray-900 dark:text-white md:mb-12 md:text-2xl">
+						{title}
+					</h5>
+					<p className="mb-1 text-xs text-gray-700 dark:text-gray-400">
+						Registration end:{" "}
+						{DateTime.fromMillis(registration_end * 1000).toFormat(
+							"yyyy MMM dd"
+						)}
+					</p>
+					<p className="mb-4 text-xs text-gray-700 dark:text-gray-400">
+						Event start:{" "}
+						{DateTime.fromMillis(event_start * 1000).toFormat("yyyy MMM dd")}
+					</p>
+				</div>
+			</a>
+		</div>
+	)
+}

src/app/student/_components/EventsTimeLine.tsx

@@ -0,0 +1,20 @@
+import { EventItem } from "@/app/student/_components/EventItem"
+import { Event } from "@/components/shared/hooks/api/useEvents"
+
+export async function EventsTimeline({ events }: { events: Event[] }) {
+	const renderEvent = events.map(event => (
+		<EventItem
+			key={event.id}
+			id={event.id.toString()}
+			title={event.name}
+			event_start={event.event_start}
+			registration_end={event.registration_end}
+			image_url={event.image_url}></EventItem>
+	))
+
+	return (
+		<div className="relative mt-10 border-s border-melon-700">
+			{renderEvent}
+		</div>
+	)
+}

src/app/student/events/page.tsx

@@ -0,0 +1,19 @@
+import { EventsTimeline } from "@/app/student/_components/EventsTimeLine"
+import { Page } from "@/components/shared/Page"
+import { fetchEvents } from "@/components/shared/hooks/api/useEvents"
+import { Suspense } from "react"
+
+export default async function StudentEventPage() {
+	const events = await fetchEvents()
+
+	return (
+		<Page.Background withIndents>
+			<Page.Boundary>
+				<Page.Header>Events</Page.Header>
+				<Suspense>
+					<EventsTimeline events={events} />
+				</Suspense>
+			</Page.Boundary>
+		</Page.Background>
+	)
+}

src/components/shared/NavigationMenu.tsx

@@ -51,11 +51,11 @@ const studentLinks: { title: string; href: string; description: string }[] = [
 		href: "/student/exhibitors",
 		description: `Get an in depth look at the companies attending the fair`
 	},
-	/* 	{
+	{
 		title: "Events",
 		href: "/student/events",
 		description: "See the events leading up to the fair"
-	}, */
+	},
 	{
 		title: "Recruitment",
 		href: "/student/recruitment",

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)
+	})
+}