diff --git a/src/components/HeaderBar/Settings/SettingsCategoryTitle.tsx b/src/components/HeaderBar/Settings/SettingsCategoryTitle.tsx new file mode 100644 index 0000000..eecec4e --- /dev/null +++ b/src/components/HeaderBar/Settings/SettingsCategoryTitle.tsx @@ -0,0 +1,23 @@ +import { Box, Typography } from "@mui/material"; +import { FC } from "react"; + +interface SettingsCategoryTitleProps { + title: string; +} + +export const SettingsCategoryTitle: FC = ({ title }) => { + return ( + + + {title} + + + ); +}; diff --git a/src/components/HeaderBar/Settings/SettingsItem.tsx b/src/components/HeaderBar/Settings/SettingsItem.tsx new file mode 100644 index 0000000..b04cfd4 --- /dev/null +++ b/src/components/HeaderBar/Settings/SettingsItem.tsx @@ -0,0 +1,70 @@ +import { Box } from "@mui/material"; +import { FC, ReactNode } from "react"; + +interface SettingsItemProps { + settingsDescription: ReactNode; + settingsInput?: ReactNode; + settingsInputBottom?: ReactNode; + settingsInputLong?: ReactNode; +} + +export const SettingsItem: FC = ({ + settingsDescription, + settingsInput, + settingsInputBottom, + settingsInputLong, +}) => { + return ( + + + {settingsDescription} + {settingsInput && ( + + {settingsInput} + + )} + {settingsInputLong && ( + + {settingsInputLong} + + )} + + {settingsInputBottom && ( + + {settingsInputBottom} + + )} + + ); +}; diff --git a/src/components/HeaderBar/Settings/SettingsTabDisplay.tsx b/src/components/HeaderBar/Settings/SettingsTabDisplay.tsx new file mode 100644 index 0000000..aedbf7a --- /dev/null +++ b/src/components/HeaderBar/Settings/SettingsTabDisplay.tsx @@ -0,0 +1,331 @@ +import { Box, Chip, InputAdornment, MenuItem, Slider, Switch, TextField, Typography } from "@mui/material"; +import { useAtom } from "jotai"; +import { FC } from "react"; +import { settingsAtom } from "../../../lib/store/jotai/settings"; +import { SettingsCategoryTitle } from "./SettingsCategoryTitle"; +import { SettingsItem } from "./SettingsItem"; + +interface SettingsTabDisplayProps { + sx?: any; +} + +export const SettingsTabDisplay: FC = ({ sx }) => { + // atoms + const [stagedSettings, setStagedSettings] = useAtom(settingsAtom); + + const handleSettingsDisplayValueChange = (settingKey: string, settingValue: boolean | number | string | number[]) => { + const newSettings = { + ...stagedSettings, + display: { + ...stagedSettings.display, + [settingKey]: settingValue, + }, + }; + setStagedSettings(newSettings); + }; + + return ( + + + + Dark mode + + } + settingsInput={ + { + handleSettingsDisplayValueChange(e.target.name, e.target.checked); + }} + /> + } + /> + + Accent color + + Default: #8ab4f8 + + + } + settingsInput={ + { + handleSettingsDisplayValueChange(e.target.name, e.target.value); + }} + sx={{ + width: "100%", + }} + size="small" + type="color" + value={stagedSettings.display.accent_color} + variant="standard" + /> + } + /> + + Font family + + Default: Monospace + + + } + settingsInputLong={ + { + handleSettingsDisplayValueChange(e.target.name, e.target.value); + }} + select + size="small" + sx={{ + maxWidth: "100%", + }} + value={stagedSettings.display.font_family || "monospace"} + variant="outlined" + > + Monospace + Sans Serif + Comic Sans + System font + + } + /> + + Font scaling + + Default: 100% + + + } + settingsInputBottom={ + { + handleSettingsDisplayValueChange("font_scaling", value); + }} + step={10} + value={stagedSettings.display.font_scaling} + valueLabelDisplay="auto" + /> + } + /> + + + + + Transition duration + + + Default: 200ms + + + } + settingsInput={ + ms, + inputProps: { min: 0, max: 100, step: 1 }, + }} + name="transition_duration" + onChange={(e) => { + handleSettingsDisplayValueChange(e.target.name, parseFloat(e.target.value)); + }} + sx={{ + width: "100%", + }} + size="small" + type="number" + value={stagedSettings.display.transition_duration} + variant="standard" + /> + } + /> + + + + Radius + + + Default: 8px + + + } + settingsInput={ + px, + inputProps: { min: 0, max: 100, step: 1 }, + }} + name="radius" + onChange={(e) => { + handleSettingsDisplayValueChange(e.target.name, parseFloat(e.target.value)); + }} + sx={{ + width: "100%", + }} + size="small" + type="number" + value={stagedSettings.display.radius} + variant="standard" + /> + } + /> + + + + Window height + + + Default: 60% + + + } + settingsInput={ + %, + inputProps: { min: 0, max: 100, step: 1 }, + }} + name="window_height" + onChange={(e) => { + handleSettingsDisplayValueChange(e.target.name, parseFloat(e.target.value)); + }} + sx={{ + width: "100%", + }} + size="small" + type="number" + value={stagedSettings.display.window_height} + variant="standard" + /> + } + /> + + + + Window width + + + Default: 400px + + + } + settingsInput={ + px, + inputProps: { min: 0, max: 10000, step: 1 }, + }} + name="window_width" + onChange={(e) => { + handleSettingsDisplayValueChange(e.target.name, parseFloat(e.target.value)); + }} + sx={{ + width: "100%", + }} + size="small" + type="number" + value={stagedSettings.display.window_width} + variant="standard" + /> + } + /> + + ); +};