69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import { Box } from "@mui/material";
|
|
import { Languages, languageStore } from "../../store/LanguageStore";
|
|
import { observer } from "mobx-react-lite";
|
|
|
|
export const LanguageSwitch = observer(({ action }: any) => {
|
|
const { language, setLanguageAction } = languageStore;
|
|
|
|
const handleLanguageChange = (lang: Languages) => {
|
|
action?.();
|
|
setLanguageAction(lang);
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
flex: 1,
|
|
display: "flex",
|
|
gap: 2,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
cursor: "pointer",
|
|
flex: 1,
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
bgcolor: language === "ru" ? "primary.main" : "transparent",
|
|
color: language === "ru" ? "white" : "inherit",
|
|
borderRadius: 1,
|
|
p: 1,
|
|
}}
|
|
onClick={() => handleLanguageChange("ru")}
|
|
>
|
|
RU
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
cursor: "pointer",
|
|
flex: 1,
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
bgcolor: language === "en" ? "primary.main" : "transparent",
|
|
color: language === "en" ? "white" : "inherit",
|
|
borderRadius: 1,
|
|
p: 1,
|
|
}}
|
|
onClick={() => handleLanguageChange("en")}
|
|
>
|
|
EN
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
cursor: "pointer",
|
|
flex: 1,
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
bgcolor: language === "zh" ? "primary.main" : "transparent",
|
|
color: language === "zh" ? "white" : "inherit",
|
|
borderRadius: 1,
|
|
p: 1,
|
|
}}
|
|
onClick={() => handleLanguageChange("zh")}
|
|
>
|
|
ZH
|
|
</Box>
|
|
</Box>
|
|
);
|
|
});
|