Pular para conteúdo

Projeto 09 – Sistema de Preferências do Usuário (Multilíngue) 🌍

Neste projeto, você vai construir um sistema onde o usuário pode escolher o idioma e o tema do site, e essas escolhas serão refletidas em toda a aplicação instantaneamente.

🎯 Objetivo

Implementar a Context API para gerenciar configurações globais, entender o papel do Provider e criar uma aplicação multi-componente sincronizada.

🛠️ Requisitos

  • Criação de um SettingsContext.
  • Gerenciamento global de Idioma (PT/EN) e Tema (Light/Dark).
  • Uso de pelo menos 3 componentes consumidores em níveis diferentes de hierarquia.

📝 Passo a Passo

1. Criando o Contexto

Crie o arquivo src/contexts/SettingsContext.jsx. O estado inicial deve ter: - linguagem: 'pt' - tema: 'light'

2. O Power Provider

Envolva sua aplicação no App.jsx com o SettingsProvider. Certifique-se de passar tanto os valores quanto as funções de alteração (ex: setLinguagem).

3. Componentes Consumidores

  • Header: Mostra o título no idioma selecionado.
  • Conteúdo: Um texto longo que também traduz entre PT e EN.
  • Footer: Contém os botões (Selects ou Toggles) para mudar as configurações globais.

4. Dicionário de Tradução

Crie um objeto simples para as traduções: 

const frases = {
  pt: { saudacao: 'Olá', subtitulo: 'Bem-vindo ao sistema' },
  en: { saudacao: 'Hello', subtitulo: 'Welcome to the system' }
}

✅ Critérios de Entrega

  • Ao mudar o idioma no Footer, o texto do Header deve mudar instantaneamente.
  • A escolha do tema deve afetar as cores de fundo de toda a página.
  • Não deve haver "Prop Drilling" (passagem manual de props entre os componentes intermediários).

Dica: localStorage

Como desafio extra, tente salvar a escolha do usuário no localStorage do navegador para que, ao recarregar a página, as preferências sejam mantidas!