feat: customize system profile (#828)

This commit is contained in:
boojack
2022-12-22 19:48:44 +08:00
committed by GitHub
parent 72daa4e1d6
commit 7efa749c66
14 changed files with 171 additions and 141 deletions

View File

@ -1,16 +1,19 @@
import { Option, Select } from "@mui/joy";
import { FC } from "react";
import { useTranslation } from "react-i18next";
import { useGlobalStore, useUserStore } from "../store/module";
import Icon from "./Icon";
interface Props {
value: Appearance;
onChange: (appearance: Appearance) => void;
className?: string;
}
const appearanceList = ["system", "light", "dark"];
const AppearanceSelect = () => {
const AppearanceSelect: FC<Props> = (props: Props) => {
const { onChange, value, className } = props;
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";
@ -24,22 +27,19 @@ const AppearanceSelect = () => {
};
const handleSelectChange = async (appearance: Appearance) => {
if (user) {
await userStore.upsertUserSetting("appearance", appearance);
}
globalStore.setAppearance(appearance);
onChange(appearance);
};
return (
<Select
className="!min-w-[10rem] w-auto text-sm"
value={appearance}
className={`!min-w-[10rem] w-auto whitespace-nowrap ${className ?? ""}`}
value={value}
onChange={(_, appearance) => {
if (appearance) {
handleSelectChange(appearance);
}
}}
startDecorator={getPrefixIcon(appearance)}
startDecorator={getPrefixIcon(value)}
>
{appearanceList.map((item) => (
<Option key={item} value={item} className="whitespace-nowrap">