@mui/material#Slider TypeScript Examples

export function VolumeSlider({ disabled, onChange, value }: { disabled?: boolean; onChange: Change; value: number }) {
  return (
    <Stack gap={2} direction={"row"}>
      <VolumeDown />
      <Slider
        size="small"
        valueLabelDisplay="auto"
        disabled={disabled}
        value={Math.floor(value * 100)}
        step={1}
        onChange={(_, x) => onChange((x as number) / 100)}
      />
      <VolumeUp />
    </Stack>
  );
}

function BeatmapBackgroundSettings() {
  const theater = useCommonManagers();
  const { beatmapBackgroundSettingsStore } = theater;
  const settings = useObservable(() => beatmapBackgroundSettingsStore.settings$, { blur: 0, enabled: false, dim: 0 });
  return (
    <Paper sx={{ boxShadow: "none", p: 2 }}>
      <Stack gap={1}>
        <Typography variant={"h6"}>Beatmap Background</Typography>
        <Stack>
          <Typography>Blur</Typography>
          <Slider
            value={Math.round(settings.blur * 100)}
            onChange={(_, v) => beatmapBackgroundSettingsStore.setBlur((v as number) / 100)}
            valueLabelDisplay={"auto"}
            valueLabelFormat={formatToPercent}
          />
          <Typography>Dim</Typography>
          <Slider
            value={Math.round(settings.dim * 100)}
            onChange={(_, v) => beatmapBackgroundSettingsStore.setDim((v as number) / 100)}
            valueLabelDisplay={"auto"}
            valueLabelFormat={formatToPercent}
          />
        </Stack>
      </Stack>
    </Paper>
  );
}

function HitErrorBarSettingsSection() {
  const { hitErrorBarSettingsStore } = useCommonManagers();
  const settings = useObservable(() => hitErrorBarSettingsStore.settings$, DEFAULT_HIT_ERROR_BAR_SETTINGS);
  return (
    <Paper elevation={1} sx={{ boxShadow: "none", p: 2 }}>
      <Stack>
        {/*TODO: Enabled*/}
        <Typography>Hit Error Bar Scaling</Typography>
        <Slider
          value={Math.round(settings.scale * 100)}
          valueLabelFormat={formatToPercent}
          max={300}
          onChange={(_, v) => hitErrorBarSettingsStore.changeSettings((s) => (s.scale = (v as number) / 100))}
          valueLabelDisplay={"auto"}
        />
      </Stack>
    </Paper>
  );
}

FinanceDialogueBody: React.FC<IFinanceDialogueBody> = ({spawncode, price, setDialogueOpen, setModalOpen}) => {
    const [downpay, setDownpay] = useState(20)
    const [colour, setColour] = useState<RgbColor>({r: 0, g: 0, b:0})
    const {setVisible} = useVisibility()
    const coloursEnabled = useRecoilValue(GlobalState.customColours)

    const handleClose = () => {
        setDialogueOpen(false)
    }

    const handleAccept = async () => {
        setDialogueOpen(false)
        setModalOpen(false)

        try {
            await fetchNui<void>("finance_vehicle", {
                vehicle: spawncode,
                downpayPercent: downpay,
                colour: coloursEnabled ? colour : null
            })
            await fetchNui("exit")
            setVisible(false)
        } catch (e) {
            console.error(e)
        }
    }

    const calculateDownpayment = () => {
        const total = parseFloat(price.slice(1).replace(/,/g, ''))

        return Math.round(total * (downpay / 100))
    }

    const onSliderChange = (e: any) => {
        setDownpay(e.target.value)
    }

    return (
        <>
            <DialogTitle>Confirm your finance options</DialogTitle>
            <DialogContent>
                <DialogContentText>
                    Downpayment: ${calculateDownpayment()}.00 <br/>
                    Interest Rate: {interestRates[downpay]}%
                </DialogContentText>

                <br/>
                <Slider
                    defaultValue={downpay}
                    marks={[
                        {value: 10, label: "10%"},
                        {value: 20, label: "20%"},
                        {value: 30, label: "30%"},
                        {value: 40, label: "40%"},
                    ]}
                    min={10}
                    max={40}
                    step={10}
                    getAriaValueText={(value) => value + "%"}
                    onChange={onSliderChange}
                />

                {coloursEnabled &&
                <DialogContentText>
                    <br />
                    Pick a colour, any colour:
                    <RgbColorPicker color={colour} onChange={setColour} />
                </DialogContentText>
                }

            </DialogContent>
            <DialogActions>
                <Button color="success" variant="outlined" onClick={handleAccept}>Confirm</Button>
                <Button color="error" variant="outlined" onClick={handleClose}>Cancel</Button>
            </DialogActions>
        </>
    )
}

export function BaseGameTimeSlider(props: BaseGameTimeSliderProps) {
  const { backgroundEnable, duration, currentTime, onChange, events, difficulties } = props;
  const valueLabelFormat = (value: number) => formatGameTime(value);

  const eventsCanvas = useRef<HTMLCanvasElement>(null!);
  const difficultyCanvas = useRef<HTMLCanvasElement>(null!);

  useEffect(() => {
    drawPlaybarEvents(eventsCanvas.current, events, duration);
  }, [eventsCanvas, events, duration]);
  useEffect(() => {
    const chart = drawDifficulty(difficultyCanvas.current, difficulties);
    return () => {
      chart.destroy();
    };
  }, [difficultyCanvas, difficulties]);

  return (
    <Box sx={{ width: "100%", position: "relative" }}>
      <PlaybarEventsCanvas ref={eventsCanvas} />
      <Box sx={{ position: "absolute", top: 0, transform: "translate(0, -100%)", width: "100%" }}>
        <Box sx={{ position: "relative", height: "48px", width: "100%" }}>
          <DifficultyCanvas ref={difficultyCanvas} />
        </Box>
      </Box>
      <Slider
        onFocus={ignoreFocus}
        size={"small"}
        // The padding here determines how clickable the slider is
        // This is copied from: https://mui.com/components/slider/#music-player
        sx={{
          position: "absolute",
          top: "50%",
          transform: "translate(0, -50%)",
          padding: "2px 0",

          color: "white",
          height: 6,
          "& .MuiSlider-thumb": {
            width: 8,
            height: 8,
            // transition: "0.3s bezier(.47,1.64,.41,.8)",
            transition: "none",
            "&:before": {
              boxShadow: "0 2px 12px 0 rgba(0,0,0,0.4)",
            },
            "&:hover, &.Mui-focusVisible": {
              boxShadow: `0px 0px 0px 8px ${"rgb(255 255 255 / 16%)"}`,
            },
            "&.Mui-active": {
              width: 12,
              height: 12,
            },
          },
          "& .MuiSlider-rail": {
            opacity: 0.28,
          },
          "& .MuiSlider-track": {
            transition: "none", // Otherwise it lags behind on very short songs
          },
        }}
        value={currentTime}
        onChange={(_, x) => onChange(x as number)}
        getAriaValueText={valueLabelFormat}
        valueLabelFormat={valueLabelFormat}
        valueLabelDisplay={"auto"}
        step={16}
        max={duration}
      />
    </Box>
  );
}

export function BaseSettingsModal(props: SettingsProps) {
  const { onClose, tabs, opacity, onOpacityChange, tabIndex, onTabIndexChange } = props;

  const handleTabChange = (event: any, newValue: any) => {
    onTabIndexChange(newValue);
  };

  const displayedTab = tabs[tabIndex].component;

  return (
    <Paper
      sx={{
        filter: `opacity(${opacity}%)`,
        height: "100%",
        display: "flex",
        flexDirection: "column",
        position: "relative",
      }}
      elevation={2}
    >
      <Stack sx={{ py: 1, px: 2, alignItems: "center" }} direction={"row"} gap={1}>
        <SettingsIcon />
        <Typography fontWeight={"bolder"}>Settings</Typography>
        <Box flexGrow={1} />
        <IconButton onClick={onClose}>
          <Close />
        </IconButton>
      </Stack>
      <Divider />
      <Stack direction={"row"} sx={{ flexGrow: 1, overflow: "auto" }}>
        {/*TODO: Holy moly, the CSS here needs to be changed a bit*/}
        <Tabs
          orientation="vertical"
          variant="scrollable"
          value={tabIndex}
          onChange={handleTabChange}
          sx={{ borderRight: 1, borderColor: "divider", position: "absolute" }}
        >
          {tabs.map(({ label }, index) => (
            <Tab label={label} key={index} tabIndex={index} sx={{ textTransform: "none" }} />
          ))}
        </Tabs>
        <Box sx={{ marginLeft: "90px" }}>{displayedTab}</Box>
      </Stack>
      <Divider />
      <Stack sx={{ px: 2, py: 1, flexDirection: "row", alignItems: "center" }}>
        <PromotionFooter />
        <Box flexGrow={1} />
        <Stack direction={"row"} alignItems={"center"} gap={2}>
          <IconButton onClick={() => onOpacityChange(MIN_OPACITY)}>
            <VisibilityOff />
          </IconButton>
          <Slider
            value={opacity}
            onChange={(_, v) => onOpacityChange(v as number)}
            step={5}
            min={MIN_OPACITY}
            max={MAX_OPACITY}
            valueLabelFormat={(value: number) => `${value}%`}
            sx={{ width: "12em" }}
            valueLabelDisplay={"auto"}
          />
          <IconButton onClick={() => onOpacityChange(MAX_OPACITY)}>
            <Visibility />
          </IconButton>
        </Stack>
      </Stack>
    </Paper>
  );
}

function ReplayCursorSettingsSection() {
  const { replayCursorSettingsStore } = useCommonManagers();
  const settings = useObservable(() => replayCursorSettingsStore.settings$, DEFAULT_REPLAY_CURSOR_SETTINGS);

  return (
    <Paper sx={{ boxShadow: "none", p: 2 }}>
      <Stack gap={1}>
        <Typography variant={"h6"}>Replay Cursor</Typography>
        <FormGroup>
          <FormControlLabel
            control={
              <Switch
                checked={settings.enabled}
                onChange={(event) =>
                  replayCursorSettingsStore.changeSettings((s) => (s.enabled = event.target.checked))
                }
              />
            }
            label={"Enabled"}
          />
        </FormGroup>
        <FormGroup>
          <FormControlLabel
            disabled={!settings.enabled}
            control={
              <Switch
                checked={settings.smoothCursorTrail}
                onChange={(event) =>
                  replayCursorSettingsStore.changeSettings((s) => (s.smoothCursorTrail = event.target.checked))
                }
              />
            }
            label={"Smooth Cursor Trail"}
          />
        </FormGroup>
        <Typography>Scale</Typography>
        <Slider
          value={Math.round(settings.scale * 100)}
          valueLabelFormat={formatToPercent}
          disabled={!settings.enabled}
          min={10}
          max={200}
          onChange={(_, v) => replayCursorSettingsStore.changeSettings((s) => (s.scale = (v as number) / 100))}
          valueLabelDisplay={"auto"}
        />
      </Stack>
    </Paper>
  );
}

export default function ArtifactLevelSlider({ levelLow, levelHigh, setLow, setHigh, setBoth, dark = false, disabled = false, showLevelText = false }: {
  levelLow: number,
  levelHigh: number,
  setLow: (low: number) => void,
  setHigh: (high: number) => void,
  setBoth: (low: number, high: number) => void,
  dark?: boolean,
  disabled?: boolean,
  showLevelText?: boolean,
}) {
  const [sliderLow, setsliderLow] = useState(levelLow)
  const [sliderHigh, setsliderHigh] = useState(levelHigh)
  const setSlider = useCallback(
    (e: unknown, value: number | number[]) => {
      if (typeof value == "number") throw new TypeError()
      const [l, h] = value
      setsliderLow(l)
      setsliderHigh(h)
    },
    [setsliderLow, setsliderHigh])
  useEffect(() => setsliderLow(levelLow), [setsliderLow, levelLow])

  useEffect(() => setsliderHigh(levelHigh), [setsliderHigh, levelHigh])
  return <Card sx={{ width: "100%", display: "flex", alignItems: "center", bgcolor: dark ? "contentDark.main" : "contentLight.main" }}>
    <CustomNumberInput
      value={sliderLow}
      onChange={val => setLow(clamp(val, 0, levelHigh))}
      sx={{ px: 1, pl: showLevelText ? 2 : undefined, width: showLevelText ? 100 : 50, }}
      inputProps={{ sx: { textAlign: "center" } }}
      startAdornment={showLevelText ? "Level: " : undefined}
      disabled={disabled}
    />
    <Slider sx={{ width: 100, flexGrow: 1, mx: 2 }}
      getAriaLabel={() => 'Arifact Level Range'}
      value={[sliderLow, sliderHigh]}
      onChange={setSlider}
      onChangeCommitted={(e, value) => setBoth(value[0], value[1])}
      valueLabelDisplay="auto"
      min={0} max={20} step={1} marks
      disabled={disabled}
    />
    <CustomNumberInput
      value={sliderHigh}
      onChange={val => setHigh(clamp(val, levelLow, 20))}
      sx={{ px: 1, width: 50, }}
      inputProps={{ sx: { textAlign: "center" } }}
      disabled={disabled}
    />
  </Card>
}

export function SimulationController(props: {
    contract: ContractModel;
    engine: DiagramEngine;
    hide: () => void;
}) {
    const theme = useTheme();
    const dispatch = useDispatch();
    const network = useSelector(selectNetwork);
    // Start at 0 to make scaling work riht away
    const [min_time_ms, setMinTimeMs] = React.useState(Date.now());
    const [max_time_ms, setMaxTimeMs] = React.useState(
        Date.now() + 365 * 24 * 60 * 60 * 1000
    );
    const pct_to_value = (p: number, max: number, min: number) =>
        Math.round((max - min) * (p / 100.0) + min);
    const [first_tx_time_ms, setFirstTxTime] = React.useState(
        pct_to_value(33, max_time_ms, min_time_ms)
    );
    const [current_time_ms, setCurrentTxTime] = React.useState(
        pct_to_value(50, max_time_ms, min_time_ms)
    );
    const is_regtest = network === 'Regtest' || network === 'Signet';
    const current_year = Math.round(
        (new Date().getFullYear() - 2008) * 144 * 365 - (144 * 365) / 2
    );
    const [min_blocks, setMinBlocks] = React.useState(
        is_regtest ? 100 : current_year
    );
    const [max_blocks, setMaxBlocks] = React.useState(
        is_regtest ? 1000 : current_year + 365 * 144
    );
    const [first_tx_block, setFirstTxBlockPct] = React.useState(
        pct_to_value(33, max_blocks, min_blocks)
    );
    const [current_block, setCurrentBlockPct] = React.useState(
        pct_to_value(66, max_blocks, min_blocks)
    );
    const clear = () => {
        dispatch(set_unreachable({}));
    };
    const wrapper =
        (f: (input: HTMLInputElement) => void) => (e: FormEvent) => {
            const input = e.currentTarget as HTMLInputElement;
            f(input);
        };

    const updateMinTime = (e: ChangeEvent<HTMLInputElement>) => {
        setMinTimeMs(Date.parse(e.currentTarget.value) ?? max_time_ms);
    };
    const updateBlocks = (
        e: Event,
        n: number | number[],
        activeThumb: number
    ) => {
        if (typeof n !== 'number') {
            if (n.length === 2) {
                setFirstTxBlockPct(n[0]!);
                setCurrentBlockPct(n[1]!);
            }
        }
    };
    const updateTimes = (
        e: Event,
        n: number | number[],
        activeThumb: number
    ) => {
        if (typeof n !== 'number') {
            if (n.length === 2) {
                setFirstTxTime(n[0]!);
                setCurrentTxTime(n[1]!);
            }
        }
    };
    const updateMaxTime = (e: ChangeEvent<HTMLInputElement>) => {
        setMaxTimeMs(Date.parse(e.currentTarget.value) ?? max_time_ms);
    };
    const updateMinBlocks = wrapper((input: HTMLInputElement) => {
        setMinBlocks(input.valueAsNumber);
    });
    const updateMaxBlocks = wrapper((input: HTMLInputElement) => {
        setMaxBlocks(input.valueAsNumber);
    });
    React.useEffect(() => {
        const unreachable = props.contract.reachable_at_time(
            current_time_ms / 1000,
            current_block,
            first_tx_time_ms / 1000,
            first_tx_block
        );
        const r: Record<TXID, null> = {};
        for (const model of unreachable) {
            r[model.get_txid()] = null;
        }
        dispatch(set_unreachable(r));
    }, [
        first_tx_block,
        first_tx_time_ms,
        max_blocks,
        min_blocks,
        max_time_ms,
        min_time_ms,
        current_time_ms,
        current_block,
    ]);

    const snapBlocks = () => {
        const new_first_tx_block = first_tx_block;
        const new_current_block = current_block;
        if (new_first_tx_block === new_current_block) return;

        let new_start = Math.min(new_first_tx_block, new_current_block);
        // at least one day...
        let new_end = Math.max(
            new_first_tx_block,
            new_current_block,
            new_start + 144
        );
        const delta = Math.abs(new_current_block - new_first_tx_block);
        new_start = Math.max(new_start - delta, 0);
        new_end += delta;

        setMinBlocks(Math.round(new_start));
        setMaxBlocks(Math.round(new_end));
        setFirstTxBlockPct(
            pct_to_value(
                new_current_block > new_first_tx_block ? 33 : 66,
                Math.round(new_end),
                Math.round(new_start)
            )
        );
        setCurrentBlockPct(
            pct_to_value(
                new_current_block > new_first_tx_block ? 66 : 33,
                Math.round(new_end),
                Math.round(new_start)
            )
        );
    };
    const snapTime = () => {
        // work in seconds
        const new_first_tx_time = first_tx_time_ms / 1000;
        const new_current_time = current_time_ms / 1000;
        if (new_first_tx_time === new_current_time) return;

        let new_start = Math.min(new_first_tx_time, new_current_time);
        // at least one day...
        let new_end = Math.max(
            new_first_tx_time,
            new_current_time,
            new_start + 24 * 60 * 60
        );
        const delta = Math.abs(new_current_time - new_first_tx_time);
        new_start -= delta;
        new_end += delta;

        setMinTimeMs(new_start * 1000);
        setMaxTimeMs(new_end * 1000);
        setCurrentTxTime(
            pct_to_value(
                new_current_time > new_first_tx_time ? 66 : 33,
                new_end * 1000,
                new_start * 1000
            )
        );
        setFirstTxTime(
            pct_to_value(
                new_current_time > new_first_tx_time ? 33 : 66,
                new_end * 1000,
                new_start * 1000
            )
        );
    };
    const first_tx_time_str = new Date(first_tx_time_ms).toLocaleString(
        undefined,
        {
            timeZone: 'UTC',
        }
    );
    const current_time_str = new Date(current_time_ms).toLocaleString(
        undefined,
        {
            timeZone: 'UTC',
        }
    );
    const to_time_str = (t: Date) =>
        `${t.getUTCFullYear()}-${t
            .getUTCMonth()
            .toString()
            .padStart(2, '0')}-${t.getUTCDay().toString().padStart(2, '0')}T${t
            .getUTCHours()
            .toString()
            .padStart(2, '0')}:${t
            .getUTCMinutes()
            .toString()
            .padStart(2, '0')}`;
    const max_time_str = to_time_str(new Date(max_time_ms));
    const min_time_str = to_time_str(new Date(min_time_ms));
    const ClockControl = (
        <div className="Controler">
            <div className="ControlerSliders">
                <Slider
                    value={[first_tx_time_ms, current_time_ms]}
                    valueLabelFormat={(value: number, index: number) => {
                        const d = new Date(value);
                        return (
                            <div>
                                <Typography>
                                    {d.toLocaleDateString()}
                                </Typography>
                                <p>{d.toLocaleTimeString()}</p>
                            </div>
                        );
                    }}
                    step={1000}
                    min={min_time_ms}
                    max={max_time_ms}
                    valueLabelDisplay="on"
                    onChange={updateTimes}
                />
            </div>
            <div className="ControlerSettings">
                <h6> Date</h6>
                <TextField
                    label="Start Time"
                    type="datetime-local"
                    defaultValue={min_time_str}
                    onChange={updateMinTime}
                    InputLabelProps={{
                        shrink: true,
                    }}
                />
                <TextField
                    label="End Time"
                    type="datetime-local"
                    defaultValue={max_time_str}
                    onChange={updateMaxTime}
                    InputLabelProps={{
                        shrink: true,
                    }}
                />

                <Tooltip title="Click to Snap Time">
                    <IconButton aria-label="snap-time" onClick={snapTime}>
                        <MoreHorizOutlinedIcon style={{ color: green[500] }} />
                    </IconButton>
                </Tooltip>
            </div>
        </div>
    );

    const BlockControl = (
        <div className="Controler">
            <div className="ControlerSliders">
                <Slider
                    value={[first_tx_block, current_block]}
                    min={min_blocks}
                    max={max_blocks}
                    valueLabelDisplay="on"
                    onChange={updateBlocks}
                />
            </div>
            <div className="ControlerSettings">
                <h6> Height</h6>
                <div>
                    <TextField
                        label="Start Height"
                        value={min_blocks}
                        type="number"
                        onChange={updateMinBlocks}
                    />
                </div>
                <div>
                    <TextField
                        label="End Height"
                        value={max_blocks}
                        type="number"
                        onChange={updateMaxBlocks}
                    />
                </div>

                <Tooltip title="Click to Snap Blocks">
                    <IconButton aria-label="snap-blocks" onClick={snapBlocks}>
                        <MoreHorizOutlinedIcon style={{ color: green[500] }} />
                    </IconButton>
                </Tooltip>
            </div>
        </div>
    );
    return (
        <form
            onSubmit={(e: React.FormEvent) => e.preventDefault()}
            className="Simulation"
            style={{
                backgroundColor: Color(theme.palette.background.default)
                    .fade(0.2)
                    .toString(),
            }}
        >
            <Tooltip title="Close Simulator">
                <IconButton aria-label="close-sim" onClick={props.hide}>
                    <CancelOutlinedIcon style={{ color: red[500] }} />
                </IconButton>
            </Tooltip>
            <Tooltip title="Hide Simulator Results">
                <IconButton aria-label="hide-sim" onClick={clear}>
                    <VisibilityOffOutlinedIcon style={{ color: pink[500] }} />
                </IconButton>
            </Tooltip>
            <div className="Controlers">
                {BlockControl}
                {ClockControl}
            </div>
        </form>
    );
}

Theme: React.FC = () => {
  const [theme, setTheme] = React.useState<ThemeSetting>(
    authDefaultData.theme as ThemeSetting,
  );
  const [darkSettings, setDarkSettings] = useState<DarkThemeSettings>(
    {} as DarkThemeSettings,
  );

  const handleThemeTypeChange = (
    val: ThemeType,
    darkSettings: DarkThemeSettings,
  ) => {
    setTheme({ ...theme, darkSettings, type: val });
    switch (val) {
      case 'system':
        auto({});
        break;
      case 'light':
        disable();
        break;
      case 'dark':
        enable(darkSettings);
        break;
    }
    updateUserThemeSetting({
      ...theme,
      darkSettings,
      type: val,
    });
  };

  const handleDarkThemeSettingChange = (name: string, val: number) => {
    const darkSettings = { ...theme.darkSettings, [name]: val };
    setTheme({
      ...theme,
      darkSettings,
    });
    setDarkSettings(darkSettings);
    handleThemeTypeChange(theme.type, darkSettings);
  };

  useEffect(() => {
    getUserThemeSetting().then((res) => {
      setTheme(res);
      res?.darkSettings && setDarkSettings({ ...res.darkSettings });
      console.log(res);
    });
  }, []);

  const renderDarkSliders = () => {
    const {
      brightness = 100,
      contrast = 100,
      grayscale = 0,
      sepia = 0,
    } = darkSettings;

    const sliders = [
      {
        title: '亮度',
        desc: '设置深色模式亮度',
        value: brightness,
        min: 30,
        max: 100,
        onChange: (e: Event, val: number) =>
          handleDarkThemeSettingChange('brightness', val as number),
      },
      {
        title: '对比度',
        desc: '设置深色模式对比度',
        value: contrast,
        min: 40,
        max: 100,
        onChange: (e: Event, val: number) =>
          handleDarkThemeSettingChange('contrast', val as number),
      },
      {
        title: '灰度',
        desc: '设置深色模式灰度',
        value: grayscale,
        min: 0,
        max: 100,
        onChange: (e: Event, val: number) =>
          handleDarkThemeSettingChange('grayscale', val as number),
      },
      {
        title: '色相',
        desc: '设置深色模式色相',
        value: sepia,
        min: 0,
        max: 100,
        onChange: (e: Event, val: number) =>
          handleDarkThemeSettingChange('sepia', val as number),
      },
    ];

    return sliders.map((item, index) => (
      <ItemCard
        title={item.title}
        desc={item.desc}
        key={index}
        action={
          <Slider
            style={{ width: '100px' }}
            valueLabelDisplay="auto"
            min={item.min}
            max={item.max}
            value={item.value}
            onChange={(e, val) => item.onChange(e, val as number)}
          />
        }
      />
    ));
  };

  return (
    <div>
      <ContentList>
        <ContentTitle title="基础设置" />
        <ItemCard
          title="整体外观"
          desc="适用于首页、导航页、设置页的样式"
          action={
            <Select
              label="整体外观"
              options={[
                {
                  label: '跟随系统',
                  value: 'system',
                },
                {
                  label: '浅色',
                  value: 'light',
                },
                {
                  label: '深色',
                  value: 'dark',
                },
              ]}
              value={theme.type}
              onChange={(e) =>
                handleThemeTypeChange(e.target.value, theme.darkSettings)
              }
              size="small"
            />
          }
        />
        <ContentTitle title="深色模式详细设置" />
        {/* <ItemCard
          title="自动开启"
          desc="设置是否自动开启深色模式"
          action={<Switch />}
        /> */}
        {/* <ItemAccordion
          title="定时开启深色模式"
          desc="设置是否定时开启深色模式"
          action={
            <Select
              label="定时开启"
              value={'time'}
              size="small"
              options={[
                {
                  label: '日出日落模式',
                  value: 'sunrise',
                },
                {
                  label: '自定义时间',
                  value: 'time',
                },
              ]}
            />
          }
        >
          <ContentList>
            <ItemCard title="开始时间" desc="自定义设置深色模式开启时间" />
            <ItemCard title="关闭时间" desc="自定义设置深色模式关闭时间" />
          </ContentList>
        </ItemAccordion> */}
        {renderDarkSliders()}
      </ContentList>
    </div>
  );
}