Component: Language Suggestion Banner

Ouverte
  • Quelque chose ne va pas ?
#90 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
56/100
Type d'issue
Fonctionnalité
Clarté
Clairement spécifiée
Activité
Active
Stack technique
nextjs, react, tailwindcss, typescript
Domaine
frontend, internationalization

Piste de recherche

Read CONTRIBUTING.md and the Contributor Rulebook first, then inspect existing components in src/registry/components/, their exports in src/registry/components/index.ts, registry entries in src/registry/registry.ts, and related tests and docs. Implement the listed banner API and behaviors, following the project conventions. Add the requested tests in test/ and documentation under content/docs/components/language-switchers/; done means the component is registered, documented, and the listed matching, rendering, and dismissal cases are covered.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

component good first issue language-switcher

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.

Langage dominant
TypeScript
Étoiles
39
Forks
16
Merge moyen
15 h 26 min
PR mergées (30 j)
42

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de babelize/babelize-elements

Toutes les issues de babelize/babelize-elements

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.