f719d181c0
Implemented comprehensive internationalization (i18n) for both frontend and backend: Frontend: - Added react-i18next configuration with Spanish (default) and English - Created translation files (locales/es.json, locales/en.json) - Refactored core components to use i18n: LoginPage, DashboardHeader, DataUploader - Created LanguageSelector component with toggle between ES/EN - Updated API client to send Accept-Language header Backend: - Created i18n module with translation dictionary for error messages - Updated security.py to return localized authentication errors - Updated api/analysis.py to return localized validation errors - Implemented language detection from Accept-Language header Spanish remains the default language ensuring backward compatibility. Users can switch between languages using the language selector in the dashboard header. https://claude.ai/code/session_1N9VX
30 lines
921 B
TypeScript
30 lines
921 B
TypeScript
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Languages } from 'lucide-react';
|
|
|
|
export function LanguageSelector() {
|
|
const { i18n } = useTranslation();
|
|
|
|
const toggleLanguage = () => {
|
|
const newLang = i18n.language === 'es' ? 'en' : 'es';
|
|
i18n.changeLanguage(newLang);
|
|
localStorage.setItem('language', newLang);
|
|
};
|
|
|
|
const currentLang = i18n.language === 'es' ? 'ES' : 'EN';
|
|
const nextLang = i18n.language === 'es' ? 'EN' : 'ES';
|
|
|
|
return (
|
|
<button
|
|
onClick={toggleLanguage}
|
|
className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-slate-100 text-slate-700 rounded-full text-xs font-medium hover:bg-slate-200 transition-colors cursor-pointer"
|
|
title={`Switch to ${nextLang}`}
|
|
>
|
|
<Languages className="w-3.5 h-3.5" />
|
|
<span className="font-semibold">{currentLang}</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export default LanguageSelector;
|