AddFormPanel
@/components/ui/AddFormPanel
Den kanoniske «legg til»-seksjonen: seksjonshode, add-trigger, liste og tomtilstand i én tilstandsmaskin som hindrer dobbel-trigger.
Når brukes den
Bruk for enhver «legg til X»-seksjon med en liste av rader og en tomtilstand.
Skjemaet åpner alltid i en Modal over innholdet, aldri inline i lista — accordion er for å lese, modal er for å gjøre.
Sett formTitle når addLabel er et bart «Legg til» (som ikke sier hva man legger til alene som dialogtittel), eller når samme skjema også brukes til redigering.
Ikke bruk til en ren datavisning uten en «legg til»-handling — da holder ListRow eller Table alene.
Eksempler
Med elementer
Lista har innhold: hoderadens «Ny kontroll»-knapp er den ene add-triggeren, og skjemaet ligger i en Modal over lista.
HMS-kontroller
Kontrollpunkter for bygget.
<AddFormPanel
title="HMS-kontroller"
addLabel="Ny kontroll"
itemCount={rader.length}
onSubmit={lagreKontroll}
empty={{ icon: Hms, title: 'Ingen kontroller ennå', description: '…' }}
form={<Input id="navn" label="Kontrollpunkt" />}
>
{rader.map(r => <ListRow key={r.id} title={r.navn} />)}
</AddFormPanel>Tom liste
Uten elementer eier EmptyState sin egen CTA add-triggeren i stedet for hoderaden — aldri begge synlige samtidig.
Serviceavtaler
Ingen avtaler ennå
Legg til den første serviceavtalen for bygget.
Props
Sveip tabellen for å se hele innholdet