Updated event item

src/app/student/_components/EventItem.tsx

@@ -1,9 +1,8 @@
-import { AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
+import { Card } from "@/components/ui/card"
 import { cn } from "@/lib/utils"
 import { DateTime } from "luxon"
 
 export function EventItem({
-	children,
 	EventTitle,
 	open_for_signup,
 	registration_required,
@@ -12,6 +11,7 @@ export function EventItem({
 	registration_end,
 	image_url
 }: {
+	id: string
 	children?: React.ReactNode
 	EventTitle: string
 	open_for_signup: boolean
@@ -21,15 +21,11 @@ export function EventItem({
 	registration_end: number
 	image_url: string
 }) {
-	const expandable = children != null
+	const expandable = false
 	return (
-		<AccordionItem
-			value={EventTitle}
-			disabled={!expandable}
-			className="border-none">
+		<Card 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}
+			<div
 				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 }
@@ -64,7 +60,7 @@ export function EventItem({
 						)}
 					</div>
 				</div>
-			</AccordionTrigger>
-		</AccordionItem>
+			</div>
+		</Card>
 	)
 }

src/app/student/_components/EventsTimeLine.tsx

@@ -1,81 +1,27 @@
-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" : ""}`
-	)
-}
+import { Event } from "@/components/shared/hooks/api/useEvents"
+import { Accordion } from "@/components/ui/accordion"
 
-export async function EventsTimeline() {
-	const dates = await fetchDates()
+export async function EventsTimeline({ events }: { events: Event[] }) {
+	const renderEvent = events.map(event => (
+		<EventItem
+			id={event.id.toString()}
+			EventTitle={event.name}
+			open_for_signup={event.open_for_signup}
+			registration_required={event.registration_required}
+			location={event.location}
+			event_start={event.event_start}
+			registration_end={event.registration_end}
+			image_url={event.image_url}></EventItem>
+	))
 
 	//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>
+			{renderEvent}
 		</Accordion>
 	)
 }

src/app/student/events/page.tsx

@@ -1,14 +1,18 @@
 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()
+	console.log(events)
 	return (
 		<Page.Background withIndents>
 			<Page.Boundary>
 				<Page.Header>Events</Page.Header>
-				<Suspense></Suspense>
-				<EventsTimeline />
+				<Suspense>
+					<EventsTimeline events={events} />
+				</Suspense>
 			</Page.Boundary>
 		</Page.Background>
 	)