52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { InterestsSchema, type Interests } from '../../../content/schemas/interests';
|
|
import { FormShell } from '../FormShell';
|
|
import { Section } from '../Section';
|
|
import { TextField } from '../fields/TextField';
|
|
import { SelectField } from '../fields/SelectField';
|
|
import { EmojiField } from '../fields/EmojiField';
|
|
import { ArrayEditor } from '../fields/ArrayEditor';
|
|
|
|
type Props = { defaultValues: Interests };
|
|
|
|
const COLOR_OPTIONS = [
|
|
{ value: 'cyan', label: '◉ cyan' },
|
|
{ value: 'magenta', label: '◉ magenta' },
|
|
{ value: 'violet', label: '◉ violet' },
|
|
{ value: 'ice', label: '◉ ice' },
|
|
];
|
|
|
|
export function InterestsForm({ defaultValues }: Props) {
|
|
return (
|
|
<FormShell<Interests>
|
|
section="interests"
|
|
defaultValues={defaultValues as never}
|
|
resolver={zodResolver(InterestsSchema) as never}
|
|
>
|
|
<Section title="Centres d'intérêt" subtitle="// off decks">
|
|
<ArrayEditor
|
|
name="items"
|
|
label="Items"
|
|
newItem={() =>
|
|
({ id: '', label: '', icon: '🎧', color: 'cyan' as const }) as never
|
|
}
|
|
itemLabel={(i) => `pad #${String(i + 1).padStart(2, '0')}`}
|
|
>
|
|
{({ namePrefix }) => (
|
|
<>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<TextField name={`${namePrefix}.id`} label="ID" hint="Slug unique" />
|
|
<TextField name={`${namePrefix}.label`} label="Label" />
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<EmojiField name={`${namePrefix}.icon`} label="Icône" />
|
|
<SelectField name={`${namePrefix}.color`} label="Couleur" options={COLOR_OPTIONS} />
|
|
</div>
|
|
</>
|
|
)}
|
|
</ArrayEditor>
|
|
</Section>
|
|
</FormShell>
|
|
);
|
|
}
|