@col/language-selector

Versie: 1.1.0 Toegevoegd: 2026-08-03

Herkomst

Geëxtraheerd uit supplier-onboarding-vercel/src/components/ui/language-selector.tsx, de taalkiezer in de bovenbalk: een knop met een globe-icoon en de huidige taalcode, die een dropdown met de beschikbare talen opent.

Waarvoor

Een compacte taalkiezer voor de bovenbalk van een ingelogde app: een Button met een globe-icoon en de huidige taalcode in hoofdletters (NL, EN, …), die bij een klik een dropdown met alle taalopties toont. De actieve taal krijgt een lichte achtergrond.

Gebruik het niet als losstaande taalkiezer op een publieke pagina zonder bovenbalk — daarvoor is een simpelere inline keuze vaak duidelijker dan een dropdown-icoonknop.

Wat je app moet leveren

Prop	Type	Betekenis
`current`	`string`	Code van de huidige taal, bijvoorbeeld `'nl'`. Verplicht.
`languages`	`LanguageOption[]`	De beschikbare talen. Verplicht.
`onChange`	`(value: string) => void`	Aangeroepen met de gekozen code. Verplicht.
`align`	`'start' \| 'end'?`	Uitlijning van het menu. Default `'end'`.

LanguageOption:

Veld	Type	Betekenis
`value`	`string`	Code zoals `'nl'` of `'en'`.
`label`	`string`	Volledige naam in de eigen taal, bijvoorbeeld `'Nederlands'`.

Voorbeeld:

<LanguageSelector
  current={language}
  languages={[
    { value: 'nl', label: 'Nederlands' },
    { value: 'en', label: 'English' },
  ]}
  onChange={(value) => {
    setLanguage(value)
    fetch('/api/user/language', { method: 'POST', body: JSON.stringify({ language: value }) })
  }}
/>

Bestanden

Bestand	Landt in	Soort
`language-selector.tsx`	`components/nav/`	beheerd

Upstream shadcn-afhankelijkheden: button, dropdown-menu. Geen cssVars.

Gebruikt door

App	Sinds versie	Opmerkingen
—	—	Nog geen consumers. `supplier-onboarding-vercel` is de bron van dit patroon en draait nog op zijn eigen kopie in `src/components/ui/language-selector.tsx`; die kan hierop over wanneer het uitkomt.

Bewuste keuzes

De trigger is met cn(buttonVariants({ … }), …) gestyled, geen <Button asChild> erin (v1.1.0). asChild bestaat niet in Base UI, en twee van de vijf consumers draaien daarop. Zie regel 5 in AGENTS.md.
Puur presentatie: het onthoudt en slaat niets zelf op. De bron (useLanguage() voor de state, plus een fetch naar /api/user/language om de taal voor ingelogde gebruikers te persisteren, en useSession() om te bepalen of die fetch nodig was) is er bewust volledig uit gehaald. Dit item krijgt de huidige taal via current en geeft een keuze terug via onChange; wat de app daarmee doet — state zetten, naar een eigen endpoint sturen, wel of niet afhankelijk van een sessie — is aan de app. Zo werkt het los van NextAuth en van een specifiek i18n-systeem.
bg-accent voor de actieve taal in plaats van het hardgecodeerde bg-blue-50 uit de bron. accent hoort bij elke shadcn-installatie en respecteert dark mode.
Vaste talenlijst als prop, geen hardgecodeerde talen. De bron had de vier talen (nl/en/es/it) met hun labels hardgecodeerd in vier bijna identieke DropdownMenuItem-blokken. Dit item leest ze uit languages, dus een app met twee of zes talen werkt zonder het component aan te passen.

Bekende beperkingen

Geen zoekfunctie in de lijst — geschikt voor een handvol talen, niet voor een lange lijst landcodes.
Geen vlaggetjes of andere iconen per taal, alleen de code op de trigger en het volledige label in het menu.