43 lines
1.2 KiB
Svelte
43 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import type { PageData } from './$types';
|
|
|
|
import { zodClient } from 'sveltekit-superforms/adapters';
|
|
import { superForm } from 'sveltekit-superforms/client';
|
|
|
|
import * as Form from '$lib/components/ui/form';
|
|
import Input from '$lib/components/ui/input/input.svelte';
|
|
|
|
import { groupSchema } from '$lib/validations/group';
|
|
import Loader from 'lucide-svelte/icons/loader-circle';
|
|
|
|
export let data: PageData;
|
|
|
|
const form = superForm(data.form, {
|
|
validators: zodClient(groupSchema),
|
|
delayMs: 500,
|
|
multipleSubmits: 'prevent'
|
|
});
|
|
|
|
const { form: formData, enhance, delayed } = form;
|
|
</script>
|
|
|
|
<section>
|
|
<div class="flex flex-col gap-4">
|
|
<h2 class="text-xl font-bold">Nouveau groupe</h2>
|
|
<form class="flex flex-col justify-center gap-2" method="POST" use:enhance>
|
|
<Form.Field {form} name="name">
|
|
<Form.Control let:attrs>
|
|
<Form.Label>Nom du groupe</Form.Label>
|
|
<Input {...attrs} bind:value={$formData.name} placeholder="Peerat sailors" />
|
|
</Form.Control>
|
|
<Form.FieldErrors />
|
|
</Form.Field>
|
|
<Form.Button type="submit" disabled={$delayed}>
|
|
{#if $delayed}
|
|
<Loader class="mr-2 h-4 w-4 animate-spin" />
|
|
{/if}
|
|
Créer
|
|
</Form.Button>
|
|
</form>
|
|
</div>
|
|
</section>
|