Finish preliminary making user settings, org settings styling similar to usage and billing page

2026-10-16 08:14:06 +00:00 · 2023-06-29 17:47:23 +07:00
parent 81c69d92b3
commit 056f5a4555
73 changed files with 2098 additions and 1698 deletions
@@ -0,0 +1,32 @@
+import { useTranslation } from "react-i18next";
+import { useRouter } from "next/router";
+
+import ListBox from "@app/components/basic/Listbox";
+
+export const ChangeLanguageSection = () => {
+    const { t, i18n } = useTranslation();
+    const router = useRouter();
+    const lang = router.locale ?? "en";
+
+    const setLanguage = async (to: string) => {
+        router.push(router.asPath, router.asPath, { locale: to });
+        localStorage.setItem("lang", to);
+        i18n.changeLanguage(to);
+    };
+
+    return (
+        <div className="p-4 bg-mineshaft-900 mb-6 max-w-screen-lg rounded-lg border border-mineshaft-600">
+            <p className="text-xl font-semibold text-mineshaft-100 mb-8">
+                {t("settings.personal.change-language")}
+            </p>
+            <div className="w-28">
+                <ListBox
+                    isSelected={lang}
+                    onChange={setLanguage}
+                    data={["en", "ko", "fr", "es"]}
+                    text={`${t("common.language")}: `}
+                />
+            </div>
+        </div>
+    );
+}