Update some Event View Code

src/pages/events/index.astro

@@ -2,35 +2,23 @@
 import type { ExtendedEvent } from "@components/types/event";
 import PageLayout from "@layouts/PageLayout.astro";
 import { getCollection } from "astro:content";
+import EventPage from "@components/event/EventPage.svelte";
 
 const events = await Promise.all(
     (await getCollection("events")).map(async (event) => ({
         ...event,
         data: {
             ...event.data,
-            event: (await fetch(import.meta.env.PUBLIC_API_SERVER + "/events/" + event.data.eventId).then((value) => value.json())) as ExtendedEvent,
+            event: (await fetch(
+                import.meta.env.PUBLIC_API_SERVER +
+                    "/events/" +
+                    event.data.eventId,
+            ).then((value) => value.json())) as ExtendedEvent,
         },
-    }))
+    })),
 );
 ---
 
 <PageLayout title="Events">
-    {
-        events.map((event) => (
-            <article class="mb-8">
-                <h2 class="text-2xl font-bold mb-2">
-                    <a href={`/events/${event.slug}/`} class="text-blue-600 hover:underline">
-                        {event.data.event.event.name ?? "Hello, World!"}
-                    </a>
-                </h2>
-                <p class="text-gray-600 mb-1">
-                    {new Date(event.data.event.event.start).toLocaleDateString(undefined, {
-                        year: "numeric",
-                        month: "long",
-                        day: "numeric",
-                    })}
-                </p>
-            </article>
-        ))
-    }
+    <EventPage client:load {events} />
 </PageLayout>