Component: Language Suggestion Banner

Aberta
  • Algo errado?
#90 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
56/100
Tipo de issue
Funcionalidade
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
nextjs, react, tailwindcss, typescript
Domínio
frontend, internationalization

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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.

Linguagem predominante
TypeScript
Estrelas
39
Forks
16
Merge médio
15h 26min
PRs com merge (30d)
42

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de babelize/babelize-elements

Todas as issues de babelize/babelize-elements

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.