prod setup

src/components/admin/forms/InterestsForm.tsx

@@ -0,0 +1,51 @@
+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>
+  );
+}