umami/components/input/LanguageButton.js

53 lines
1.5 KiB
JavaScript
Raw Normal View History

2023-03-22 05:28:36 +01:00
import { Icon, Button, PopupTrigger, Popup, Text } from 'react-basics';
import classNames from 'classnames';
import { languages } from 'lib/lang';
import useLocale from 'hooks/useLocale';
2023-01-31 06:44:07 +01:00
import Icons from 'components/icons';
2020-10-02 21:15:42 +02:00
import styles from './LanguageButton.module.css';
2020-09-07 10:22:16 +02:00
2023-04-21 17:00:42 +02:00
export function LanguageButton() {
const { locale, saveLocale, dir } = useLocale();
const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
2020-09-07 10:22:16 +02:00
function handleSelect(value, close) {
saveLocale(value);
close();
2020-09-07 10:22:16 +02:00
}
return (
<PopupTrigger>
2023-03-22 05:28:36 +01:00
<Button variant="quiet">
<Icon>
<Icons.Globe />
</Icon>
</Button>
<Popup position="bottom" alignment={dir === 'rtl' ? 'start' : 'end'}>
{close => {
return (
<div className={styles.menu}>
{items.map(({ value, label }) => {
return (
<div
key={value}
className={classNames(styles.item, { [styles.selected]: value === locale })}
onClick={handleSelect.bind(null, value, close)}
>
<Text>{label}</Text>
{value === locale && (
<Icon className={styles.icon}>
<Icons.Check />
</Icon>
)}
</div>
);
})}
</div>
);
}}
</Popup>
</PopupTrigger>
2020-09-07 10:22:16 +02:00
);
}
2023-04-21 17:00:42 +02:00
export default LanguageButton;