<script lang="ts">
    let { data } = $props();
</script>

<h1 class="m-4 mb-8 text-7xl font-bold">Games</h1>

<div class="flex flex-col space-y-4">
    {#each data.games as game, i}
        <a
            class="ms-4 me-4 rounded-xl border-2 p-4 hover:cursor-pointer hover:bg-emerald-200"
            href="/connected/games/{i}">{game.name}</a
        >
    {/each}
</div>
