src/components/input/LanguageButton.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

import { Button, Dialog, Grid, Icon, MenuTrigger, Popover, Text } from '@umami/react-zen';
import { Globe } from 'lucide-react';
import { useLocale } from '@/components/hooks';
import { languages } from '@/lib/lang';

export function LanguageButton() {
  const { locale, saveLocale } = useLocale();
  const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));

  function handleSelect(value: string) {
    saveLocale(value);
  }

  return (
    <MenuTrigger key="language">
      <Button variant="quiet">
        <Icon>
          <Globe />
        </Icon>
      </Button>
      <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' : 'medium'}
                    color={value === locale ? undefined : 'muted'}
                  >
                    {label}
                  </Text>
                </Button>
              );
            })}
          </Grid>
        </Dialog>
      </Popover>
    </MenuTrigger>
  );
}