Update some Event View Code

src/pages/events/[slug].astro

@@ -27,6 +27,25 @@ export const getStaticPaths = createGetStaticPaths(async () => {
 const { event, page } = Astro.props as { event: ExtendedEvent; page: CollectionEntry<"events"> };
 
 const { Content } = await page.render();
+
+const colorMap: Record<string, string> = {
+    "0": "#000000",
+    "1": "#0000AA",
+    "2": "#00AA00",
+    "3": "#00AAAA",
+    "4": "#AA0000",
+    "5": "#AA00AA",
+    "6": "#FFAA00",
+    "7": "#AAAAAA",
+    "8": "#555555",
+    "9": "#5555FF",
+    a: "#55FF55",
+    b: "#55FFFF",
+    c: "#FF5555",
+    d: "#FF55FF",
+    e: "#FFFF55",
+    f: "#FFFFFF",
+};
 ---
 
 <PageLayout title={event.event.name} wide={true}>
@@ -54,6 +73,23 @@ const { Content } = await page.render();
     <article>
         <Content />
     </article>
+    {
+        event.teams.length > 0 && (
+            <div class="py-2 border-t border-t-gray-600">
+                <h1 class="text-2xl font-bold mb-4">Angemeldete Teams</h1>
+                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2">
+                    {event.teams.map((team) => (
+                        <div class="bg-neutral-800 p-2 rounded-md border border-neutral-700 border-l-4 flex flex-row items-center gap-2" style={{ borderLeftColor: colorMap[team.color] || "#FFFFFF" }}>
+                            <span class="text-sm font-mono text-neutral-400 shrink-0 w-8 text-center">{team.kuerzel}</span>
+                            <span class="font-bold truncate" title={team.name}>
+                                {team.name}
+                            </span>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        )
+    }
     {
         page.data.viewConfig && (
             <div class="py-2 border-t border-t-gray-600">

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>