innercontext/frontend/src/routes/routines/new/+page.svelte

62 lines
2 KiB
Svelte

<script lang="ts">
import { enhance } from '$app/forms';
import { resolve } from '$app/paths';
import type { ActionData, PageData } from './$types';
import * as m from '$lib/paraglide/messages.js';
import PageHeader from '$lib/components/PageHeader.svelte';
import { Button } from '$lib/components/ui/button';
import { Input } from '$lib/components/ui/input';
import { Label } from '$lib/components/ui/label';
import FormSectionCard from '$lib/components/forms/FormSectionCard.svelte';
import SimpleSelect from '$lib/components/forms/SimpleSelect.svelte';
let { data, form }: { data: PageData; form: ActionData } = $props();
let partOfDay = $state('am');
const partOfDayOptions = [
{ value: 'am', label: m.common_am() },
{ value: 'pm', label: m.common_pm() }
];
</script>
<svelte:head><title>{m["routines_newTitle"]()} — innercontext</title></svelte:head>
<div class="editorial-page space-y-4">
<PageHeader
title={m["routines_newTitle"]()}
kicker={m["nav_appSubtitle"]()}
backHref={resolve('/routines')}
backLabel={m["routines_backToList"]()}
/>
{#if form?.error}
<div class="editorial-alert editorial-alert--error">{form.error}</div>
{/if}
<FormSectionCard title={m["routines_detailsTitle"]()} className="reveal-2">
<form method="POST" use:enhance class="space-y-5">
<div class="space-y-2">
<Label for="routine_date">{m.routines_date()}</Label>
<Input id="routine_date" name="routine_date" type="date" value={data.today} required />
</div>
<SimpleSelect
id="part_of_day"
name="part_of_day"
label={m["routines_amOrPm"]()}
options={partOfDayOptions}
bind:value={partOfDay}
/>
<div class="space-y-2">
<Label for="notes">{m.routines_notes()}</Label>
<Input id="notes" name="notes" placeholder={m["routines_notesPlaceholder"]()} />
</div>
<div class="flex gap-3 pt-2">
<Button type="submit">{m["routines_createRoutine"]()}</Button>
<Button variant="outline" href={resolve('/routines')}>{m.common_cancel()}</Button>
</div>
</form>
</FormSectionCard>
</div>