add setting for changing language

franciscoBSalgueiro · May 22, 2024 · 27569ae · 27569ae
1 parent 413e23d
commit 27569ae
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/src/components/settings/SettingsPage.tsx b/src/components/settings/SettingsPage.tsx
@@ -45,6 +45,7 @@ import { useLoaderData } from "@tanstack/react-router";
 import { open } from "@tauri-apps/api/dialog";
 import { useAtom } from "jotai";
 import { RESET } from "jotai/utils";
+import { useTranslation } from "react-i18next";
 import FileInput from "../common/FileInput";
 import BoardSelect from "./BoardSelect";
 import ColorControl from "./ColorControl";
@@ -57,10 +58,9 @@ import SettingsSwitch from "./SettingsSwitch";
 import SoundSelect from "./SoundSelect";
 import ThemeButton from "./ThemeButton";
 import VolumeSlider from "./VolumeSlider";
-import { useTranslation } from "react-i18next";
 
 export default function Page() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   // const version = useLoaderData() as string;
   const [keyMap, setKeyMap] = useAtom(keyMapAtom);
@@ -364,6 +364,36 @@ export default function Page() {
                 </div>
                 <ThemeButton />
               </Group>
+              <Group
+                justify="space-between"
+                wrap="nowrap"
+                gap="xl"
+                className={classes.item}
+              >
+                <div>
+                  <Text>{t("Settings.Appearance.Language")}</Text>
+                  <Text size="xs" c="dimmed">
+                    {t("Settings.Appearance.Language.Desc")}
+                  </Text>
+                </div>
+                <Select
+                  allowDeselect={false}
+                  data={[
+                    {
+                      value: "en_US",
+                      label: "English",
+                    },
+                    {
+                      value: "zh_CN",
+                      label: "Chinese",
+                    },
+                  ]}
+                  value={i18n.language}
+                  onChange={(val) => {
+                    i18n.changeLanguage(val || "en_US");
+                  }}
+                />
+              </Group>
               <Group
                 justify="space-between"
                 wrap="nowrap"

diff --git a/src/translation/en_US.ts b/src/translation/en_US.ts
@@ -324,6 +324,8 @@ export const en_US = {
     "Settings.Appearance.TitleBar": "Title Bar",
     "Settings.Appearance.TitleBar.Desc":
       "Choose between native or custom title bar",
+    "Settings.Appearance.Language": "Language",
+    "Settings.Appearance.Language.Desc": "Language used in the app",
     "Settings.Appearance.TitleBar.Native": "Native",
     "Settings.Appearance.TitleBar.Custom": "Custom",
     "Settings.Appearance.FontSize": "Font Size",

diff --git a/src/translation/zh_CN.ts b/src/translation/zh_CN.ts
@@ -314,6 +314,8 @@ export const zh_CN = {
     "Settings.Appearance.Theme.Dark": "暗",
     "Settings.Appearance.TitleBar": "标题栏",
     "Settings.Appearance.TitleBar.Desc": "使用原生或自定义标题栏",
+    "Settings.Appearance.Language": "语言",
+    "Settings.Appearance.Language.Desc": "应用程序中使用的语言",
     "Settings.Appearance.TitleBar.Native": "Native",
     "Settings.Appearance.TitleBar.Custom": "Custom",
     "Settings.Appearance.FontSize": "字体大小",