121 lines
3.4 KiB
TypeScript
121 lines
3.4 KiB
TypeScript
import React, { useState, useContext } from 'react';
|
|
// @mui
|
|
import { ButtonBase, Box, Typography, MenuItem, Stack } from '@mui/material';
|
|
// components
|
|
import Image from '@/components/Image';
|
|
import MenuPopover from '@/components/MenuPopover';
|
|
import { IconButtonAnimate } from '@/components/animate';
|
|
import { LanguageContext } from '@/contexts/LanguageContext';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
const LANGS = [
|
|
{
|
|
label: 'Bahasa Indonesia',
|
|
value: 'id-ID',
|
|
icon: '/logo/logo_single.svg',
|
|
},
|
|
{
|
|
label: 'English',
|
|
value: 'en-US',
|
|
icon: '/icons/ic_flag_en.svg',
|
|
},
|
|
];
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export default function LanguagePopover() {
|
|
const [open, setOpen] = useState<HTMLElement | null>(null);
|
|
|
|
const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
|
|
setOpen(event.currentTarget);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setOpen(null);
|
|
};
|
|
|
|
const { setCurrentLocale } = useContext(LanguageContext);
|
|
const handleChangeLanguage = (language) => {
|
|
localStorage.setItem('currentLocale', language);
|
|
setCurrentLocale(language);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Box display="flex" alignItems="center" border={0} borderColor="grey.300" borderRadius={3} p={1}>
|
|
|
|
<IconButtonAnimate
|
|
onClick={handleOpen}
|
|
sx={{
|
|
width: 35,
|
|
height: 35,
|
|
...(open && { bgcolor: 'action.selected' }),
|
|
}}
|
|
>
|
|
<Image
|
|
disabledEffect
|
|
src={(
|
|
!localStorage.getItem('currentLocale')
|
|
? LANGS[0].icon
|
|
: localStorage.getItem('currentLocale') === 'id-ID'
|
|
? LANGS[0].icon
|
|
: LANGS[1].icon
|
|
)}
|
|
alt={
|
|
!localStorage.getItem('currentLocale')
|
|
? LANGS[0].label
|
|
: localStorage.getItem('currentLocale') === 'id-ID'
|
|
? LANGS[0].label
|
|
: LANGS[1].label
|
|
}
|
|
/>
|
|
</IconButtonAnimate>
|
|
|
|
|
|
<ButtonBase onClick={handleOpen}>
|
|
<Typography variant="body2" component="span" marginRight={1} color="textPrimary">
|
|
Language
|
|
</Typography>
|
|
</ButtonBase>
|
|
</Box>
|
|
|
|
<MenuPopover
|
|
open={Boolean(open)}
|
|
anchorEl={open}
|
|
onClose={handleClose}
|
|
sx={{
|
|
mt: 1.5,
|
|
ml: 0.75,
|
|
width: 180,
|
|
'& .MuiMenuItem-root': { px: 1, typography: 'body2', borderRadius: 0.75 },
|
|
}}
|
|
>
|
|
<Stack spacing={0.75}>
|
|
{LANGS.map((option) => (
|
|
<MenuItem
|
|
key={option.value}
|
|
selected={option.value === localStorage.getItem('currentLocale')}
|
|
onClick = {() => {
|
|
handleClose();
|
|
handleChangeLanguage(option.value);
|
|
}}
|
|
>
|
|
<Image
|
|
disabledEffect
|
|
alt={option.label}
|
|
src={option.icon}
|
|
sx={{ width: 28 }}
|
|
/>
|
|
|
|
<Typography variant="body2" component="span" marginLeft={1} color="textPrimary">
|
|
{option.label}
|
|
</Typography>
|
|
</MenuItem>
|
|
))}
|
|
</Stack>
|
|
</MenuPopover>
|
|
</>
|
|
);
|
|
}
|