@col/auth-split

Versie: 1.0.0 Toegevoegd: 2026-08-03

Herkomst

Geëxtraheerd uit growerportal2/src/app/login/login-content.tsx. Die app koos een ander inlogscherm dan de onboarding-portal: geen foto áchter een kaart, maar een tweekolommen-indeling met het formulier links en de foto rechts.

Beide zijn goed, en het was zonde om er één van te laten liggen. Sindsdien heeft dit design system twee inlogschermen waaruit je kiest.

Waarvoor

De ene helft van het scherm is het formulier, de andere een foto. Kies dit wanneer het formulier rustig en goed leesbaar moet zijn: de tekst staat op de gewone achtergrond, niet op een afbeelding.

Kies @col/auth-shell wanneer het beeld de sfeer moet zetten — daar ligt de foto over het volle scherm met een donkere laag ertussen, en staat de inhoud in een kaart daarbovenop.

	`AuthSplit`	`AuthShell`
Foto	naast de inhoud	achter de inhoud
Inhoud	kaal op de achtergrond	in een kaart
Leesbaarheid	hoog, geen beeld onder de tekst	vraagt een donkere laag
Sfeer	ingetogen	het beeld draagt
Op mobiel	foto verdwijnt	foto blijft, vult het scherm

Gebruik het niet voor korte tussenschermen zoals "e-mail verstuurd". Een halve foto naast drie regels tekst voelt leeg; AuthShell met een kaart past daar beter.

Wat je app moet leveren

Prop	Type	Betekenis
`backgroundImage`	`string`	Pad of URL van de foto. Verplicht.
`imageSide`	`'left' \| 'right'?`	Aan welke kant de foto staat. Default `'right'`.
`maxWidth`	`string?`	Tailwind max-width van de formulierkolom. Default `'max-w-sm'`.
`notice`	`ReactNode?`	Tekst in een balk bovenaan, bijvoorbeeld "Testomgeving". Zonder deze prop is er geen balk.
`className`	`string?`	Extra classes op de buitenste container.
`children`	`ReactNode?`	De inhoud van de formulierkolom: logo, koppen, velden, knoppen.

Het component levert de indeling, niet de inhoud. Het logo, de taalkiezer, de koppen en de velden zet je zelf in children — zo houd je de vrijheid om per app een andere volgorde of andere velden te kiezen.

Voorbeeld:

<AuthSplit backgroundImage="/brand/backgrounds/default.jpg" notice={isTest ? 'Testomgeving' : undefined}>
  <div className="mb-10 flex items-center justify-between">
    <BrandLogo src={logo} alt="Logo" variant="plain" size="h-9" />
    <LanguageSwitcher />
  </div>
  <h1 className="text-2xl font-semibold tracking-tight">Welkom terug</h1>
  <p className="mt-2 text-sm text-muted-foreground">Log in om verder te gaan</p>
  <form className="mt-8 space-y-5">…</form>
</AuthSplit>

Bestanden

Bestand	Landt in	Soort
`auth-split.tsx`	`components/auth/`	beheerd

Geen upstream shadcn-afhankelijkheden, geen cssVars.

Gebruikt door

App	Sinds versie	Opmerkingen
—	—	Nog geen consumers. `growerportal2` is de bron van dit patroon en draait nog op zijn eigen kopie; die kan hierop over wanneer het uitkomt.

Bewuste keuzes

De foto verdwijnt onder lg. Een halve foto naast een smal formulier werkt niet op een telefoon, dus daar krijgt het formulier de volle breedte. Dit is niet instelbaar: een variant waarin de foto op mobiel blijft, is nog nooit gevraagd.
De balk gebruikt bg-destructive, niet eigen tokens. De bron had bg-red-600 hardgecodeerd. destructive hoort bij elke shadcn-installatie, dus dit item heeft geen cssVars nodig en werkt los van @col/brand-tokens.
Een zachte verloopstrook over de foto, weg van de formulierkolom. Zonder dat leest de naad tussen de twee kolommen als een harde rand.
De kolommen worden als array gerenderd in plaats van met twee takken vol gedupliceerde JSX. imageSide wisselt de volgorde, meer niet.
Geen next/image. Dat zou het component aan Next.js binden en configuratie vragen voor externe afbeeldingen. Consistent met AuthShell, dat de foto ook via CSS zet.

Bekende beperkingen

Geen ingebouwde optimalisatie van de achtergrondfoto. Bij een grote JPEG is dat merkbaar; comprimeer hem vooraf.
De verhouding tussen de kolommen ligt vast op 50/50 (lg:grid-cols-2). Een smallere formulierkolom regel je met maxWidth, niet met de verdeling zelf.