mirror of
https://github.com/Crosstalk-Solutions/project-nomad.git
synced 2026-04-05 00:06:17 +02:00
a8f6fe353b
- Add i18next, react-i18next, and i18next-browser-languagedetector - Create i18n configuration with language detection - Add English (en) and Chinese (zh) translation files - Create LanguageSwitcher component for runtime language switching - Integrate i18n initialization in app.tsx Translation keys organized by section: - common: Common UI elements - home: Dashboard/home page - menu: Navigation menu items - maps: Maps feature - chat: AI chat feature - settings: Settings pages - system: System settings - apps: App management - models: AI models - easySetup: Setup wizard - docs: Documentation - about: About page - errors: Error pages Co-Authored-By: Claude <noreply@anthropic.com>
32 lines
903 B
TypeScript
32 lines
903 B
TypeScript
import { useTranslation } from 'react-i18next'
|
|
|
|
const languages = [
|
|
{ code: 'en', name: 'English', flag: '🇺🇸' },
|
|
{ code: 'zh', name: '中文', flag: '🇨🇳' },
|
|
]
|
|
|
|
export default function LanguageSwitcher() {
|
|
const { i18n } = useTranslation()
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm text-gray-500">Language:</span>
|
|
<div className="flex gap-1">
|
|
{languages.map((lang) => (
|
|
<button
|
|
key={lang.code}
|
|
onClick={() => i18n.changeLanguage(lang.code)}
|
|
className={`px-3 py-1 rounded text-sm transition-colors ${
|
|
i18n.language === lang.code
|
|
? 'bg-desert-green text-white'
|
|
: 'bg-gray-200 hover:bg-gray-300 text-gray-700'
|
|
}`}
|
|
>
|
|
{lang.flag} {lang.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|