1 files changed, 41 insertions, 0 deletions
diff --git a/src/components/input/LanguageButton.tsx b/src/components/input/LanguageButton.tsx
new file mode 100644
index 0000000..ac43dcb
--- /dev/null
+++ b/src/components/input/LanguageButton.tsx
@@ -0,0 +1,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>
+  );
+}