53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import { Option, Select } from "@mui/joy";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useGlobalStore, useUserStore } from "../store/module";
|
|
import Icon from "./Icon";
|
|
|
|
const appearanceList = ["system", "light", "dark"];
|
|
|
|
const AppearanceSelect = () => {
|
|
const { t } = useTranslation();
|
|
const globalStore = useGlobalStore();
|
|
const userStore = useUserStore();
|
|
const { appearance } = globalStore.state;
|
|
const user = userStore.state.user;
|
|
|
|
const getPrefixIcon = (apperance: Appearance) => {
|
|
const className = "w-4 h-auto";
|
|
if (apperance === "light") {
|
|
return <Icon.Sun className={className} />;
|
|
} else if (apperance === "dark") {
|
|
return <Icon.Moon className={className} />;
|
|
} else {
|
|
return <Icon.Smile className={className} />;
|
|
}
|
|
};
|
|
|
|
const handleSelectChange = async (appearance: Appearance) => {
|
|
if (user) {
|
|
await userStore.upsertUserSetting("appearance", appearance);
|
|
}
|
|
globalStore.setAppearance(appearance);
|
|
};
|
|
|
|
return (
|
|
<Select
|
|
className="!min-w-[10rem] w-auto text-sm"
|
|
value={appearance}
|
|
onChange={(_, appearance) => {
|
|
if (appearance) {
|
|
handleSelectChange(appearance);
|
|
}
|
|
}}
|
|
startDecorator={getPrefixIcon(appearance)}
|
|
>
|
|
{appearanceList.map((item) => (
|
|
<Option key={item} value={item} className="whitespace-nowrap">
|
|
{t(`setting.apperance-option.${item}`)}
|
|
</Option>
|
|
))}
|
|
</Select>
|
|
);
|
|
};
|
|
|
|
export default AppearanceSelect;
|