@mui/system#useTheme TypeScript Examples

function TabEquip() {
  const { t } = useTranslation("page_character")
  const { teamData, data, character, character: { equippedWeapon, key: characterKey, equippedArtifacts }, characterSheet, mainStatAssumptionLevel } = useContext(DataContext)
  const { weaponSheet } = teamData[characterKey]!
  const [weaponId, setweaponId] = useState("")
  const showWeapon = useCallback(() => setweaponId(equippedWeapon), [equippedWeapon],)
  const hideWeapon = useCallback(() => setweaponId(""), [])

  //triggers when character swap weapons
  useEffect(() => {
    if (weaponId && weaponId !== equippedWeapon)
      setweaponId(equippedWeapon)
  }, [weaponId, equippedWeapon])

  const { database } = useContext(DatabaseContext)
  const artifactSheets = usePromise(ArtifactSheet.getAll, [])

  // TODO: We can also listen only to equipped artifacts
  const [, updateArt] = useForceUpdate()
  useEffect(() => database.followAnyArt(updateArt))

  const hasEquipped = useMemo(() => !!Object.values(equippedArtifacts).filter(i => i).length, [equippedArtifacts])
  const unequipArts = useCallback(() => {
    if (!character) return
    if (!window.confirm("Do you want to move all currently equipped artifacts to inventory?")) return
    database.equipArtifacts(character.key, objectKeyMap(allSlotKeys, _ => ""))
  }, [character, database])
  const setEffects = useMemo(() => artifactSheets && ArtifactSheet.setEffects(artifactSheets, data), [artifactSheets, data])

  const theme = useTheme();
  const grxl = useMediaQuery(theme.breakpoints.up('xl'));
  const artifactFields = useMemo(() => artifactSheets && setEffects && Object.entries(setEffects).map(([setKey, setNumKeyArr]) =>
    <CardLight key={setKey} sx={{ flexGrow: 1, }} >
      <CardContent >
        <Grid container spacing={1} flexDirection="column" height="100%" >
          <Grid item display="flex" flexDirection="column" gap={2}>
            {setNumKeyArr.map(setNumKey => <SetEffectDisplay key={setKey + setNumKey} setKey={setKey} setNumKey={setNumKey} />)}
          </Grid>
        </Grid>
      </CardContent>
    </CardLight>), [artifactSheets, setEffects])
  const weaponDoc = useMemo(() => weaponSheet.document.length > 0 && <CardLight><CardContent><DocumentDisplay sections={weaponSheet.document} /></CardContent></CardLight>, [weaponSheet])
  return <Box display="flex" flexDirection="column" gap={1}>
    <Suspense fallback={false}>
      <WeaponEditor
        weaponId={weaponId}
        footer
        onClose={hideWeapon}
        extraButtons={<LargeWeaponSwapButton weaponTypeKey={characterSheet.weaponTypeKey} />}
      />
    </Suspense>
    <CardLight >
      <CardContent>
        <StatDisplayComponent />
      </CardContent>
    </CardLight>
    <Grid container spacing={1}>
      {grxl && <Grid item xs={12} md={12} xl={3} sx={{ display: "flex", flexDirection: "column", gap: 1 }} >
        {weaponDoc}
        {hasEquipped && <Button color="error" onClick={unequipArts} fullWidth>{t`tabEquip.unequipArts`}</Button>}
        {artifactFields}
      </Grid>}
      <Grid item xs={12} md={12} xl={9} container spacing={1}>
        <Grid item xs={12} sm={6} md={4} display="flex" flexDirection="column" gap={1}>
          <WeaponCard weaponId={equippedWeapon} onEdit={showWeapon} canEquip extraButtons={<WeaponSwapButton weaponTypeKey={characterSheet.weaponTypeKey} />} />
        </Grid>
        {allSlotKeys.map(slotKey => <Grid item xs={12} sm={6} md={4} key={slotKey} >
          {!!data.get(input.art[slotKey].id).value ?
            <ArtifactCard artifactId={data.get(input.art[slotKey].id).value} mainStatAssumptionLevel={mainStatAssumptionLevel}
              extraButtons={<ArtifactSwapButton slotKey={slotKey} />} editor canExclude canEquip /> :
            <ArtSwapCard slotKey={slotKey} />}
        </Grid>)}
      </Grid>
      {!grxl && <Grid item xs={12} md={12} xl={3} container spacing={1} >
        <Grid item xs={12} md={6} lg={4}>{weaponDoc}</Grid>
        <Grid item xs={12} md={6} lg={4}>{artifactFields}</Grid>
      </Grid>}
    </Grid>
  </Box>
}

export default function CharacterTalentPane() {
  const { data, character, characterSheet } = useContext(DataContext)
  const characterDispatch = useCharacterReducer(character.key)
  const skillBurstList = [["auto", "Normal/Charged Attack"], ["skill", "Elemental Skill"], ["burst", "Elemental Burst"]] as [TalentSheetElementKey, string][]
  const passivesList: [tKey: TalentSheetElementKey, tText: string, asc: number][] = [["passive1", "Unlocked at Ascension 1", 1], ["passive2", "Unlocked at Ascension 4", 4], ["passive3", "Unlocked by Default", 0]]
  const charEle = data.get(input.charEle).value as ElementKey | undefined
  const ascension = data.get(input.asc).value
  const constellation = data.get(input.constellation).value

  const theme = useTheme();
  const grlg = useMediaQuery(theme.breakpoints.up('lg'));
  const constellationCards = useMemo(() => range(1, 6).map(i =>
    <SkillDisplayCard
      talentKey={`constellation${i}` as TalentSheetElementKey}
      subtitle={`Constellation Lv. ${i}`}
      onClickTitle={() => characterDispatch({ constellation: i === constellation ? i - 1 : i })}
    />), [constellation, characterDispatch])
  return <>
    <ReactionDisplay />
    <Grid container spacing={1}>
      {/* constellations for 4column */}
      {grlg && <Grid item xs={12} md={12} lg={3} sx={{ display: "flex", flexDirection: "column", gap: 1 }} >
        <CardLight><CardContent><Typography variant="h6" sx={{ textAlign: "center" }}>Constellation Lv. {constellation}</Typography></CardContent></CardLight>
        {constellationCards.map((c, i) => <Box key={i} sx={{ opacity: constellation >= (i + 1) ? 1 : 0.5 }} >{c}</Box>)}
      </Grid>}
      <Grid item xs={12} md={12} lg={9} container spacing={1} >
        {/* auto, skill, burst */}
        {skillBurstList.map(([tKey, tText]) =>
          <Grid item key={tKey} {...talentSpacing} >
            <SkillDisplayCard
              talentKey={tKey}
              subtitle={tText}
            />
          </Grid>)}
        {!!characterSheet.getTalentOfKey("sprint", charEle) && <Grid item {...talentSpacing} >
          <SkillDisplayCard
            talentKey="sprint"
            subtitle="Alternative Sprint"
          />
        </Grid>}
        {!!characterSheet.getTalentOfKey("passive", charEle) && <Grid item {...talentSpacing} >
          <SkillDisplayCard
            talentKey="passive"
            subtitle="Passive"
          />
        </Grid>}
        {/* passives */}
        {passivesList.map(([tKey, tText, asc]) => {
          let enabled = ascension >= asc
          if (!characterSheet.getTalentOfKey(tKey, charEle)) return null
          return <Grid item key={tKey} style={{ opacity: enabled ? 1 : 0.5 }} {...talentSpacing} >
            <SkillDisplayCard
              talentKey={tKey}
              subtitle={tText}
            />
          </Grid>
        })}
      </Grid>
      {/* constellations for < 4 columns */}
      {!grlg && <Grid item xs={12} md={12} lg={3} container spacing={1} >
        <Grid item xs={12}>
          <CardLight><CardContent><Typography variant="h6" sx={{ textAlign: "center" }}>Constellation Lv. {constellation}</Typography></CardContent></CardLight>
        </Grid>
        {constellationCards.map((c, i) => <Grid item key={i} sx={{ opacity: constellation >= (i + 1) ? 1 : 0.5 }} {...talentSpacing} >{c}</Grid>)}
      </Grid>}
    </Grid>
  </>
}