Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added multiple language options and fixed a bug where the Settings mode box was reset to browser language when opened

Browse Source
This commit is contained in:
wsh 2024-08-17 22:57:51 +08:00
parent d2ddb2d261
commit cdb49b25a1
1 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/components/languageSelector/LanguageSelector.tsx
View File

@ -3,38 +3,41 @@ import i18n from '../../i18n';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
import './LanguageSelector.css'; import './LanguageSelector.css';
type Languages = 'en' | 'zh'; type Languages = 'en' | 'zh' | 'ja' | 'ko' | 'de' | 'ru' | 'fr';
const LanguageSelector: React.FC = () => { 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<Languages>(i18n.language as Languages); const [selectedLang, setSelectedLang] = useState<Languages>(i18n.language as Languages);
useEffect(() => { useEffect(() => {
const defaultLang = getBrowserLanguage(); const handleLanguageChanged = (lang: string) => {
if (defaultLang !== i18n.language) { setSelectedLang(lang as Languages);
i18n.changeLanguage(defaultLang); };
setSelectedLang(defaultLang);
} i18n.on('languageChanged', handleLanguageChanged);
return () => {
i18n.off('languageChanged', handleLanguageChanged);
};
}, []); }, []);
const handleLanguageChange = (value: string) => { const handleLanguageChange = (value: string) => {
const nextLang = value as Languages; const nextLang = value as Languages;
i18n.changeLanguage(nextLang); i18n.changeLanguage(nextLang);
setSelectedLang(nextLang);
}; };
return ( return (
<Select onValueChange={handleLanguageChange} value={selectedLang}> <Select onValueChange={handleLanguageChange} value={selectedLang}>
<SelectTrigger className="w-[100px]"> <SelectTrigger className="w-[120px]">
<SelectValue placeholder="Language" /> <SelectValue placeholder="Language" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="en">English</SelectItem> <SelectItem value="en">English</SelectItem>
<SelectItem value="zh">中文</SelectItem> <SelectItem value="zh">简体中文</SelectItem>
<SelectItem value="ja">日本語</SelectItem>
<SelectItem value="ko">한국어</SelectItem>
<SelectItem value="de">Deutsch</SelectItem>
<SelectItem value="ru">Русский</SelectItem>
<SelectItem value="fr">Français</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
); );