language switcher

ui/frontend/build_src/src/Translation/config.ts

@@ -1,11 +1,15 @@
 import i18n from "i18next";
 // this should be updated to an interface
-import translation from "./locales/en/home.json";
+import ENTranslation from "./locales/en/home.json";
+import ESTranlation from "./locales/es/home.json";
 import { initReactI18next } from "react-i18next";
 
 export const resources = {
   en: {
-    translation,
+    translation: ENTranslation,
+  },
+  es: {
+    translation: ESTranlation,
   },
 } as const;
 

ui/frontend/build_src/src/Translation/locales/es/home.json

@@ -1,5 +1,5 @@
 {
-  "title": "Stable Diffusion UI",
+  "title": "Stable Diffusion UI en Español",
   "description": "",
   "navbar": {},
   "land-cre": {},

ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx

@@ -11,6 +11,8 @@ import {
   HeaderDisplayMain, // @ts-expect-error
 } from "./headerDisplay.css.ts";
 
+import LanguageDropdown from "./languageDropdown";
+
 export default function HeaderDisplay() {
   const { t } = useTranslation();
 
@@ -43,6 +45,8 @@ export default function HeaderDisplay() {
         {t("title")} {version} {release}{" "}
       </h1>
       <StatusDisplay className="status-display"></StatusDisplay>
+
+      <LanguageDropdown></LanguageDropdown>
     </div>
   );
 }

ui/frontend/build_src/src/components/organisms/headerDisplay/languageDropdown/index.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+const LanguageDropdown = () => {
+  const { i18n } = useTranslation();
+  const [language, setLanguage] = useState("id");
+
+  const handleLangChange = (evt: any) => {
+    const lang = evt.target.value;
+    console.log(lang);
+    setLanguage(lang);
+    i18n.changeLanguage(lang);
+  };
+
+  return (
+    <select onChange={handleLangChange} value={language}>
+      <option value="en">EN</option>
+      <option value="es">ES</option>
+    </select>
+  );
+};
+
+export default LanguageDropdown;