From c7000951fed6ac28e6067fa2330a7297478723cd Mon Sep 17 00:00:00 2001
From: Stavros <steveiliop56@gmail.com>
Date: Wed, 19 Mar 2025 22:20:29 +0200
Subject: [PATCH] feat: add language selector

---
 .../language-selector/language-selector.tsx   | 40 +++++++++++++++++++
 site/src/components/layouts/layout.tsx        | 14 ++++---
 site/src/lib/i18n/i18n.ts                     |  1 -
 site/src/lib/i18n/locales.ts                  | 36 +++++++++++++++++
 4 files changed, 85 insertions(+), 6 deletions(-)
 create mode 100644 site/src/components/language-selector/language-selector.tsx
 create mode 100644 site/src/lib/i18n/locales.ts

diff --git a/site/src/components/language-selector/language-selector.tsx b/site/src/components/language-selector/language-selector.tsx
new file mode 100644
index 0000000..95d018a
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/site/src/components/layouts/layout.tsx b/site/src/components/layouts/layout.tsx
index 070a523..660eb8e 100644
--- a/site/src/components/layouts/layout.tsx
+++ b/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>
+    </>
   );
 };
diff --git a/site/src/lib/i18n/i18n.ts b/site/src/lib/i18n/i18n.ts
index 5408974..68dfb42 100644
--- a/site/src/lib/i18n/i18n.ts
+++ b/site/src/lib/i18n/i18n.ts
@@ -16,5 +16,4 @@ i18n
     }
   });
 
-
 export default i18n;
\ No newline at end of file
diff --git a/site/src/lib/i18n/locales.ts b/site/src/lib/i18n/locales.ts
new file mode 100644
index 0000000..bd5d1af
--- /dev/null
+++ b/site/src/lib/i18n/locales.ts
@@ -0,0 +1,36 @@
+export const languages = {
+    "af-ZA": "Afrikaans",
+    "ar-SA": "العربية",
+    "ca-ES": "Català",
+    "cs-CZ": "Čeština",
+    "da-DK": "Dansk",
+    "de-DE": "Deutsch",
+    "el-GR": "Ελληνικά",
+    "en-US": "English",
+    "es-ES": "Español",
+    "fi-FI": "Suomi",
+    "fr-FR": "Français",
+    "he-IL": "עברית",
+    "hu-HU": "Magyar",
+    "it-IT": "Italiano",
+    "ja-JP": "日本語",
+    "ko-KR": "한국어",
+    "nl-NL": "Nederlands",
+    "no-NO": "Norsk",
+    "pl-PL": "Polski",
+    "pt-BR": "Português",
+    "pt-PT": "Português",
+    "ro-RO": "Română",
+    "ru-RU": "Русский",
+    "sr-SP": "Српски",
+    "sv-SE": "Svenska",
+    "tr-TR": "Türkçe",
+    "uk-UA": "Українська",
+    "vi-VN": "Tiếng Việt",
+    "zh-CN": "中文",
+    "zh-TW": "中文"
+}
+
+export type SupportedLanguage = keyof typeof languages;
+
+export const getLanguageName = (language: SupportedLanguage): string => languages[language];
\ No newline at end of file