Component: Language Suggestion Banner

Abierto
  • ¿Algo no está bien?
#90 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
56/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
nextjs, react, tailwindcss, typescript
Área
frontend, internationalization

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
39
Forks
16
Merge medio
18 h 14 min
PR fusionados (30 d)
35

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de babelize/babelize-elements

Todos los issues de babelize/babelize-elements

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.