68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { IconButton, Menu, MenuItem, Box } from "@mui/material";
|
|
import { KeyboardArrowDown as KeyboardArrowDownIcon } from "@mui/icons-material";
|
|
import {
|
|
usePopupState,
|
|
bindTrigger,
|
|
bindMenu,
|
|
} from "material-ui-popup-state/hooks";
|
|
import { useLeafcutterContext } from "leafcutter-ui/components/LeafcutterProvider";
|
|
// import { Tooltip } from "./Tooltip";
|
|
|
|
export const LanguageSelect = () => {
|
|
const {
|
|
colors: { white, leafcutterElectricBlue },
|
|
} = useLeafcutterContext();
|
|
const router = useRouter();
|
|
const locales: any = { en: "English", fr: "Français" };
|
|
const locale = "en";
|
|
const popupState = usePopupState({ variant: "popover", popupId: "language" });
|
|
|
|
return (
|
|
<Box>
|
|
<IconButton
|
|
{...bindTrigger(popupState)}
|
|
sx={{
|
|
fontSize: 14,
|
|
borderRadius: 500,
|
|
color: white,
|
|
backgroundColor: leafcutterElectricBlue,
|
|
fontWeight: "bold",
|
|
textTransform: "uppercase",
|
|
pl: 4,
|
|
pr: 3,
|
|
":hover": {
|
|
backgroundColor: leafcutterElectricBlue,
|
|
opacity: 0.8,
|
|
},
|
|
}}
|
|
>
|
|
{locales[locale as any] ?? locales.en}
|
|
<KeyboardArrowDownIcon />
|
|
</IconButton>
|
|
<Menu {...bindMenu(popupState)}>
|
|
{Object.keys(locales).map((locale) => (
|
|
<MenuItem
|
|
key={locale}
|
|
onClick={() => {
|
|
// router.push(router.route, router.route, { locale });
|
|
popupState.close();
|
|
}}
|
|
>
|
|
<Box sx={{ width: 130 }}>{locales[locale]}</Box>
|
|
</MenuItem>
|
|
))}
|
|
</Menu>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
/* <Tooltip
|
|
title={t("languageTooltipTitle")}
|
|
description={t("languageTooltipDescription")}
|
|
color="#fff"
|
|
backgroundColor="#a5a6f6"
|
|
placement="top"
|
|
> </Tooltip> */
|