101 lines
2.3 KiB
TypeScript
101 lines
2.3 KiB
TypeScript
import Stack from "@mui/material/Stack";
|
|
import Box from "@mui/material/Box";
|
|
import MenuItem from "@mui/material/MenuItem";
|
|
import { Select } from "@/Components/inputs";
|
|
import "flag-icons/css/flag-icons.min.css";
|
|
|
|
import { useTranslation } from "react-i18next";
|
|
import { useTheme } from "@mui/material";
|
|
import { useSelector } from "react-redux";
|
|
import { useDispatch } from "react-redux";
|
|
import { setLanguage } from "@/Features/UI/uiSlice";
|
|
import type { RootState } from "@/Types/state";
|
|
|
|
const langMap: Record<string, string> = {
|
|
cs: "cz",
|
|
ja: "jp",
|
|
uk: "ua",
|
|
vi: "vn",
|
|
};
|
|
|
|
export const LanguageSelector = () => {
|
|
const { i18n } = useTranslation();
|
|
const theme = useTheme();
|
|
const { language = "en" } = useSelector((state: RootState) => state.ui);
|
|
const dispatch = useDispatch();
|
|
const handleChange = (event: any) => {
|
|
const newLang = event.target.value;
|
|
dispatch(setLanguage(newLang));
|
|
};
|
|
|
|
const languages = Object.keys(i18n.options.resources || {});
|
|
|
|
return (
|
|
<Select
|
|
value={language}
|
|
onChange={handleChange}
|
|
size="small"
|
|
// sx={{
|
|
// minWidth: 80,
|
|
// "& .MuiSelect-select": {
|
|
// display: "flex",
|
|
// alignItems: "center",
|
|
// justifyContent: "center",
|
|
// },
|
|
// "& .MuiSelect-icon": {
|
|
// alignSelf: "center",
|
|
// },
|
|
// }}
|
|
>
|
|
{languages.map((lang) => {
|
|
let parsedLang = lang === "en" ? "gb" : lang;
|
|
|
|
if (parsedLang.includes("-")) {
|
|
parsedLang = parsedLang.split("-")[1].toLowerCase();
|
|
}
|
|
|
|
parsedLang = langMap[parsedLang] || parsedLang;
|
|
|
|
const flag = parsedLang ? `fi fi-${parsedLang}` : null;
|
|
|
|
return (
|
|
<MenuItem
|
|
key={lang}
|
|
value={lang}
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Stack
|
|
direction="row"
|
|
spacing={theme.spacing(2)}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
<Box
|
|
component="span"
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
{flag && <span className={flag} />}
|
|
</Box>
|
|
<Box
|
|
component="span"
|
|
sx={{ textTransform: "uppercase" }}
|
|
>
|
|
{lang}
|
|
</Box>
|
|
</Stack>
|
|
</MenuItem>
|
|
);
|
|
})}
|
|
</Select>
|
|
);
|
|
};
|
|
|
|
export default LanguageSelector;
|