diff --git a/frontend/src/components/languageSelector/LanguageSelector.tsx b/frontend/src/components/languageSelector/LanguageSelector.tsx index 0655026..d1c8c6d 100644 --- a/frontend/src/components/languageSelector/LanguageSelector.tsx +++ b/frontend/src/components/languageSelector/LanguageSelector.tsx @@ -3,38 +3,41 @@ import i18n from '../../i18n'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"; import './LanguageSelector.css'; -type Languages = 'en' | 'zh'; +type Languages = 'en' | 'zh' | 'ja' | 'ko' | 'de' | 'ru' | 'fr'; const LanguageSelector: React.FC = () => { - const getBrowserLanguage = () => { - const browserLang = navigator.language.split('-')[0]; - return (['en', 'zh'].includes(browserLang) ? browserLang : 'en') as Languages; - }; - const [selectedLang, setSelectedLang] = useState(i18n.language as Languages); useEffect(() => { - const defaultLang = getBrowserLanguage(); - if (defaultLang !== i18n.language) { - i18n.changeLanguage(defaultLang); - setSelectedLang(defaultLang); - } + const handleLanguageChanged = (lang: string) => { + setSelectedLang(lang as Languages); + }; + + i18n.on('languageChanged', handleLanguageChanged); + + return () => { + i18n.off('languageChanged', handleLanguageChanged); + }; }, []); const handleLanguageChange = (value: string) => { const nextLang = value as Languages; i18n.changeLanguage(nextLang); - setSelectedLang(nextLang); }; return ( );