New Dashboard

src/components/moderator/pages/events/Events.svelte

@@ -0,0 +1,51 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2025 SteamWar.de-Serverteam
+  -
+  -   This program is free software: you can redistribute it and/or modify
+  -   it under the terms of the GNU Affero General Public License as published by
+  -   the Free Software Foundation, either version 3 of the License, or
+  -   (at your option) any later version.
+  -
+  -   This program is distributed in the hope that it will be useful,
+  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  -   GNU Affero General Public License for more details.
+  -
+  -   You should have received a copy of the GNU Affero General Public License
+  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<script lang="ts">
+    import { eventRepo } from "@repo/event.ts";
+    import EventCard from "@components/moderator/components/EventCard.svelte";
+
+    let eventsFuture = $state($eventRepo.listEvents());
+    let millis = Date.now();
+</script>
+
+<div class="p-4">
+    {#await eventsFuture}
+        <p>Loading...</p>
+    {:then events}
+        <h1 class="mt-5 scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">Upcoming</h1>
+        <div class="grid gap-4 p-4 border-b" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))">
+            {#each events.filter((e) => e.start > millis) as event (event.id)}
+                <a href="#/event/{event.id}">
+                    <EventCard {event} />
+                </a>
+            {/each}
+        </div>
+        <h1 class="mt-5 scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">Past</h1>
+        <div class="grid gap-4 p-4" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))">
+            {#each events.filter((e) => e.start < millis).reverse() as event (event.id)}
+                <a href="#/event/{event.id}">
+                    <EventCard {event} />
+                </a>
+            {/each}
+        </div>
+    {:catch e}
+
+    {/await}
+</div>