certimate/ui/src/App.tsx
2025-01-05 22:53:40 +08:00

77 lines
2.2 KiB
TypeScript

import { useEffect, useLayoutEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { RouterProvider } from "react-router-dom";
import { App, ConfigProvider, type ThemeConfig, theme } from "antd";
import { type Locale } from "antd/es/locale";
import AntdLocaleEnUs from "antd/locale/en_US";
import AntdLocaleZhCN from "antd/locale/zh_CN";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import { useBrowserTheme } from "@/hooks";
import { localeNames } from "@/i18n";
import { router } from "@/router.tsx";
const RootApp = () => {
const { i18n } = useTranslation();
const { theme: browserTheme } = useBrowserTheme();
const antdLocalesMap: Record<string, Locale> = useMemo(
() => ({
[localeNames.ZH]: AntdLocaleZhCN,
[localeNames.EN]: AntdLocaleEnUs,
}),
[]
);
const [antdLocale, setAntdLocale] = useState(antdLocalesMap[i18n.language]);
const handleLanguageChanged = () => {
setAntdLocale(antdLocalesMap[i18n.language]);
dayjs.locale(i18n.language);
};
i18n.on("languageChanged", handleLanguageChanged);
useLayoutEffect(() => {
handleLanguageChanged();
return () => {
i18n.off("languageChanged", handleLanguageChanged);
};
}, [antdLocalesMap, i18n]);
const antdThemesMap: Record<string, ThemeConfig> = useMemo(
() => ({
["light"]: { algorithm: theme.defaultAlgorithm },
["dark"]: { algorithm: theme.darkAlgorithm },
}),
[]
);
const [antdTheme, setAntdTheme] = useState(antdThemesMap[browserTheme]);
useEffect(() => {
setAntdTheme(antdThemesMap[browserTheme]);
const root = window.document.documentElement;
root.classList.remove("light", "dark");
root.classList.add(browserTheme);
}, [antdThemesMap, browserTheme]);
return (
<ConfigProvider
locale={antdLocale}
theme={{
...antdTheme,
token: {
/* @see tailwind.config.js */
colorPrimary: browserTheme === "dark" ? "hsl(20.5 90.2% 48.2%)" : "hsl(24.6 95% 53.1%)",
colorLink: browserTheme === "dark" ? "hsl(20.5 90.2% 48.2%)" : "hsl(24.6 95% 53.1%)",
},
}}
>
<App>
<RouterProvider router={router} />
</App>
</ConfigProvider>
);
};
export default RootApp;