mirror of
https://github.com/bartvdbraak/omnidash.git
synced 2025-07-16 13:09:13 +00:00
80 lines
2.1 KiB
Svelte
80 lines
2.1 KiB
Svelte
<script lang="ts" context="module">
|
|
import { z } from 'zod';
|
|
|
|
const languages = {
|
|
en: 'English',
|
|
fr: 'French',
|
|
de: 'German',
|
|
es: 'Spanish',
|
|
pt: 'Portuguese',
|
|
ru: 'Russian',
|
|
ja: 'Japanese',
|
|
ko: 'Korean',
|
|
zh: 'Chinese'
|
|
} as const;
|
|
|
|
type Language = keyof typeof languages;
|
|
|
|
export const accountFormSchema = z.object({
|
|
name: z
|
|
.string({
|
|
required_error: 'Required.'
|
|
})
|
|
.min(2, 'Name must be at least 2 characters.')
|
|
.max(30, 'Name must not be longer than 30 characters'),
|
|
// Hack: https://github.com/colinhacks/zod/issues/2280
|
|
language: z.enum(Object.keys(languages) as [Language, ...Language[]])
|
|
});
|
|
|
|
export type AccountFormSchema = typeof accountFormSchema;
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import * as Form from '$lib/components/ui/form';
|
|
import type { SuperValidated } from 'sveltekit-superforms';
|
|
import { cn } from '$lib/utils';
|
|
|
|
export let data: SuperValidated<AccountFormSchema>;
|
|
</script>
|
|
|
|
<Form.Root
|
|
method="POST"
|
|
class="space-y-8"
|
|
let:config
|
|
schema={accountFormSchema}
|
|
form={data}
|
|
debug={true}
|
|
>
|
|
<Form.Item>
|
|
<Form.Field name="name" {config}>
|
|
<Form.Label>Name</Form.Label>
|
|
<Form.Input placeholder="Your name" />
|
|
<Form.Description>
|
|
This is the name that will be displayed on your profile and in emails.
|
|
</Form.Description>
|
|
<Form.Validation />
|
|
</Form.Field>
|
|
</Form.Item>
|
|
<Form.Item>
|
|
<Form.Field {config} name="language" let:attrs>
|
|
{@const { value } = attrs.input}
|
|
<Form.Label>Language</Form.Label>
|
|
<Form.Select selected={{ value, label: languages[value] }}>
|
|
<Form.SelectTrigger
|
|
placeholder="Select language"
|
|
class={cn('w-[200px] justify-between', !attrs.input.value && 'text-muted-foreground')}
|
|
/>
|
|
<Form.SelectContent class="h-52 overflow-y-auto">
|
|
{#each Object.entries(languages) as [value, lang]}
|
|
<Form.SelectItem {value}>
|
|
{lang}
|
|
</Form.SelectItem>
|
|
{/each}
|
|
</Form.SelectContent>
|
|
</Form.Select>
|
|
<Form.Description>This is the language that will be used in the dashboard.</Form.Description>
|
|
<Form.Validation />
|
|
</Form.Field>
|
|
</Form.Item>
|
|
<Form.Button>Update account</Form.Button>
|
|
</Form.Root>
|