@mui/icons-material#Person TypeScript Examples
The following examples show how to use
@mui/icons-material#Person.
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: index.tsx From genshin-optimizer with MIT License | 6 votes |
|
function TabNav({ tab }: { tab: string }) {
const { t } = useTranslation("page_character")
return <Tabs
value={tab}
variant="scrollable"
allowScrollButtonsMobile
sx={{
"& .MuiTab-root:hover": {
transition: "background-color 0.25s ease",
backgroundColor: "rgba(255,255,255,0.1)"
},
}}
>
<Tab sx={{ minWidth: "20%" }} value="overview" label={t("tabs.overview")} icon={<Person />} component={RouterLink} to="" />
<Tab sx={{ minWidth: "20%" }} value="talent" label={t("tabs.talent")} icon={<FactCheck />} component={RouterLink} to="talent" />
<Tab sx={{ minWidth: "20%" }} value="equip" label={t("tabs.equip")} icon={<Checkroom />} component={RouterLink} to="equip" />
<Tab sx={{ minWidth: "20%" }} value="teambuffs" label={t("tabs.teambuffs")} icon={<Groups />} component={RouterLink} to="teambuffs" />
<Tab sx={{ minWidth: "20%" }} value="optimize" label={t("tabs.optimize")} icon={<Calculate />} component={RouterLink} to="optimize" />
</Tabs>
}
Example #2
| Source File: AbrechnungIcons.tsx From abrechnung with GNU Affero General Public License v3.0 | 5 votes |
|
PersonalAccountIcon = Person
Example #3
| Source File: AccountSelect.tsx From abrechnung with GNU Affero General Public License v3.0 | 5 votes |
|
export default function AccountSelect({
group,
onChange,
value = null,
exclude = null,
disabled = false,
noDisabledStyling = false,
className = null,
...props
}) {
const accounts = useRecoilValue(accountsSeenByUser(group.id));
const filteredAccounts =
exclude !== null ? accounts.filter((account) => exclude.indexOf(account.id) < 0) : accounts;
return (
<Autocomplete
options={filteredAccounts}
getOptionLabel={(option) => option.name}
value={value}
disabled={disabled}
openOnFocus
fullWidth
PopperComponent={StyledAutocompletePopper}
disableClearable
className={className}
onChange={(event, newValue) => onChange(newValue)}
renderOption={(props, option) => (
<Box component="li" {...props}>
{option.type === "personal" ? <Person /> : <CompareArrows />}
<Typography variant="body2" component="span" sx={{ ml: 1 }}>
{option.name}
</Typography>
</Box>
)}
renderInput={
noDisabledStyling
? (params) => <DisabledTextField variant="standard" {...params} {...props} />
: (params) => <TextField variant="standard" {...params} {...props} />
}
/>
);
}
Example #4
| Source File: Sider.tsx From your_spotify with GNU General Public License v3.0 | 5 votes |
|
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 />,
},
],
},
]
Example #5
| Source File: ClearingSharesFormElement.tsx From abrechnung with GNU Affero General Public License v3.0 | 4 votes |
|
export default function ClearingSharesFormElement({ group, clearingShares, setClearingShares, accountID = undefined }) {
const accounts = useRecoilValue(accountsSeenByUser(group.id));
const [showAdvanced, setShowAdvanced] = useState(false);
const [searchValue, setSearchValue] = useState("");
const [filteredAccounts, setFilteredAccounts] = useState([]);
useEffect(() => {
if (searchValue != null && searchValue !== "") {
setFilteredAccounts(
accounts.filter((acc) => {
return acc.name.toLowerCase().includes(searchValue.toLowerCase());
})
);
} else {
setFilteredAccounts(accounts);
}
}, [searchValue, accounts]);
return (
<>
<Grid container direction="row" justifyContent="space-between">
<Typography variant="subtitle1">Allocation to</Typography>
<FormControlLabel
control={<Checkbox name={`show-advanced`} />}
checked={showAdvanced}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => setShowAdvanced(event.target.checked)}
label="Advanced"
/>
</Grid>
<TableContainer sx={{ maxHeight: 400 }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<TableCell>
<TextField
placeholder="Search ..."
margin="none"
size="small"
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
variant="standard"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
}}
/>
</TableCell>
<TableCell width="100px">Shares</TableCell>
</TableRow>
</TableHead>
<TableBody>
{filteredAccounts.map(
(account) =>
(accountID === undefined || account.id !== accountID) && (
<TableRow hover key={account.id}>
<TableCell>
<Grid container direction="row" alignItems="center">
<Grid item>
{account.type === "personal" ? <Person /> : <CompareArrows />}
</Grid>
<Grid item sx={{ ml: 1 }}>
<Typography variant="body2" component="span">
{account.name}
</Typography>
</Grid>
</Grid>
</TableCell>
<TableCell width="100px">
{showAdvanced ? (
<ShareInput
onChange={(value) =>
setClearingShares({
...(clearingShares !== undefined ? clearingShares : {}),
[account.id]: value,
})
}
value={
clearingShares && clearingShares.hasOwnProperty(account.id)
? clearingShares[account.id]
: 0.0
}
/>
) : (
<Checkbox
name={`${account.name}-checked`}
checked={
clearingShares &&
clearingShares.hasOwnProperty(account.id) &&
clearingShares[account.id] !== 0
}
onChange={(event) =>
setClearingShares({
...(clearingShares !== undefined ? clearingShares : {}),
[account.id]: event.target.checked ? 1.0 : 0.0,
})
}
/>
)}
</TableCell>
</TableRow>
)
)}
</TableBody>
</Table>
</TableContainer>
</>
);
}
