watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-05 13:17:19 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Start using react-zen.

Browse source
This commit is contained in:
Mike Cao 2025-02-12 23:34:27 -08:00
parent 020cfdc646
commit 71e4f8f49b
24 changed files with 1872 additions and 609 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/components/input/LanguageButton.tsx
View file

@ -1,52 +1,42 @@
import { Icon, Button, PopupTrigger, Popup } from 'react-basics';
import classNames from 'classnames';
import { Icon, Button, MenuTrigger, Popover, Grid, Text, Dialog } from '@umami/react-zen';
import { languages } from '@/lib/lang';
import { useLocale } from '@/components/hooks';
import Icons from '@/components/icons';
import styles from './LanguageButton.module.css';
export function LanguageButton() {
const { locale, saveLocale, dir } = useLocale();
const { locale, saveLocale } = useLocale();
const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
function handleSelect(value: string, close: () => void, e: MouseEvent) {
e.stopPropagation();
function handleSelect(value: string) {
saveLocale(value);
close();
}
return (
<PopupTrigger>
<MenuTrigger key="language">
<Button variant="quiet">
<Icon>
<Icons.Globe />
</Icon>
</Button>
<Popup position="bottom" alignment={dir === 'rtl' ? 'start' : 'end'}>
{(close: () => void) => {
return (
<div className={styles.menu}>
{items.map(({ value, label }) => {
return (
<div
key={value}
className={classNames(styles.item, { [styles.selected]: value === locale })}
onClick={(e: any) => handleSelect(value, close, e)}
<Popover placement="bottom end">
<Dialog variant="menu">
<Grid columns="repeat(3, minmax(200px, 1fr))" overflow="hidden">
{items.map(({ value, label }) => {
return (
<Button key={value} variant="quiet" onPress={() => handleSelect(value)}>
<Text
weight={value === locale ? 'bold' : 'normal'}
color={value === locale ? 'primary' : 'muted'}
>
<span lang={value}>{label}</span>
{value === locale && (
<Icon className={styles.icon}>
<Icons.Check />
</Icon>
)}
</div>
);
})}
</div>
);
}}
</Popup>
</PopupTrigger>
{label}
</Text>
</Button>
);
})}
</Grid>
</Dialog>
</Popover>
</MenuTrigger>
);
}