feat: initial ui redesign from demo

2026-07-16 05:13:36 +00:00 · 2026-05-11 01:23:11 -05:00
parent eaa758effe
commit 33dcde0827
349 changed files with 23984 additions and 31634 deletions
@@ -0,0 +1,83 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/select.tsx";
+import { Globe } from "lucide-react";
+
+const languages = [
+  { code: "en", name: "English", nativeName: "English" },
+  { code: "af", name: "Afrikaans", nativeName: "Afrikaans" },
+  { code: "ar", name: "Arabic", nativeName: "العربية" },
+  { code: "bn", name: "Bengali", nativeName: "বাংলা" },
+  { code: "bg", name: "Bulgarian", nativeName: "Български" },
+  { code: "ca", name: "Catalan", nativeName: "Català" },
+  { code: "zh-CN", name: "Chinese Simplified", nativeName: "简体中文" },
+  { code: "zh-TW", name: "Chinese Traditional", nativeName: "繁体中文" },
+  { code: "cs", name: "Czech", nativeName: "Čeština" },
+  { code: "da", name: "Danish", nativeName: "Dansk" },
+  { code: "nl", name: "Dutch", nativeName: "Nederlands" },
+  { code: "fi", name: "Finnish", nativeName: "Suomi" },
+  { code: "fr", name: "French", nativeName: "Français" },
+  { code: "de", name: "German", nativeName: "Deutsch" },
+  { code: "el", name: "Greek", nativeName: "Ελληνικά" },
+  { code: "he", name: "Hebrew", nativeName: "עברית" },
+  { code: "hi", name: "Hindi", nativeName: "हिन्दी" },
+  { code: "hu", name: "Hungarian", nativeName: "Magyar" },
+  { code: "id", name: "Indonesian", nativeName: "Bahasa Indonesia" },
+  { code: "it", name: "Italian", nativeName: "Italiano" },
+  { code: "ja", name: "Japanese", nativeName: "日本語" },
+  { code: "ko", name: "Korean", nativeName: "한국어" },
+  { code: "no", name: "Norwegian", nativeName: "Norsk" },
+  { code: "pl", name: "Polish", nativeName: "Polski" },
+  {
+    code: "pt-PT",
+    name: "Portuguese",
+    nativeName: "Português",
+  },
+  {
+    code: "pt-BR",
+    name: "Portuguese (Brazil)",
+    nativeName: "Português (Brasil)",
+  },
+  { code: "ro", name: "Romanian", nativeName: "Română" },
+  { code: "ru", name: "Russian", nativeName: "Русский" },
+  { code: "sr", name: "Serbian", nativeName: "Српски" },
+  { code: "es-ES", name: "Spanish", nativeName: "Español" },
+  { code: "sv-SE", name: "Swedish", nativeName: "Svenska" },
+  { code: "th", name: "Thai", nativeName: "ไทย" },
+  { code: "tr", name: "Turkish", nativeName: "Türkçe" },
+  { code: "uk", name: "Ukrainian", nativeName: "Українська" },
+  { code: "vi", name: "Vietnamese", nativeName: "Tiếng Việt" },
+];
+
+export function LanguageSwitcher() {
+  const { i18n, t } = useTranslation();
+
+  const handleLanguageChange = (value: string) => {
+    i18n.changeLanguage(value);
+    localStorage.setItem("i18nextLng", value);
+  };
+
+  return (
+    <div className="flex items-center gap-2 relative z-[99999]">
+      <Globe className="h-4 w-4 text-muted-foreground" />
+      <Select value={i18n.language} onValueChange={handleLanguageChange}>
+        <SelectTrigger className="w-[120px]">
+          <SelectValue placeholder={t("placeholders.language")} />
+        </SelectTrigger>
+        <SelectContent className="z-[99999]">
+          {languages.map((lang) => (
+            <SelectItem key={lang.code} value={lang.code}>
+              {lang.nativeName}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}