create rounds

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

@@ -1,41 +1,61 @@
 <script lang="ts">
-	import { superForm, type Infer, type SuperValidated } from 'sveltekit-superforms';
-	import { FormControl } from '../ui/form';
-	import FormDescription from '../ui/form/form-description.svelte';
-	import FormFieldErrors from '../ui/form/form-field-errors.svelte';
-	import FormField from '../ui/form/form-field.svelte';
-	import FormLabel from '../ui/form/form-label.svelte';
-	import { formSchema, type FormSchema } from './create-schema';
-	import { zodClient } from 'sveltekit-superforms/adapters';
-	import RadioGroup from '../ui/radio-group/radio-group.svelte';
-	import RadioGroupItem from '../ui/radio-group/radio-group-item.svelte';
+	import { FormControl } from '$ui/form';
+	import FormDescription from '$ui/form/form-description.svelte';
+	import FormFieldErrors from '$ui/form/form-field-errors.svelte';
+	import FormField from '$ui/form/form-field.svelte';
+	import FormLabel from '$ui/form/form-label.svelte';
+	import RadioGroup from '$ui/radio-group/radio-group.svelte';
+	import RadioGroupItem from '$ui/radio-group/radio-group-item.svelte';
 	import { SchedulingMode } from '@/types';
+	import { cn } from '@/lib/utils';
+	import Label from '$ui/label/label.svelte';
+	import Card from '$ui/card/card.svelte';
+	import CardContent from '$ui/card/card-content.svelte';
+	import CardHeader from '$ui/card/card-header.svelte';
+	import { _ } from 'svelte-i18n';
+	import Button from '$ui/button/button.svelte';
+	import { ArrowRightIcon } from 'lucide-svelte';
 
-	let { data }: { data: { form: SuperValidated<Infer<FormSchema>> } } = $props();
+	let { competitionId }: { competitionId: number } = $props();
 
-	const form = superForm(data.form, {
-		validators: zodClient(formSchema)
-	});
+	let schedulingMode: SchedulingMode = $state(SchedulingMode.single);
 
-	const { form: formData, enhance } = form;
+	async function submit() {
+		const response = await fetch(`/api/competitions/${competitionId}`, {
+			method: 'POST',
+			credentials: 'include',
+			body: JSON.stringify({ scheduling_mode: schedulingMode })
+		});
+	}
 </script>
 
-<form method="post" use:enhance>
-	<FormField {form} name="scheduling_mode">
-		<RadioGroup required bind:value={$formData.scheduling_mode} name="scheduling_mode">
-			{#each Object.values(SchedulingMode) as mode}
-				<div class="flex items-center gap-4">
-					<FormControl>
-						{#snippet children({ props })}
-							<RadioGroupItem value={mode} {...props} />
-							<FormLabel>{mode}</FormLabel>
-						{/snippet}
-					</FormControl>
-				</div>
-			{/each}
-		</RadioGroup>
-
-		<FormDescription />
-		<FormFieldErrors />
-	</FormField>
-</form>
+<div class="flex flex-col gap-4">
+	<RadioGroup
+		required
+		bind:value={() => schedulingMode, (t: SchedulingMode) => {}}
+		name="scheduling_mode"
+	>
+		{#each Object.values(SchedulingMode) as mode}
+			<button
+				class={cn(
+					'flex h-full w-full items-center gap-4 rounded-xl border',
+					schedulingMode === mode && ' border-green-500'
+				)}
+				onclick={() => (schedulingMode = mode)}
+			>
+				<Card class="w-full">
+					<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>