@mui/icons-material#FavoriteBorder TypeScript Examples
The following examples show how to use
@mui/icons-material#FavoriteBorder.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: CharacterSelectionModal.tsx From genshin-optimizer with MIT License | 6 votes |
|
function CharacterBtn({ onClick, characterKey, characterSheet }: { onClick: () => void, characterKey: CharacterKey, characterSheet: CharacterSheet }) {
const teamData = useTeamData(characterKey)
const { database } = useContext(DatabaseContext)
const characterDispatch = useCharacterReducer(characterKey)
const favorite = database._getChar(characterKey)?.favorite
const { target: data } = teamData?.[characterKey] ?? {}
const rarity = characterSheet.rarity
return <Suspense fallback={<Skeleton variant="rectangular" height={130} />}><Box>
{favorite !== undefined && <Box display="flex" position="absolute" alignSelf="start" zIndex={1}>
<IconButton sx={{ p: 0.5 }} onClick={() => characterDispatch({ favorite: !favorite })}>
{favorite ? <Favorite /> : <FavoriteBorder />}
</IconButton>
</Box>}
<CardActionArea onClick={onClick} >
<CardLight sx={{ display: "flex", alignItems: "center" }} >
<Box component="img" src={characterSheet.thumbImg} sx={{ width: 130, height: "auto" }} className={`grad-${rarity}star`} />
<Box sx={{ pl: 1 }}>
<Typography><strong>{characterSheet.name}</strong></Typography>
{data ? <>
<Typography variant="h6"> {characterSheet.elementKey && StatIcon[characterSheet.elementKey]} <ImgIcon src={Assets.weaponTypes?.[characterSheet.weaponTypeKey]} />{` `}{CharacterSheet.getLevelString(data.get(input.lvl).value, data.get(input.asc).value)}</Typography>
<Typography >
<SqBadge color="success">{`C${data.get(input.constellation).value}`}</SqBadge>{` `}
<SqBadge color={data.get(input.bonus.auto).value ? "info" : "secondary"}><strong >{data.get(input.total.auto).value}</strong></SqBadge>{` `}
<SqBadge color={data.get(input.bonus.skill).value ? "info" : "secondary"}><strong >{data.get(input.total.skill).value}</strong></SqBadge>{` `}
<SqBadge color={data.get(input.bonus.burst).value ? "info" : "secondary"}><strong >{data.get(input.total.burst).value}</strong></SqBadge>
</Typography>
</> : <>
<Typography variant="h6"><SqBadge color="primary">NEW</SqBadge></Typography>
</>}
<small><Stars stars={rarity} colored /></small>
</Box>
</CardLight>
</CardActionArea >
</Box></Suspense>
}
Example #2
| Source File: CharacterCard.tsx From genshin-optimizer with MIT License | 5 votes |
|
export default function CharacterCard({ characterKey, artifactChildren, weaponChildren, characterChildren, onClick, onClickHeader, footer, isTeammateCard }: CharacterCardProps) {
const { teamData: teamDataContext } = useContext(DataContext)
const teamData = useTeamData(teamDataContext ? "" : characterKey) ?? (teamDataContext as TeamData | undefined)
const { character, characterSheet, target: data } = teamData?.[characterKey] ?? {}
const onClickHandler = useCallback(() => characterKey && onClick?.(characterKey, "overview"), [characterKey, onClick])
const actionWrapperFunc = useCallback(
children => <CardActionArea onClick={onClickHandler} sx={{ flexGrow: 1, display: "flex", flexDirection: "column" }}>{children}</CardActionArea>,
[onClickHandler],
)
const characterDispatch = useCharacterReducer(characterKey)
if (!teamData || !character || !characterSheet || !data) return null;
const dataContextObj: dataContextObj = {
character,
data,
characterSheet,
mainStatAssumptionLevel: 0,
teamData,
characterDispatch
}
return <Suspense fallback={<Skeleton variant="rectangular" sx={{ width: "100%", height: "100%", minHeight: 350 }} />}>
<DataContext.Provider value={dataContextObj}>
<CardLight sx={{ height: "100%", display: "flex", flexDirection: "column" }}>
<Box sx={{ display: "flex", position: "absolute", zIndex: 2, opacity: 0.7 }}>
<IconButton sx={{ p: 0.5 }} onClick={event => characterDispatch({ favorite: !character.favorite })}>
{character.favorite ? <Favorite /> : <FavoriteBorder />}
</IconButton>
</Box>
<ConditionalWrapper condition={!!onClick} wrapper={actionWrapperFunc} >
<Header onClick={!onClick ? onClickHeader : undefined} />
<CardContent sx={{ width: "100%", display: "flex", flexDirection: "column", gap: 1, flexGrow: 1 }}>
<Artifacts />
{!isTeammateCard && <Grid container columns={4} spacing={0.75}>
<Grid item xs={1} height="100%">
<WeaponCardPico weaponId={character.equippedWeapon} />
</Grid>
{range(0, 2).map(i => <Grid key={i} item xs={1} height="100%"><CharacterCardPico characterKey={character.team[i]} index={i} /></Grid>)}
</Grid>}
{isTeammateCard && <WeaponFullCard weaponId={character.equippedWeapon} />}
{!isTeammateCard && <Stats />}
{weaponChildren}
{artifactChildren}
{characterChildren}
</CardContent>
</ConditionalWrapper>
{footer}
</CardLight>
</DataContext.Provider>
</Suspense>
}
Example #3
| Source File: TabOverview.tsx From genshin-optimizer with MIT License | 4 votes |
|
export default function TabOverview() {
const { data, characterSheet, character, character: { key: characterKey } } = useContext(DataContext)
const characterDispatch = useCharacterReducer(characterKey)
const navigate = useNavigate()
const { t } = useTranslation("page_character")
const charEle = data.get(input.charEle).value as ElementKey
const weaponTypeKey = characterSheet.weaponTypeKey
const level = data.get(input.lvl).value
const ascension = data.get(input.asc).value
const constellation = data.get(input.constellation).value
const tlvl = {
auto: data.get(input.total.auto).value,
skill: data.get(input.total.skill).value,
burst: data.get(input.total.burst).value,
}
const tBoost = {
auto: data.get(input.bonus.auto).value,
skill: data.get(input.bonus.skill).value,
burst: data.get(input.bonus.burst).value,
}
return <Grid container spacing={1} sx={{ justifyContent: "center" }}>
<Grid item xs={8} sm={5} md={4} lg={2.5} >
{/* Image card with star and name and level */}
<CardLight >
<Box src={characterSheet.cardImg} component="img" width="100%" height="auto" />
<CardContent>
<Typography variant="h5" >
{characterSheet.name}
<ImgIcon sx={{ pr: 0.5 }} src={Assets.weaponTypes?.[weaponTypeKey]} />
{StatIcon[charEle]}
<IconButton sx={{ p: 0.5, mt: -0.5 }} onClick={() => characterDispatch({ favorite: !character.favorite })}>
{character.favorite ? <Favorite /> : <FavoriteBorder />}
</IconButton>
</Typography>
<Typography variant="h6"><Stars stars={characterSheet.rarity} colored /></Typography>
<Typography variant="h5">Lvl. {CharacterSheet.getLevelString(level, ascension)}</Typography>
<CardActionArea sx={{ p: 1 }} onClick={() => navigate("talent")}>
<Grid container spacing={1} mt={-1}>
{(["auto", "skill", "burst"] as TalentSheetElementKey[]).map(tKey =>
<Grid item xs={4} key={tKey}>
<Badge badgeContent={tlvl[tKey]} color={tBoost[tKey] ? "info" : "secondary"}
overlap="circular"
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
sx={{
width: "100%",
height: "100%",
"& > .MuiBadge-badge": {
fontSize: "1.25em",
padding: ".25em .4em",
borderRadius: ".5em",
lineHeight: 1,
height: "1.25em"
}
}}>
<Box component="img" src={characterSheet.getTalentOfKey(tKey, charEle)?.img} width="100%" height="auto" />
</Badge>
</Grid>)}
</Grid>
</CardActionArea>
<Typography sx={{ textAlign: "center", mt: 1 }} variant="h6">{characterSheet.constellationName}</Typography>
<Grid container spacing={1}>
{range(1, 6).map(i =>
<Grid item xs={4} key={i}>
<CardActionArea onClick={() => characterDispatch({ constellation: i === constellation ? i - 1 : i })}>
<Box component="img" src={characterSheet.getTalentOfKey(`constellation${i}` as TalentSheetElementKey, charEle)?.img}
sx={{
...(constellation >= i ? {} : { filter: "brightness(50%)" })
}}
width="100%" height="auto" />
</CardActionArea>
</Grid>)}
</Grid>
<Typography sx={{ textAlign: "center", mt: 1 }} variant="h6">{t("teammates")}</Typography>
<CardActionArea sx={{ p: 1 }} onClick={() => navigate("teambuffs")}>
<Grid container columns={3} spacing={1}>
{range(0, 2).map(i => <Grid key={i} item xs={1} height="100%"><CharacterCardPico characterKey={character.team[i]} index={i} /></Grid>)}
</Grid>
</CardActionArea>
</CardContent>
</CardLight>
</Grid>
<Grid item xs={12} sm={7} md={8} lg={9.5} sx={{
display: "flex", flexDirection: "column", gap: 1
}} >
<Grid container spacing={1} columns={{ xs: 2, sm: 2, md: 3, lg: 4, xl: 6 }}>
<Grid item xs={1}>
<WeaponCardNano weaponId={character.equippedWeapon} BGComponent={CardLight} onClick={() => navigate("equip")} />
</Grid>
{allSlotKeys.map(slotKey =>
<Grid item key={slotKey} xs={1} >
<ArtifactCardNano artifactId={data.get(input.art[slotKey].id).value} slotKey={slotKey} BGComponent={CardLight} onClick={() => navigate("equip")} />
</Grid>)}
</Grid>
<MainStatsCards />
</Grid>
</Grid >
}
