feat: Add TeamList component for displaying registered teams in event details

.eslintrc.json

@@ -37,10 +37,6 @@
             "error",
             4
         ],
-        "linebreak-style": [
-            "error",
-            "unix"
-        ],
         "quotes": [
             "error",
             "double"

src/components/event/TeamList.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import type { ExtendedEvent } from "@components/types/event";
+    import type { Team } from "@components/types/team";
+    import { eventRepo } from "@components/repo/event";
+
+    const {
+        event,
+    }: {
+        event: ExtendedEvent;
+    } = $props();
+
+    let teams: Team[] = $state(event.teams);
+
+    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",
+    };
+
+    onMount(async () => {
+        teams = await $eventRepo.listTeams(event.event.id.toString());
+    });
+</script>
+
+<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">
+        {#each teams as 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="border-left-color: {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>
+        {/each}
+        {#if teams.length === 0}
+            <p class="col-span-full text-center text-neutral-400">Keine Teams angemeldet.</p>
+        {/if}
+    </div>
+</div>

src/pages/events/[slug].astro

@@ -4,6 +4,7 @@ import PageLayout from "@layouts/PageLayout.astro";
 import { astroI18n, createGetStaticPaths } from "astro-i18n";
 import { getCollection, type CollectionEntry } from "astro:content";
 import EventFights from "@components/event/EventFights.svelte";
+import TeamList from "@components/event/TeamList.svelte";
 
 export const getStaticPaths = createGetStaticPaths(async () => {
     const events = await Promise.all(
@@ -27,25 +28,6 @@ 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}>
@@ -73,23 +55,7 @@ const colorMap: Record<string, string> = {
     <article>
         <Content />
     </article>
-    {
+    <TeamList client:load eventId={event.event.id} />
-        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">