47 lines
1.1 KiB
React
47 lines
1.1 KiB
React
import React, { useContext } from "react";
|
|
import { AppContext } from "App";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import { IconButton, Tooltip } from "@mui/material";
|
|
import Zoom from "@mui/material/Zoom";
|
|
|
|
// import { FormattedMessage } from "react-intl";
|
|
import LanguageOutlinedIcon from "@mui/icons-material/LanguageOutlined";
|
|
|
|
const LanguageSwitcher = () => {
|
|
const theme = useTheme();
|
|
const appContext = useContext(AppContext);
|
|
const currentLocale = appContext && appContext.locale === "en" ? "NL" : "EN";
|
|
|
|
return (
|
|
<Tooltip
|
|
title={currentLocale}
|
|
disableInteractive
|
|
slots={{
|
|
transition: Zoom,
|
|
}}>
|
|
<span>
|
|
<IconButton
|
|
aria-label="Language Switcher"
|
|
onClick={() => {
|
|
const setLocale = appContext && appContext.setLocale;
|
|
if (typeof setLocale === "function") {
|
|
setLocale(appContext.locale === "en" ? "nl" : "en");
|
|
}
|
|
}}
|
|
size="large"
|
|
sx={{
|
|
alignSelf: "right",
|
|
mr: 1,
|
|
ml: 1,
|
|
color: theme.palette.text.secondary,
|
|
fontSize: "24px",
|
|
}}>
|
|
{<LanguageOutlinedIcon />}
|
|
</IconButton>
|
|
</span>
|
|
</Tooltip>
|
|
);
|
|
};
|
|
|
|
export default LanguageSwitcher;
|