Component: Language Suggestion Banner #90

Component: Language Suggestion Banner

A slim banner that notices the visitor's browser prefers another language the site supports, and offers to switch: "This page is also available in Deutsch. Switch?"

Requirements

• TypeScript-first with exported props interface
• Reads navigator.languages on the client and picks the first one that matches locales (match the primary subtag too, so de-AT → de)
• Renders nothing when the best match is already the current locale, or when nothing matches
• Two actions: switch (calls onSwitch(code)) and dismiss
• Remembers a dismissal in localStorage under a configurable storageKey, so it doesn't come back on every page
• Banner text is passed in as props (no hardcoded English), with the suggested language's name shown in that language via Intl.DisplayNames
• No hydration mismatch: render null until mounted
• Accessible: role="region" with a label, buttons reachable by keyboard
• Tailwind CSS compatible, follows the shadcn theme tokens

Expected API

<LanguageSuggestionBanner
  locales={[{ code: "en" }, { code: "de" }, { code: "it" }]}
  currentLocale="en"
  onSwitch={(code) => router.push(`/${code}`)}
  labels={{
    message: (language) => `This page is also available in ${language}.`,
    switch: "Switch",
    dismiss: "Dismiss",
  }}
/>

Deliverables

• Component source in src/registry/components/
• Export in src/registry/components/index.ts and entry in src/registry/registry.ts
• Tests in test/ covering: exact match, subtag match (de-AT), no match, already-current locale, dismissal persisted
• Documentation page in content/docs/components/language-switchers/

See CONTRIBUTING.md and the Contributor Rulebook.