55 lines
1.9 KiB
Svelte
55 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import Button from '@/components/ui/button/button.svelte';
|
|
import * as Card from '@/components/ui/card/index.js';
|
|
import * as Table from '@/components/ui/table';
|
|
import AppLayout from '@/layouts/AppLayout.svelte';
|
|
import { type Tournament } from '@/types';
|
|
|
|
const breadcrumbs = [
|
|
{ title: 'Home', href: '/' },
|
|
{ title: 'Tournaments', href: '/tournaments' },
|
|
{ title: 'Tournament Name', href: '/tournaments/1' },
|
|
];
|
|
|
|
let { tournament }: { tournament: Tournament } = $props();
|
|
|
|
function handleAddTeam() {
|
|
// add a new row to write the team name, on write complete save it
|
|
}
|
|
</script>
|
|
|
|
<AppLayout {breadcrumbs}>
|
|
{JSON.stringify(tournament)}
|
|
<!-- Teams -->
|
|
<Card.Root>
|
|
<Card.Header>
|
|
<Card.Title>Teams</Card.Title>
|
|
</Card.Header>
|
|
<Card.Content>
|
|
<Table.Root>
|
|
<Table.Header>
|
|
<Table.Row>
|
|
<Table.Head>Name</Table.Head>
|
|
<Table.Head>Actions</Table.Head>
|
|
</Table.Row>
|
|
</Table.Header>
|
|
<Table.Body>
|
|
{#each tournament.teams as team (team)}
|
|
<Table.Row>
|
|
<Table.Cell>{JSON.stringify(team)}</Table.Cell>
|
|
<Table.Cell>
|
|
<Button variant="outline">Edit</Button>
|
|
<Button variant="destructive">Delete</Button>
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
{/each}
|
|
<Table.Row>
|
|
<Table.Cell>
|
|
<Button onsubmit={handleAddTeam} variant="outline">+ Add Team</Button>
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
</Table.Body>
|
|
</Table.Root>
|
|
</Card.Content>
|
|
</Card.Root>
|
|
</AppLayout>
|