starting to have a bracket system that is previewable

src/lib/components/rounds/create-round.svelte

@@ -1,115 +0,0 @@
-<script lang="ts">
-	import Button from '$ui/button/button.svelte';
-	import CardContent from '$ui/card/card-content.svelte';
-	import CardHeader from '$ui/card/card-header.svelte';
-	import Card from '$ui/card/card.svelte';
-	import Input from '$ui/input/input.svelte';
-	import Label from '$ui/label/label.svelte';
-	import RadioGroupItem from '$ui/radio-group/radio-group-item.svelte';
-	import RadioGroup from '$ui/radio-group/radio-group.svelte';
-	import type { Round } from '@/lib/server/db/schema/rounds';
-	import { cn, instanceOf } from '@/lib/utils';
-	import { SchedulingMode } from '@/types';
-	import { ArrowRightIcon, CircleQuestionMarkIcon } from 'lucide-svelte';
-	import { _ } from 'svelte-i18n';
-	import { toast } from 'svelte-sonner';
-	import { Tooltip, TooltipProvider } from '../ui/tooltip';
-	import TooltipContent from '../ui/tooltip/tooltip-content.svelte';
-	import TooltipTrigger from '../ui/tooltip/tooltip-trigger.svelte';
-
-	let {
-		competitionId,
-		rounds = $bindable(),
-		showAddRound = $bindable(true)
-	}: { competitionId: string; rounds: Round[]; showAddRound: boolean } = $props();
-
-	let schedulingMode: SchedulingMode = $state(SchedulingMode.single);
-	let name = $state('');
-	let nameInvalid = $state(false);
-	let nbMatches: number | undefined = $state();
-	let nbMatchesInvalid = $state(false);
-
-	async function submit() {
-		if (name.length === 0) {
-			nameInvalid = true;
-			toast.error('Name is required');
-			return;
-		}
-		if (!nbMatches || nbMatches < 0) {
-			nbMatchesInvalid = true;
-			toast.error('Number of matches must be greater than 0');
-			return;
-		}
-		nameInvalid = false;
-		const response = await fetch(`/api/competitions/${competitionId}`, {
-			method: 'POST',
-			credentials: 'include',
-			body: JSON.stringify({ scheduling_mode: schedulingMode, name: name, nb_matches: nbMatches })
-		});
-		console.log('response', response);
-		// update rounds
-		const data = await response.json();
-		if (instanceOf<Round>(data, 'id')) {
-			rounds = [...rounds, data];
-			showAddRound = false;
-		} else {
-			throw new Error('Invalid round');
-		}
-	}
-</script>
-
-<div class="flex flex-col gap-4">
-	<div class="grid grid-cols-2 grid-rows-2 gap-4">
-		<Label for="name" class="text-start">Name<span class="text-red-500">*</span></Label>
-
-		<TooltipProvider>
-			<Tooltip>
-				<TooltipTrigger>
-					<Label for="nb_matches" class="text-start"
-						>Number of matches<span class="text-red-500">*</span><CircleQuestionMarkIcon /></Label
-					>
-				</TooltipTrigger>
-				<TooltipContent>Number of participants at the beginning of the stage.</TooltipContent>
-			</Tooltip>
-		</TooltipProvider>
-		<Input
-			aria-invalid={nameInvalid}
-			name="name"
-			type="text"
-			bind:value={name}
-			placeholder="Name"
-		/>
-		<Input
-			aria-invalid={nbMatchesInvalid}
-			name="nb_matches"
-			type="number"
-			bind:value={nbMatches}
-			placeholder="Number of matches"
-		/>
-	</div>
-	<RadioGroup
-		required
-		bind:value={() => schedulingMode, (t: SchedulingMode) => {}}
-		name="scheduling_mode"
-	>
-		{#each Object.values(SchedulingMode) as mode}
-			<button
-				class="flex h-full w-full items-center gap-4 rounded-xl"
-				onclick={() => (schedulingMode = mode)}
-			>
-				<Card class={cn('w-full', schedulingMode === mode && ' border-green-500')}>
-					<CardHeader class="flex justify-between">
-						<Label class="text-start">{$_(mode)}</Label>
-					</CardHeader>
-					<CardContent>
-						<RadioGroupItem hidden value={mode} />
-						<Label class="text-start">{$_(`${mode}.description`)}</Label>
-					</CardContent>
-				</Card>
-			</button>
-		{/each}
-	</RadioGroup>
-	<div class="flex w-full justify-end">
-		<Button onclick={submit}>Add Round<ArrowRightIcon /></Button>
-	</div>
-</div>