stort/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabStyle.tsx

import { Box, InputAdornment, MenuItem, Slider, Switch, TextField, Typography } from "@mui/material";
import { useAtom } from "jotai";
import { FC } from "react";
import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings";
import { BetaChip } from "../BetaChip";
import { CategoryTitle } from "../CategoryTitle";
import { DevChip } from "../DevChip";
import { SettingsItem } from "../SettingsItem";

interface SettingsTabStyleProps {
  sx?: any;
}

export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
  // atoms
  const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom);

  const handleSettingsStyleValueChange = (settingKey: string, settingValue: boolean | number | string | number[]) => {
    const newSettings = {
      ...stagedSettings,
      style: {
        ...stagedSettings.style,
        [settingKey]: settingValue,
      },
    };
    setStagedSettings(newSettings);
  };

  return (
    <Box sx={{ sx }}>
      <CategoryTitle title="Basic styles" />
      <SettingsItem
        defaultText="On"
        description={
          <>
            <BetaChip />
            Dark mode
          </>
        }
        input={
          <Switch
            checked={stagedSettings.style.dark_mode}
            name="dark_mode"
            onChange={(e) => {
              handleSettingsStyleValueChange(e.target.name, e.target.checked);
            }}
          />
        }
      />
      <SettingsItem
        defaultText="#8ab4f8"
        description="Accent color"
        input={
          <TextField
            name="accent_color"
            onChange={(e) => {
              handleSettingsStyleValueChange(e.target.name, e.target.value);
            }}
            sx={{
              width: "100%",
            }}
            size="small"
            type="color"
            value={stagedSettings.style.accent_color}
            variant="standard"
          />
        }
      />
      <SettingsItem
        defaultText="Monospace"
        description="Font family"
        inputLong={
          <TextField
            fullWidth
            name="font_family"
            onChange={(e) => {
              handleSettingsStyleValueChange(e.target.name, e.target.value);
            }}
            select
            size="small"
            sx={{
              maxWidth: "100%",
            }}
            value={stagedSettings.style.font_family || "monospace"}
            variant="outlined"
          >
            <MenuItem value="monospace">Monospace</MenuItem>
            <MenuItem value="sans_serif">Sans Serif</MenuItem>
            <MenuItem value="comic_sans">Comic Sans</MenuItem>
            <MenuItem value="system_font">System font</MenuItem>
          </TextField>
        }
      />
      <SettingsItem
        defaultText="100%"
        description="Font scaling"
        inputBottom={
          <Slider
            marks={[
              {
                value: 80,
                label: "80%",
              },
              {
                value: 90,
                label: "90%",
              },
              {
                value: 100,
                label: "100%",
              },
              {
                value: 110,
                label: "110%",
              },
              {
                value: 120,
                label: "120%",
              },
            ]}
            min={80}
            max={120}
            name="font_scaling"
            onChangeCommitted={(e, value) => {
              handleSettingsStyleValueChange("font_scaling", value);
            }}
            step={10}
            value={stagedSettings.style.font_scaling}
            valueLabelDisplay="auto"
          />
        }
      />
      <CategoryTitle title="Advanced settings" />
      <SettingsItem
        defaultText="200ms"
        description={
          <>
            <DevChip />
            Transition duration
          </>
        }
        input={
          <TextField
            InputProps={{
              endAdornment: <InputAdornment position="end">ms</InputAdornment>,
              inputProps: { min: 0, max: 100, step: 1 },
            }}
            name="transition_duration"
            onChange={(e) => {
              handleSettingsStyleValueChange(e.target.name, parseFloat(e.target.value));
            }}
            sx={{
              width: "100%",
            }}
            size="small"
            type="number"
            value={stagedSettings.style.transition_duration}
            variant="standard"
          />
        }
      />
      <SettingsItem
        defaultText="8px"
        description={
          <>
            <DevChip />
            Radius
          </>
        }
        input={
          <TextField
            InputProps={{
              endAdornment: <InputAdornment position="end">px</InputAdornment>,
              inputProps: { min: 0, max: 100, step: 1 },
            }}
            name="radius"
            onChange={(e) => {
              handleSettingsStyleValueChange(e.target.name, parseFloat(e.target.value));
            }}
            sx={{
              width: "100%",
            }}
            size="small"
            type="number"
            value={stagedSettings.style.radius}
            variant="standard"
          />
        }
      />
      <SettingsItem
        defaultText="60%"
        description={
          <>
            <DevChip />
            Window height
          </>
        }
        input={
          <TextField
            InputProps={{
              endAdornment: <InputAdornment position="end">%</InputAdornment>,
              inputProps: { min: 0, max: 100, step: 1 },
            }}
            name="window_height"
            onChange={(e) => {
              handleSettingsStyleValueChange(e.target.name, parseFloat(e.target.value));
            }}
            sx={{
              width: "100%",
            }}
            size="small"
            type="number"
            value={stagedSettings.style.window_height}
            variant="standard"
          />
        }
      />
      <SettingsItem
        defaultText="400px"
        description={
          <>
            <DevChip />
            Window width
          </>
        }
        input={
          <TextField
            InputProps={{
              endAdornment: <InputAdornment position="end">px</InputAdornment>,
              inputProps: { min: 0, max: 10000, step: 1 },
            }}
            name="window_width"
            onChange={(e) => {
              handleSettingsStyleValueChange(e.target.name, parseFloat(e.target.value));
            }}
            sx={{
              width: "100%",
            }}
            size="small"
            type="number"
            value={stagedSettings.style.window_width}
            variant="standard"
          />
        }
      />
    </Box>
  );
};