67 lines
2.1 KiB
Svelte
67 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { enhance } from '$app/forms';
|
|
|
|
let { data } = $props();
|
|
let creating = $state(false);
|
|
</script>
|
|
|
|
<div class="mx-auto max-w-4xl">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-2xl font-700 tracking-tight">Mappools</h1>
|
|
<p class="mt-1 text-sm text-text-secondary">Create and manage your beatmap pools</p>
|
|
</div>
|
|
<button
|
|
onclick={() => (creating = !creating)}
|
|
class="rounded-md bg-accent px-4 py-2 text-sm font-600 text-surface-900 transition-colors hover:bg-accent-hover"
|
|
>
|
|
{creating ? 'Cancel' : 'New Pool'}
|
|
</button>
|
|
</div>
|
|
|
|
{#if creating}
|
|
<form
|
|
method="post"
|
|
action="?/create"
|
|
use:enhance
|
|
class="mt-4 flex gap-3 rounded-lg border border-border bg-surface-800 p-4"
|
|
>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
placeholder="Pool name (e.g. Grand Finals Mappool)"
|
|
required
|
|
class="flex-1 rounded-md border border-border bg-surface-700 px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary/50 focus:border-accent focus:outline-none"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
class="rounded-md bg-accent px-4 py-2 text-sm font-600 text-surface-900 transition-colors hover:bg-accent-hover"
|
|
>
|
|
Create
|
|
</button>
|
|
</form>
|
|
{/if}
|
|
|
|
<div class="mt-6 flex flex-col gap-3">
|
|
{#each data.mappools as pool}
|
|
<a
|
|
href="/mappools/{pool.id}"
|
|
class="group flex items-center justify-between rounded-lg border border-border bg-surface-800 p-4 transition-colors hover:border-accent/40 hover:bg-surface-700"
|
|
>
|
|
<div>
|
|
<h2 class="text-sm font-600">{pool.name}</h2>
|
|
<p class="mt-1 text-xs text-text-secondary">
|
|
{pool.slots.length} map{pool.slots.length !== 1 ? 's' : ''}
|
|
· Created {new Date(pool.createdAt).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
<span class="text-text-secondary transition-colors group-hover:text-accent">→</span>
|
|
</a>
|
|
{:else}
|
|
<div class="rounded-lg border border-dashed border-border py-12 text-center">
|
|
<p class="text-sm text-text-secondary">No mappools yet. Create one to get started.</p>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|