You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
2.7 KiB
123 lines
2.7 KiB
import { NextPage } from "next";
|
|
|
|
import { FC } from "react";
|
|
|
|
import Box from "@mui/material/Box";
|
|
import Button from "@mui/material/Button";
|
|
import ButtonGroup from "@mui/material/ButtonGroup";
|
|
import Container from "@mui/material/Container";
|
|
import Divider from "@mui/material/Divider";
|
|
import Typography from "@mui/material/Typography";
|
|
import {
|
|
blue,
|
|
red,
|
|
green,
|
|
cyan,
|
|
purple,
|
|
yellow,
|
|
orange
|
|
} from "@mui/material/colors/";
|
|
import { useTheme } from "@mui/material/styles/";
|
|
|
|
import { toCamelCase } from "@src/utils";
|
|
|
|
import { useSettings } from "@utils/hooks";
|
|
|
|
import Layout from "@components/Layout";
|
|
|
|
const Settings: NextPage = () => {
|
|
const [settings, setSettings] = useSettings();
|
|
|
|
const theme = useTheme();
|
|
|
|
const setSetting = (key: string, value?: string): void => {
|
|
setSettings({ ...settings, [key]: value });
|
|
};
|
|
|
|
const ColorSetting: FC<{ type: string }> = ({ type }) => {
|
|
const camelCase = toCamelCase(type) as "primaryColor" | "accentColor";
|
|
|
|
return (
|
|
<Box sx={{ my: 3, display: "flex" }}>
|
|
<Typography variant="h5" sx={{ flexGrow: 1 }}>
|
|
{type}
|
|
</Typography>
|
|
{[
|
|
blue[800],
|
|
red[800],
|
|
green[800],
|
|
cyan[800],
|
|
purple[800],
|
|
yellow[800],
|
|
orange[800]
|
|
].map((color) => (
|
|
<Box
|
|
onClick={() => setSetting(camelCase, color)}
|
|
key={color}
|
|
component="span"
|
|
sx={{
|
|
width: 24,
|
|
height: 24,
|
|
backgroundColor: color,
|
|
borderRadius: "50%",
|
|
border:
|
|
color == settings[camelCase]
|
|
? {
|
|
borderColor: theme.palette.text.primary,
|
|
borderWidth: 1,
|
|
borderStyle: "solid"
|
|
}
|
|
: null,
|
|
cursor: "pointer",
|
|
ml: 1.5
|
|
}}
|
|
/>
|
|
))}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Layout>
|
|
<Container>
|
|
<Typography sx={{ my: 2 }} variant="h2">
|
|
Settings
|
|
</Typography>
|
|
|
|
<Divider sx={{ mb: 4 }} />
|
|
|
|
<Typography variant="h4">Theme</Typography>
|
|
|
|
<Box sx={{ my: 3, display: "flex" }}>
|
|
<Typography variant="h5" sx={{ flexGrow: 1 }}>
|
|
General theme
|
|
</Typography>
|
|
<ButtonGroup
|
|
variant="contained"
|
|
color="primary"
|
|
aria-label="outlined default button group"
|
|
>
|
|
<Button onClick={() => setSetting("theme", "light")}>Light</Button>
|
|
<Button onClick={() => setSetting("theme")}>System</Button>
|
|
<Button onClick={() => setSetting("theme", "dark")}>Dark</Button>
|
|
</ButtonGroup>
|
|
</Box>
|
|
|
|
<ColorSetting type="Primary Color" />
|
|
|
|
<ColorSetting type="Accent Color" />
|
|
|
|
<Divider sx={{ my: 4 }} />
|
|
|
|
<Typography variant="h4">Player</Typography>
|
|
|
|
<Divider sx={{ my: 4 }} />
|
|
|
|
<Typography variant="h4">Miscellaneous</Typography>
|
|
</Container>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default Settings;
|