@mui/icons-material#People TypeScript Examples
The following examples show how to use
@mui/icons-material#People.
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: adminMenu.tsx From frontend with MIT License | 6 votes |
|
menuItems = [
{ label: 'Кампании', icon: AssignmentInd, href: routes.admin.campaigns.index },
{ label: 'Доброволци', icon: People, href: routes.admin.supporters },
{ label: 'Контакти', icon: ContactPhone, href: routes.admin.infoRequests },
{ label: 'Плащания', icon: Payment, href: routes.admin.bankaccounts.index },
{ label: 'Потребители', icon: Group, href: '#' },
{ label: 'Документи', icon: FolderShared, href: routes.admin.documents.index },
{ label: 'Бенефактори', icon: BeneficiaryIcon, href: routes.admin.benefactor.index },
{ label: 'Бенефициенти', icon: BeneficiaryIcon, href: routes.admin.beneficiary.index },
{ label: 'Типове кампании', icon: Class, href: routes.admin.campaignTypes.index },
{ label: 'Градове', icon: LocationCityRoundedIcon, href: routes.admin.cities.home },
{ label: 'Държави', icon: Public, href: routes.admin.countries.index },
{ label: 'Координатори', icon: People, href: routes.admin.coordinators.index },
{ label: 'Разходи', icon: Paid, href: routes.admin.expenses.index },
{ label: 'Дарения', icon: VolunteerActivismOutlinedIcon, href: routes.admin.donations.index },
{ label: 'Трезори', icon: Shield, href: routes.admin.vaults.index },
{ label: 'Тегления', icon: LocalAtmIcon, href: routes.admin.withdrawals.index },
{ label: 'Прехвърляния', icon: MoveUp, href: routes.admin.transfer.index },
{
label: 'Повтарящо се дарение',
icon: VolunteerActivism,
href: routes.admin.recurringDonation.index,
},
{ label: 'Злоупотреби', icon: ReportGmailerrorredIcon, href: routes.admin.irregularity.index },
]
Example #2
| Source File: adminMenu.tsx From frontend with MIT License | 5 votes |
|
menuPeople = [
{ label: 'Контакти', icon: ContactPhone, href: routes.admin.infoRequests },
{ label: 'Бенефактори', icon: BeneficiaryIcon, href: routes.admin.benefactor.index },
{ label: 'Бенефициенти', icon: BeneficiaryIcon, href: routes.admin.beneficiary.index },
{ label: 'Координатори', icon: People, href: routes.admin.coordinators.index },
{ label: 'Потребители', icon: Group, href: '#' },
{ label: 'Доброволци', icon: People, href: routes.admin.supporters },
]
Example #3
| Source File: adminMenu.tsx From frontend with MIT License | 5 votes |
|
items = [
{ items: menuPeople, menu: 'Хора', icon: People },
{ items: menuCampaings, menu: 'Кампании', icon: AssignmentInd },
{ items: menuPayments, menu: 'Плащания', icon: Payment },
{ items: menuSetings, menu: 'Системни', icon: DisplaySettings },
]
Example #4
| Source File: Layout.tsx From abrechnung with GNU Affero General Public License v3.0 | 4 votes |
|
export default function Layout({ group = null, children, ...props }) {
const authenticated = useRecoilValue(isAuthenticated);
const [anchorEl, setAnchorEl] = useState(null);
const theme: Theme = useTheme();
const dotsMenuOpen = Boolean(anchorEl);
const cfg = useRecoilValue(config);
const location = useLocation();
const [mobileOpen, setMobileOpen] = useState(true);
const { window } = props;
const handleProfileMenuOpen = (event) => {
setAnchorEl(event.currentTarget);
};
const handleDotsMenuClose = (event) => {
setAnchorEl(null);
};
const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen);
};
const drawer = (
<div style={{ height: "100%" }}>
<Toolbar />
<Divider />
{group != null && (
<List sx={{ pb: 0 }}>
<ListItemLink
to={`/groups/${group.id}/`}
selected={
location.pathname === `/groups/${group.id}/` || location.pathname === `/groups/${group.id}`
}
>
<ListItemIcon>
<Paid />
</ListItemIcon>
<ListItemText primary="Transactions" />
</ListItemLink>
<ListItemLink
to={`/groups/${group.id}/balances`}
selected={location.pathname.startsWith(`/groups/${group.id}/balances`)}
>
<ListItemIcon>
<BarChart />
</ListItemIcon>
<ListItemText primary="Balances" />
</ListItemLink>
<ListItemLink
to={`/groups/${group.id}/accounts`}
selected={location.pathname.startsWith(`/groups/${group.id}/accounts`)}
>
<ListItemIcon>
<AccountBalance />
</ListItemIcon>
<ListItemText primary="Accounts" />
</ListItemLink>
<ListItemLink
to={`/groups/${group.id}/detail`}
selected={location.pathname.startsWith(`/groups/${group.id}/detail`)}
>
<ListItemIcon>
<AdminPanelSettings />
</ListItemIcon>
<ListItemText primary="Group Settings" />
</ListItemLink>
<ListItemLink
to={`/groups/${group.id}/members`}
selected={location.pathname.startsWith(`/groups/${group.id}/members`)}
>
<ListItemIcon>
<People />
</ListItemIcon>
<ListItemText primary="Group Members" />
</ListItemLink>
<ListItemLink
to={`/groups/${group.id}/invites`}
selected={location.pathname.startsWith(`/groups/${group.id}/invites`)}
>
<ListItemIcon>
<Mail />
</ListItemIcon>
<ListItemText primary="Group Invites" />
</ListItemLink>
<ListItemLink
to={`/groups/${group.id}/log`}
selected={location.pathname.startsWith(`/groups/${group.id}/log`)}
>
<ListItemIcon>
<Message />
</ListItemIcon>
<ListItemText primary="Group Log" />
</ListItemLink>
<Divider />
</List>
)}
<SidebarGroupList group={group} />
<Box
sx={{
display: "flex",
position: "absolute",
width: "100%",
justifyContent: "center",
bottom: 0,
padding: 1,
borderTop: 1,
borderColor: theme.palette.divider,
}}
>
{cfg.imprintURL && (
<Link href={cfg.imprintURL} target="_blank" sx={{ mr: 2 }}>
imprint
</Link>
)}
<Tooltip title="Source Code">
<Link sx={{ ml: 1 }} target="_blank" href={cfg.sourceCodeURL}>
<GitHub />
</Link>
</Tooltip>
{cfg.issueTrackerURL && (
<Tooltip title="Bug reports">
<Link sx={{ ml: 1 }} target="_blank" href={cfg.issueTrackerURL}>
<BugReport />
</Link>
</Tooltip>
)}
</Box>
</div>
);
const container = window !== undefined ? () => window().document.body : undefined;
return (
<Box sx={{ display: "flex" }}>
<CssBaseline />
<AppBar
position="fixed"
sx={{
// width: {sm: `calc(100% - ${drawerWidth}px)`},
// ml: {sm: `${drawerWidth}px`},
zIndex: (theme) => theme.zIndex.drawer + 1,
}}
>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerToggle}
edge="start"
sx={{ mr: 2, display: { sm: "none" } }}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
Abrechnung
</Typography>
{authenticated ? (
<div>
<IconButton
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleProfileMenuOpen}
color="inherit"
>
<AccountCircleIcon />
</IconButton>
<Menu
id="menu-appbar"
open={dotsMenuOpen}
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
keepMounted
anchorEl={anchorEl}
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
onClose={handleDotsMenuClose}
>
<MenuItem component={RouterLink} to="/profile">
Profile
</MenuItem>
<MenuItem component={RouterLink} to="/profile/settings">
Settings
</MenuItem>
<MenuItem component={RouterLink} to="/profile/sessions">
Sessions
</MenuItem>
<MenuItem component={RouterLink} to="/profile/change-email">
Change E-Mail
</MenuItem>
<MenuItem component={RouterLink} to="/profile/change-password">
Change Password
</MenuItem>
<Divider />
<MenuItem component={RouterLink} to="/logout">
<ListItemIcon>
<Logout fontSize="small" />
</ListItemIcon>
<ListItemText>Sign out</ListItemText>
</MenuItem>
</Menu>
</div>
) : (
<Button component={RouterLink} color="inherit" to="/login">
Login
</Button>
)}
</Toolbar>
</AppBar>
{authenticated ? (
<Box component="nav" sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}>
<Drawer
container={container}
variant="temporary"
open={mobileOpen}
onClose={handleDrawerToggle}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
sx={{
display: { xs: "block", sm: "none" },
"& .MuiDrawer-paper": {
boxSizing: "border-box",
width: drawerWidth,
},
}}
>
{drawer}
</Drawer>
<Drawer
variant="permanent"
sx={{
flexShrink: 0,
display: { xs: "none", sm: "block" },
"& .MuiDrawer-paper": {
boxSizing: "border-box",
width: drawerWidth,
},
}}
open
>
{drawer}
</Drawer>
</Box>
) : null}
<Box
component="main"
sx={{
flexGrow: 1,
width: { sm: `calc(100% - ${drawerWidth}px)` },
}}
>
<Toolbar />
<Banner />
<Container maxWidth="lg" sx={{ padding: { xs: 0, md: 1, lg: 3 } }}>
{children}
</Container>
</Box>
</Box>
);
}
Example #5
| Source File: Dashboard.tsx From NekoMaid with MIT License | 4 votes |
|
Dashboard: React.FC = () => {
const plugin = usePlugin()
const { version, hasGeoIP } = useGlobalData()
const [status, setStatus] = useState<Status[]>([])
const [current, setCurrent] = useState<CurrentStatus | undefined>()
useEffect(() => {
const offSetStatus = plugin.once('dashboard:info', setStatus)
const offCurrent = plugin.on('dashboard:current', (data: CurrentStatus) => setCurrent(old => {
if (old && isEqual(old.players, data.players)) data.players = old.players
return data
}))
plugin.switchPage('dashboard')
return () => {
offSetStatus()
offCurrent()
}
}, [])
const playerCount = current?.players?.length || 0
const prev = status[status.length - 1]?.players || 0
const percent = (prev ? playerCount / prev - 1 : playerCount) * 100
const tpsColor = !current || current.tps >= 18 ? green : current.tps >= 15 ? yellow : red
return <Box sx={{ minHeight: '100%', py: 3 }}>
<Toolbar />
<Container maxWidth={false}>
<Grid container spacing={3}>
<Grid item lg={3} sm={6} xl={3} xs={12}>
<TopCard
title={lang.dashboard.version}
content={current ? version : <Skeleton animation='wave' width={150} />}
icon={<Handyman />}
color={orange[600]}
>
<Box sx={{ pt: 2, display: 'flex', alignItems: 'flex-end' }}>
{!current || current.behinds < 0
? <Refresh htmlColor={blue[900]} />
: current?.behinds === 0
? <Check htmlColor={green[900]} />
: <Update htmlColor={yellow[900]} />}
<Typography color='textSecondary' variant='caption'> {!current || current.behinds === -3
? lang.dashboard.updateChecking
: current.behinds < 0
? <Link underline='hover' color='inherit' sx={{ cursor: 'pointer' }} onClick={() => {
toast(lang.dashboard.updateChecking)
plugin.emit('dashboard:checkUpdate')
}}>{lang.dashboard.updateFailed}</Link>
: current.behinds === 0 ? lang.dashboard.updated : lang.dashboard.behinds(current.behinds)}</Typography>
</Box>
</TopCard>
</Grid>
<Grid item lg={3} sm={6} xl={3} xs={12}>
<TopCard
title={lang.dashboard.onlinePlayers}
content={current ? playerCount : <Skeleton animation='wave' width={150} />}
icon={<People />}
color={deepPurple[600]}
>
<Box sx={{ pt: 2, display: 'flex', alignItems: 'flex-end' }}>
{percent === 0 ? <Remove color='primary' /> : percent < 0 ? <ArrowDownward color='error' /> : <ArrowUpward color='success' />}
<Typography
sx={{ color: (percent === 0 ? blue : percent < 0 ? red : green)[900], mr: 1 }}
variant='body2'
>{Math.abs(percent).toFixed(0)}%</Typography>
<Typography color='textSecondary' variant='caption'>{lang.dashboard.lastHour}</Typography>
</Box>
</TopCard>
</Grid>
<Grid item lg={3} sm={6} xl={3} xs={12}>
<TopCard
title='TPS'
content={current ? (current.tps === -1 ? '?' : current.tps.toFixed(2)) : <Skeleton animation='wave' width={150} />}
icon={!current || current.tps >= 18 || current.tps === -1
? <SentimentVerySatisfied />
: current.tps >= 15 ? <SentimentSatisfied /> : <SentimentDissatisfied />}
color={tpsColor[600]}
>
<Box sx={{ pt: 2.1, display: 'flex', alignItems: 'flex-end' }}>
<Typography
sx={{ color: tpsColor[900], mr: 1 }}
variant='body2'
>{!current || current.mspt === -1 ? '?' : current.mspt.toFixed(2) + 'ms'}</Typography>
<Typography color='textSecondary' variant='caption'>{lang.dashboard.mspt}</Typography>
</Box>
</TopCard>
</Grid>
<Grid item lg={3} sm={6} xl={3} xs={12}>
<TopCard
title={lang.dashboard.uptime}
content={current ? <Uptime time={current.time} /> : <Skeleton animation='wave' width={150} />}
icon={<AccessTime />}
color={blue[600]}
>
<Box sx={{ pt: 2.7, display: 'flex', alignItems: 'center' }}>
<Typography color='textSecondary' variant='caption' sx={{ marginRight: 1 }}>{lang.dashboard.memory}</Typography>
<Tooltip title={current?.totalMemory ? prettyBytes(current.memory) + ' / ' + prettyBytes(current.totalMemory) : ''}>
<LinearProgress
variant='determinate'
value={current?.totalMemory ? current.memory / current.totalMemory * 100 : 0}
sx={{ flex: '1' }}
/>
</Tooltip>
</Box>
</TopCard>
</Grid>
<Grid item lg={8} md={12} xl={9} xs={12}>{useMemo(() => <Charts data={status} />, [status])}</Grid>
<Grid item lg={4} md={12} xl={3} xs={12}><Players players={current?.players} /></Grid>
{hasGeoIP && current?.players && typeof current.players[0] !== 'string' && <Grid item xs={12}>
<Accordion TransitionProps={{ unmountOnExit: true }} disableGutters>
<AccordionSummary expandIcon={<ExpandMore />}>
<Typography>{lang.dashboard.playersDistribution}</Typography>
</AccordionSummary>
<Divider />
<WorldMap players={current.players as Player[]} />
</Accordion>
</Grid>}
</Grid>
</Container>
</Box>
}
