Website/src/components/FightTable.svelte

<script lang="ts">
    import {window} from "./util.ts";
    import {astroI18n, t} from "astro-i18n";
    import type {ExtendedEvent} from "./types/event.ts";

    export let event: ExtendedEvent;
    export let group: string;
    export let rows: number = 1;
</script>

<div>
    <table>
        <tr class="font-bold border-b">
            {#each Array(rows) as _}
                <td>{t("announcements.table.time")}</td>
                <td>{t("announcements.table.blue")}</td>
                <td>{t("announcements.table.red")}</td>
            {/each}
        </tr>
        {#each window(event.fights.filter(f => f.group === group), rows) as fights}
            <tr>
                {#each fights as fight}
                    <td>{Intl.DateTimeFormat(astroI18n.locale, {
                        hour: "numeric",
                        minute: "numeric",
                    }).format(new Date(fight.start))}</td>
                    <td class:font-bold={fight.ergebnis === 1} class:italic={fight.ergebnis === 3}>{fight.blueTeam.kuerzel}</td>
                    <td class:font-bold={fight.ergebnis === 2} class:italic={fight.ergebnis === 3}>{fight.redTeam.kuerzel}</td>
                {/each}
            </tr>
        {/each}
    </table>
</div>

<style lang="scss">
  table {
    @apply w-full;
  }
  div {
    @apply p-3 bg-gray-200 dark:bg-gray-800 rounded-2xl w-3/4 mx-auto;
  }
</style>