feat: add language selector

site/src/components/language-selector/language-selector.tsx

@@ -0,0 +1,40 @@
+import { ComboboxItem, Select } from "@mantine/core";
+import { useState } from "react";
+import i18n from "../../lib/i18n/i18n";
+import {
+  SupportedLanguage,
+  getLanguageName,
+  languages,
+} from "../../lib/i18n/locales";
+
+export const LanguageSelector = () => {
+  const [language, setLanguage] = useState<ComboboxItem>({
+    value: i18n.language,
+    label: getLanguageName(i18n.language as SupportedLanguage),
+  });
+
+  const languageOptions = Object.entries(languages).map(([code, name]) => ({
+    value: code,
+    label: name,
+  }));
+
+  const handleLanguageChange = (option: string) => {
+    i18n.changeLanguage(option as SupportedLanguage);
+    setLanguage({
+      value: option,
+      label: getLanguageName(option as SupportedLanguage),
+    });
+  };
+
+  return (
+    <Select
+      data={languageOptions}
+      value={language ? language.value : null}
+      onChange={(_value, option) => handleLanguageChange(option.value)}
+      allowDeselect={false}
+      pos="absolute"
+      right={10}
+      top={10}
+    />
+  );
+};

site/src/components/layouts/layout.tsx

@@ -1,12 +1,16 @@
 import { Center, Flex } from "@mantine/core";
 import { ReactNode } from "react";
+import { LanguageSelector } from "../language-selector/language-selector";
 
 export const Layout = ({ children }: { children: ReactNode }) => {
   return (
-    <Center style={{ minHeight: "100vh" }}>
-      <Flex direction="column" flex="1" maw={350}>
-        {children}
-      </Flex>
-    </Center>
+    <>
+      <LanguageSelector />
+      <Center style={{ minHeight: "100vh" }}>
+        <Flex direction="column" flex="1" maw={340}>
+          {children}
+        </Flex>
+      </Center>
+    </>
   );
 };