108 lines
4.3 KiB
TypeScript
108 lines
4.3 KiB
TypeScript
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { ProfileSchema, type Profile } from '../../../content/schemas/profile';
|
|
import { FormShell } from '../FormShell';
|
|
import { Section } from '../Section';
|
|
import { TextField } from '../fields/TextField';
|
|
import { TextAreaField } from '../fields/TextAreaField';
|
|
import { SelectField } from '../fields/SelectField';
|
|
import { ToggleField } from '../fields/ToggleField';
|
|
import { ChipsField } from '../fields/ChipsField';
|
|
import { ImageUploadField } from '../fields/ImageUploadField';
|
|
import { FileUploadField } from '../fields/FileUploadField';
|
|
import { ArrayEditor } from '../fields/ArrayEditor';
|
|
|
|
type Props = { defaultValues: Profile };
|
|
|
|
export function ProfileForm({ defaultValues }: Props) {
|
|
return (
|
|
<FormShell<Profile>
|
|
section="profile"
|
|
defaultValues={defaultValues as never}
|
|
resolver={zodResolver(ProfileSchema) as never}
|
|
>
|
|
<Section title="Identité" subtitle="// owner">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<TextField name="name" label="Nom" />
|
|
<TextField name="title" label="Titre" />
|
|
</div>
|
|
<TextField name="tagline" label="Tagline" hint="Phrase courte affichée sous le nom" />
|
|
<TextAreaField name="bio" label="Bio" rows={5} />
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 items-end">
|
|
<ToggleField name="available" label="Disponible" hint="Affiche le badge ON AIR" />
|
|
<TextField name="availableLabel" label="Texte du badge" hint="ex : Disponible — Nantes" />
|
|
</div>
|
|
</Section>
|
|
|
|
<Section title="Hero" subtitle="// stage">
|
|
<ImageUploadField name="hero.photo" label="Photo principale" folder="pp" />
|
|
<ChipsField
|
|
name="hero.roles"
|
|
label="Rôles affichés"
|
|
hint="Mots-clés morphés dans le hero (ex : dev, DJ, dev)"
|
|
/>
|
|
<ArrayEditor
|
|
name="hero.photos"
|
|
label="Galerie hero"
|
|
hint="Photos additionnelles (slideshow / mosaïque)"
|
|
newItem={() => ''}
|
|
itemLabel={(i) => `photo #${String(i + 1).padStart(2, '0')}`}
|
|
>
|
|
{({ namePrefix }) => (
|
|
<ImageUploadField name={namePrefix} label="URL" folder="pp" />
|
|
)}
|
|
</ArrayEditor>
|
|
<ArrayEditor
|
|
name="hero.cta"
|
|
label="Boutons CTA"
|
|
hint="Actions principales sous le hero"
|
|
newItem={() => ({ label: '', href: '', variant: 'primary' as const, external: false })}
|
|
itemLabel={(i) => `cta #${String(i + 1).padStart(2, '0')}`}
|
|
>
|
|
{({ namePrefix }) => (
|
|
<>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<TextField name={`${namePrefix}.label`} label="Label" />
|
|
<TextField name={`${namePrefix}.href`} label="Lien" placeholder="/projets ou https://…" />
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 items-end">
|
|
<SelectField
|
|
name={`${namePrefix}.variant`}
|
|
label="Style"
|
|
options={[
|
|
{ value: 'primary', label: 'Primary (acid)' },
|
|
{ value: 'ghost', label: 'Ghost (cyan)' },
|
|
]}
|
|
/>
|
|
<ToggleField
|
|
name={`${namePrefix}.external`}
|
|
label="Externe (target=_blank)"
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</ArrayEditor>
|
|
</Section>
|
|
|
|
<Section title="Réseaux" subtitle="// patch bay">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<TextField name="socials.email" label="Email" type="email" placeholder="hello@example.com" />
|
|
<TextField name="socials.github" label="GitHub" type="url" placeholder="https://github.com/…" />
|
|
<TextField name="socials.gitea" label="Gitea" type="url" />
|
|
<TextField name="socials.linkedin" label="LinkedIn" type="url" />
|
|
<TextField name="socials.website" label="Site personnel" type="url" />
|
|
</div>
|
|
</Section>
|
|
|
|
<Section title="CV" subtitle="// dossier">
|
|
<FileUploadField
|
|
name="cv"
|
|
label="Fichier PDF du CV"
|
|
folder="cv"
|
|
kind="document"
|
|
hint="Glisser-déposer un PDF (max 8 Mo)"
|
|
/>
|
|
</Section>
|
|
</FormShell>
|
|
);
|
|
}
|