@mui/icons-material#Settings TypeScript Examples

links = [
  {
    label: 'General',
    items: [
      { label: 'Home', link: '/', icon: <HomeOutlined />, iconOn: <Home /> },
      {
        label: 'All stats',
        link: '/all',
        icon: <BarChartOutlined />,
        iconOn: <BarChart />,
      },
    ],
  },
  {
    label: 'Tops',
    items: [
      {
        label: 'Top songs',
        link: '/top/songs',
        icon: <MusicNoteOutlined />,
        iconOn: <MusicNote />,
      },
      {
        label: 'Top artists',
        link: '/top/artists',
        icon: <PersonOutlined />,
        iconOn: <Person />,
      },
      {
        label: 'Top albums',
        link: '/top/albums',
        icon: <AlbumOutlined />,
        iconOn: <Album />,
      },
    ],
  },
  {
    label: 'With people',
    items: [
      {
        label: 'Affinity',
        link: '/collaborative/affinity',
        icon: <MusicNoteOutlined />,
        iconOn: <MusicNote />,
      },
    ],
  },
  {
    label: 'Settings',
    items: [
      {
        label: 'Share this page',
        link: '/share',
        icon: <ShareOutlined />,
        iconOn: <Share />,
      },
      {
        label: 'Settings',
        link: '/settings',
        icon: <SettingsOutlined />,
        iconOn: <Settings />,
      },
      {
        label: 'Logout',
        link: '/logout',
        icon: <ExitToApp />,
        iconOn: <ExitToApp />,
      },
    ],
  },
]

function SettingsButton() {
  const { onSettingsModalOpenChange } = useSettingsModalContext();
  return (
    <IconButton onClick={() => onSettingsModalOpenChange(true)} onFocus={ignoreFocus}>
      <Settings />
    </IconButton>
  );
}

export default function UseEquipped({ useEquippedArts, buildSettingsDispatch, disabled }) {
  const { t } = useTranslation("page_character")
  const { character: { key: characterKey } } = useContext(DataContext)
  const { database } = useContext(DatabaseContext)
  const [show, onOpen, onClose] = useBoolState(false)
  const [{ equipmentPriority: tempEquipmentPriority }, setOptimizeDBState] = useOptimizeDBState()
  //Basic validate for the equipmentPrio list to remove dups and characters that doesnt exist.
  const equipmentPriority = useMemo(() => [...new Set(tempEquipmentPriority)].filter(ck => database._getChar(ck)), [database, tempEquipmentPriority])
  const setPrio = useCallback((equipmentPriority: CharacterKey[]) => setOptimizeDBState({ equipmentPriority }), [setOptimizeDBState])

  const setPrioRank = useCallback((fromIndex, toIndex) => {
    const arr = [...equipmentPriority]
    var element = arr[fromIndex];
    arr.splice(fromIndex, 1);
    arr.splice(toIndex, 0, element);
    setPrio(arr)
  }, [equipmentPriority, setPrio])
  const removePrio = useCallback((fromIndex) => {
    const arr = [...equipmentPriority]
    arr.splice(fromIndex, 1)
    setPrio(arr)
  }, [equipmentPriority, setPrio])
  const addPrio = useCallback((ck: CharacterKey) => setPrio([...equipmentPriority, ck]), [equipmentPriority, setPrio])
  const resetPrio = useCallback(() => setPrio([]), [setPrio])

  const numAbove = useMemo(() => {
    let numAbove = equipmentPriority.length
    const index = equipmentPriority.indexOf(characterKey)
    if (index >= 0) numAbove = index
    return numAbove
  }, [characterKey, equipmentPriority])
  const numUseEquippedChar = useMemo(() => {
    return database._getCharKeys().length - 1 - numAbove
  }, [numAbove, database])
  const numUnlisted = useMemo(() => {
    return database._getCharKeys().length - equipmentPriority.length
  }, [equipmentPriority, database])

  return <Box display="flex" gap={1}>
    <ModalWrapper open={show} onClose={onClose} containerProps={{ maxWidth: "sm" }}><CardDark>
      <CardContent>
        <Grid container spacing={1}>
          <Grid item flexGrow={1}>
            <Typography variant="h6"><Trans t={t} i18nKey="tabOptimize.useEquipped.modal.title">Character Priority for Equipped Artifacts</Trans></Typography>
          </Grid>
          <Grid item sx={{ mb: -1 }}>
            <CloseButton onClick={onClose} />
          </Grid>
        </Grid>
      </CardContent>
      <Divider />
      <CardContent>
        <CardLight sx={{ mb: 1 }}>
          <CardContent>
            <Typography gutterBottom><Trans t={t} i18nKey="tabOptimize.useEquipped.modal.desc1">When generating a build, the Optimizer will only consider equipped artifacts from characters below the current character or those not on the list.</Trans></Typography>
            <Typography gutterBottom><Trans t={t} i18nKey="tabOptimize.useEquipped.modal.desc2">If the current character is not on the list, the Optimizer will only consider equipped artifacts from others characters that are not on the list.</Trans></Typography>
          </CardContent>
        </CardLight>
        <Box display="flex" flexDirection="column" gap={2}>
          {equipmentPriority.map((ck, i) =>
            <SelectItem key={ck} characterKey={ck} rank={i + 1} maxRank={equipmentPriority.length} setRank={(num) => num && setPrioRank(i, num - 1)} onRemove={() => removePrio(i)} numAbove={numAbove} />)}
          <Box sx={{ display: "flex", gap: 1 }}>
            <NewItem onAdd={addPrio} list={equipmentPriority} />
            <Button color="error" onClick={resetPrio} startIcon={<Replay />}><Trans t={t} i18nKey="tabOptimize.useEquipped.modal.clearList">Clear List</Trans></Button>
          </Box>
          {!!numUseEquippedChar && <SqBadge color="success"><Typography><Trans t={t} i18nKey="tabOptimize.useEquipped.modal.usingNum" count={numUnlisted}>Using artifacts from <strong>{{ count: numUnlisted }}</strong> unlisted characters</Trans></Typography></SqBadge>}
        </Box>
      </CardContent>
    </CardDark ></ModalWrapper>
    <ButtonGroup sx={{ display: "flex", width: "100%" }}>
      <Button sx={{ flexGrow: 1 }} onClick={() => buildSettingsDispatch({ useEquippedArts: !useEquippedArts })} disabled={disabled} startIcon={useEquippedArts ? <CheckBox /> : <CheckBoxOutlineBlank />} color={useEquippedArts ? "success" : "secondary"}>
        <Box>
          <span><Trans t={t} i18nKey="tabOptimize.useEquipped.title">Use Equipped Artifacts</Trans></span>
          {useEquippedArts && <SqBadge><Trans t={t} i18nKey="tabOptimize.useEquipped.usingNum" count={numUseEquippedChar}>Using from <strong>{{ count: numUseEquippedChar }}</strong> characters</Trans></SqBadge>}
        </Box>
      </Button>
      {useEquippedArts && <Button sx={{ flexShrink: 1 }} color="info" onClick={onOpen}><Settings /></Button>}
    </ButtonGroup>
  </Box>
}

export default function AdminLayout({ children }: Props) {
  const theme = useTheme()

  const initialOpen = useMemo<boolean>(() => {
    const item = typeof window !== 'undefined' ? window.localStorage.getItem('menu-open') : false
    if (item) {
      return Boolean(JSON.parse(item))
    }
    return false
  }, [])

  const [open, setOpen] = useState<boolean>(initialOpen)

  useEffect(() => {
    if (typeof window !== 'undefined') {
      window.localStorage.setItem('menu-open', JSON.stringify(open))
    }
  }, [open])

  const toggleMenu = useCallback(() => setOpen((open) => !open), [])
  return (
    <StyledBox className={classes.wrapper}>
      <AdminAppBar isOpen={open}>
        <Box className={classes.appbarHeader}>
          <Box sx={{ display: 'flex', alignItems: 'center' }}>
            <IconButton>
              <Notifications color="info" />
            </IconButton>
            <PrivateMenu />
          </Box>
        </Box>
      </AdminAppBar>
      <Drawer variant="permanent" open={open} theme={theme}>
        <DrawerHeader />
        <List sx={{ p: '2rem .5rem', height: '100%', position: 'relative' }}>
          {items.map(({ items, menu, icon }, index) => (
            <HoverMenu isOpen={open} key={index} menu={menu} icon={icon} items={items} />
          ))}
          <CustomListItem icon={open ? <MenuOpen /> : <ChevronRight />} onClick={toggleMenu} />
          <CustomListItem
            icon={<Settings />}
            label={'Настройки'}
            sx={{ position: 'absolute', bottom: '1rem' }}
          />
        </List>
      </Drawer>

      <Box component="main" sx={{ flexGrow: 1 }}>
        <DrawerHeader />
        {children}
      </Box>
      <PanelFooter>
        <Button sx={{ color: 'white' }}>
          <GppGood />
        </Button>
        <Typography color="white">{'Вие сте логнат като администратор'}</Typography>
      </PanelFooter>
      <Snackbar />
    </StyledBox>
  )
}

export default function IntervalSelector({
  value,
  onChange,
  selectType,
  forceTiny,
}: IntervalSelectorProps) {
  const upmd = !useMediaQuery('(max-width: 1250px)') && !forceTiny;
  const [open, setOpen] = useState(false);
  const [customIntervalDate, setCustomIntervalDate] = useState<Range>({
    key: 'range',
    startDate: cloneDate(lastWeek),
    endDate: cloneDate(now),
    color: '#000000',
  });

  const existingInterval = useMemo(() => getAllIndexFromIntervalDetail(value), [value]);

  const internOnChange = useCallback(
    (index: number) => {
      if (index === -1) {
        setOpen(true);
      } else {
        onChange(allIntervals[index]);
      }
    },
    [onChange],
  );

  let content: React.ReactNode;

  if (!upmd) {
    content = (
      <Select
        variant={selectType}
        value={existingInterval}
        onChange={(ev) => internOnChange(ev.target.value as number)}>
        {allIntervals.map((inter, index) => (
          <MenuItem key={inter.name} value={index}>
            {inter.name}
          </MenuItem>
        ))}
        <MenuItem value={-1} onClick={() => setOpen(true)}>
          Custom
        </MenuItem>
      </Select>
    );
  } else {
    content = (
      <div className={s.radiogroup}>
        <RadioGroup
          row
          value={existingInterval}
          onChange={(ev) => internOnChange(ev.target.value as unknown as number)}
          name="interval radio group">
          {allIntervals.map((inter, index) => (
            <FormControlLabel
              key={inter.name}
              value={index}
              control={<Radio />}
              label={<Text>{inter.name}</Text>}
            />
          ))}
        </RadioGroup>
        <IconButton size="small" onClick={() => setOpen(true)}>
          <Settings style={{ color: existingInterval === -1 ? '#000000' : undefined }} />
        </IconButton>
      </div>
    );
  }

  const onCustomChange = useCallback((a: RangeKeyDict) => {
    setCustomIntervalDate(a.range);
  }, []);

  const goodRange = useMemo(
    () => Boolean(customIntervalDate.startDate && customIntervalDate.endDate),
    [customIntervalDate.endDate, customIntervalDate.startDate],
  );

  const setCustom = useCallback(() => {
    if (!customIntervalDate.startDate || !customIntervalDate.endDate) {
      return;
    }
    onChange({
      type: 'custom',
      name: 'custom',
      interval: {
        start: startOfDay(customIntervalDate.startDate),
        end: endOfDay(customIntervalDate.endDate),
        timesplit: getAppropriateTimesplitFromRange(
          customIntervalDate.startDate,
          customIntervalDate.endDate,
        ),
      },
    });
    setOpen(false);
  }, [customIntervalDate, onChange]);

  return (
    <>
      {content}
      <Dialog title="Custom date range" open={open} onClose={() => setOpen(false)}>
        <div className={s.dialogcontent}>
          <div>
            <DateRangePicker ranges={[customIntervalDate]} onChange={onCustomChange} />
          </div>
          <Button variant="contained" onClick={setCustom} disabled={!goodRange}>
            Apply
          </Button>
        </div>
      </Dialog>
    </>
  );
}

EngineSelectPopper: FC<EngineSelectPopperProps> = (props) => {
  const {
    width = 300,
    anchorEl,
    open = false,
    onBtnClick,
    onEngineSelect,
    engine,
  } = props;
  const [classifyEngineList, setClassifyEngineList] = useState<
    SearchEngineClassifyWithChildren[]
  >([]);
  const [selected, setSelected] = useState<string>('');
  const [engineList, setEngineList] = React.useState([] as SearchEngine[]);

  const getClassifyEngine = () => {
    getClassifyEngineListApi().then((res) => {
      const current = {
        ...engine.engine,
        classifyId: engine.engine?.classify?._id,
      } as SearchEngine;
      let filterEngines = res
        .map((i) => i.children)
        .flat()
        .filter((u) => u._id !== engine.engine?._id)
        .slice(0, engine.indexCount - 1);
      if (engine.sortType === 'count') {
        filterEngines = filterEngines.sort((r, t) => t.count - r.count);
      }
      setEngineList([current, ...filterEngines]);
      setClassifyEngineList(res);
      res.length > 0 && setSelected(res[0]._id);
    });
  };

  useEffect(() => {
    if (engine?.engine?.classify?._id) {
      setSelected(engine?.engine?.classify?._id);
    }
    getClassifyEngine();
  }, [engine]);

  return (
    <div className="mb-1">
      <Popper open={open} anchorEl={anchorEl} placement="top">
        {({ TransitionProps }) => (
          <Card
            {...TransitionProps}
            style={{ width: `${anchorEl?.clientWidth}px` }}
            className="mb-1"
          >
            <div className="p-2 flex gap-2 items-start">
              <div className="max-h-20 overflow-y-auto pr-1">
                {classifyEngineList.map((item) => (
                  <div
                    key={item._id}
                    onClick={() => {
                      setSelected(item._id);
                    }}
                    className={classnames(
                      'px-1.5 py-0.5 cursor-pointer rounded text-sm',
                      selected === item._id
                        ? 'bg-primary text-white'
                        : 'bg-white',
                    )}
                  >
                    {item.name}
                  </div>
                ))}
              </div>
              <div className="flex gap-1 items-start justify-start flex-grow">
                {classifyEngineList
                  .filter((i) => i._id === selected)?.[0]
                  ?.children.map((i) => (
                    <div
                      className={classnames(
                        'px-1.5 py-0.5 cursor-pointer rounded text-sm',
                        engine?.engine?._id === i._id
                          ? 'bg-primary text-white'
                          : 'bg-white border',
                      )}
                      onClick={() => {
                        onEngineSelect(i);
                      }}
                    >
                      {i.name}
                    </div>
                  ))}
              </div>
              <IconButton
                onClick={() => {
                  onBtnClick(false);
                }}
                size="small"
              >
                <Close />
              </IconButton>
            </div>
          </Card>
        )}
      </Popper>
      <div className="w-full text-left mb-1 flex justify-start items-center overflow-x-auto">
        {engineList.map((i, j) => (
          <Chip
            key={j}
            className={classnames(
              'mx-1',
              i._id === engine?.engine?._id
                ? 'bg-primary text-white'
                : 'bg-gray-100',
            )}
            size="small"
            label={i.name}
            onClick={(e) => onEngineSelect(i)}
          ></Chip>
        ))}
        {engine.mode === 'custom' && (
          <Chip
            onClick={(e: any) => {
              onBtnClick(!open);
            }}
            className={classnames('mx-1', 'bg-gray-100')}
            size="small"
            label={
              <div className="text-sm flex gap-1 items-center">
                <Settings className="text-base" />
              </div>
            }
          />
        )}
      </div>
    </div>
  );
}

IndexPage: React.FC<PageProps> = (props) => {
  const history = useNavigate();
  const { t, i18n } = useTranslation();
  const logoRef = React.useRef<HTMLDivElement>(null);

  const [bg, setBg] = React.useState<SetBackgroundParams>();

  const [zoom, setZoom] = React.useState<boolean>(false);
  const [logoData, setLogoData] = React.useState<AuthLogo>({
    type: 'clock',
    show: true,
  } as AuthLogo);
  const [navigationData, setNavigationData] = React.useState<Navigation>(
    {} as Navigation,
  );
  const [navOpen, setNavOpen] = React.useState(false);
  const [indexSetting, setIndexSetting] = useState<IndexPageSetting>(
    {} as IndexPageSetting,
  );
  const [weather, setWeather] = useState<SaveWeatherData>(
    {} as SaveWeatherData,
  );

  // 获取并设置logo
  const setLogoSetting = () => {
    const id = localStorage.getItem('account');
    if (!id) return;
    const logoData = getAuthDataByKey(id, 'logo');
    setLogoData(logoData);
  };

  // 渲染时钟样式logo
  const renderClockLogo = () => {
    const clockType = logoData?.config?.clock?.type || 'clock1';
    const logo = ClockData.find((i) => i.value === clockType);
    return (
      <div
        className={classNames(
          'delay-75 transform duration-300',
          zoom ? 'scale-50' : 'scale-100',
        )}
      >
        {React.createElement(logo ? logo.component : ClockData[0].component)}
      </div>
    );
  };

  // 获取并设置 导航
  const setNavigationSetting = () => {
    const id = localStorage.getItem('account');
    if (!id) return;
    const navigationData = getAuthDataByKey(id, 'navigation');
    setNavigationData(navigationData);
  };

  const setBackground = () => {
    const user = getAccount();
    const background = user.background;
    if (user && background) {
      switch (background.type) {
        case 'random':
          setTheme(true, 'inverse');
          setBg(user.background.data);
          break;
        case 'everyday':
          setTheme(true, 'inverse');
          latestImg().then((res) => {
            setBg(res.data[0]);
          });
          break;
        case 'link':
          setTheme(true, 'inverse');
          setBg(user.background.data);
          break;
        case 'color':
          setTheme(false);
          break;
      }
    } else {
    }
  };

  const getIndexSetting = () => {
    const userId = localStorage.getItem('account') ?? '';
    const res = getIndexPageSetting(userId);
    const weather = getWeather(userId ?? '');
    setWeather(weather);
    setIndexSetting(res);
  };

  React.useEffect(() => {
    setBackground();
    setLogoSetting();
    setNavigationSetting();
    getIndexSetting();
  }, []);

  return (
    <div
      id="IndexPage"
      className="index-page flex flex-col h-screen bg-cover bg-center bg-secondary"
      style={{
        backgroundImage: bg
          ? `radial-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%), radial-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3) 166%), url('${bg?.url}')`
          : undefined,
      }}
    >
      <div className="index-navbar-box flex flex-grow max-h-12 text-right align-middle">
        {indexSetting?.navBar?.left?.weather?.show && (
          <Weather
            setting={indexSetting?.navBar?.left?.weather}
            weather={weather}
            className={classNames({
              'text-var-main-10': !!bg,
            })}
          />
        )}
        <div className="flex-1"></div>
        <Tooltip title="网址导航">
          <IconButton
            onClick={() => {
              const type = navigationData.type ?? 'page';
              switch (type) {
                case 'drawer':
                  setNavOpen(true);
                  break;
                case 'page':
                default:
                  history('/navigation/*');
                  break;
              }
            }}
          >
            <Bookmarks
              className={classNames({
                'text-var-main-10': !!bg,
              })}
            />
          </IconButton>
        </Tooltip>
        <Tooltip title="设置">
          <IconButton onClick={() => history('/setting')}>
            <Settings
              className={classNames({
                'text-var-main-10': !!bg,
              })}
            />
          </IconButton>
        </Tooltip>
      </div>
      <div
        ref={logoRef}
        className={classNames(
          'index-logo-box items-center flex justify-center transition-all duration-300',
          zoom && logoData.show ? 'grow-0' : 'flex-grow',
          logoData.show ? 'max-h-48 sm:max-h-72' : 'max-h-32',
        )}
        style={{
          height:
            zoom && logoRef && logoRef.current
              ? `${logoRef.current.clientHeight * 0.5}px`
              : '100%',
        }}
      >
        {logoData.show && logoData.type === 'clock' && renderClockLogo()}
      </div>
      <div className="index-input-box flex-grow max-h-20 flex justify-center items-center">
        <SearchInput
          placeholder={t('placeholder.qing-shu-ru-sou-suo-nei-rong')}
        />
      </div>
      <div className="index-content-box flex-grow">
        <Sites />
      </div>
      <div className="index-copyright-box flex-grow max-h-8 text-center leading-8">
        <Copyright />
      </div>
      <NavDrawer open={navOpen} onClose={() => setNavOpen(false)} />
    </div>
  );
}