@material-ui/icons#LocationCity JavaScript Examples
The following examples show how to use
@material-ui/icons#LocationCity.
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: MainAppBar.js From landlord with MIT License | 4 votes |
|
export default function MainAppBar(props) {
const classes = useStyles();
const [mobileOpen, setMobileOpen] = React.useState(false);
const handleDrawerToggle = (variant) => {
setMobileOpen(variant === "temporary" && !mobileOpen);
};
const drawer = (variant) => (
<div>
<div className={classes.toolbar}/>
<Divider/>
<List component="nav">
<ListItem button component={Link} to="/" onClick={() => handleDrawerToggle(variant)} key={"/"}>
<ListItemIcon><Home/></ListItemIcon>
<ListItemText primary="Home"/>
</ListItem>
<ListItem button component={Link} to="/out-of-omaha" onClick={() => handleDrawerToggle(variant)} key={"/out-of-omaha"}>
<ListItemIcon><LocationCity/></ListItemIcon>
<ListItemText primary="Out of Omaha"/>
</ListItem>
<List component="div" disablePadding dense>
<ListItem className={classes.nested} button component={Link} to="/out-of-omaha/map" onClick={() => handleDrawerToggle(variant)} key={"/out-of-omaha/map"}>
<ListItemIcon><Place/></ListItemIcon>
<ListItemText primary="Out of Omaha Map"/>
</ListItem>
</List>
<ListItem button component={Link} to="/out-of-state" onClick={() => handleDrawerToggle(variant)} key={"/out-of-state"}>
<ListItemIcon><Map/></ListItemIcon>
<ListItemText primary="Out of State"/>
</ListItem>
<List component="div" disablePadding dense>
<ListItem className={classes.nested} button component={Link} to="/out-of-state/map" onClick={() => handleDrawerToggle(variant)} key={"/out-of-state/map"}>
<ListItemIcon><Place/></ListItemIcon>
<ListItemText primary="Out of State Map"/>
</ListItem>
</List>
<ListItem button component={Link} to="/low-condition" onClick={() => handleDrawerToggle(variant)} key={"/low-condition"}>
<ListItemIcon><TrendingDown/></ListItemIcon>
<ListItemText primary="Low Condition"/>
</ListItem>
<List component="div" disablePadding dense>
<ListItem className={classes.nested} button component={Link} to="/low-condition/map" onClick={() => handleDrawerToggle(variant)} key={"/low-condition/map"}>
<ListItemIcon><Place/></ListItemIcon>
<ListItemText primary="Low Condition Map"/>
</ListItem>
</List>
<ListItem button component={Link} to="/about" onClick={() => handleDrawerToggle(variant)} key={"/about"}>
<ListItemIcon><Info/></ListItemIcon>
<ListItemText primary="About"/>
</ListItem>
</List>
</div>
);
return (
<div className={classes.root}>
<CssBaseline/>
<AppBar position="fixed" className={classes.appBar}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={() => handleDrawerToggle("temporary")}
className={classes.menuButton}
>
<MenuIcon/>
</IconButton>
<img src="/landlord/favicon.png" alt="logo" className={classes.logo} width={30} height={30}/>
<Typography variant="h6" noWrap>
Landlords of Omaha
</Typography>
</Toolbar>
</AppBar>
<nav className={classes.drawer}>
<Hidden mdUp implementation="css">
<Drawer
variant="temporary"
anchor="left"
open={mobileOpen}
onClose={() => handleDrawerToggle("temporary")}
classes={{
paper: classes.drawerPaper,
}}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
>
{drawer("temporary")}
</Drawer>
</Hidden>
<Hidden smDown implementation="css">
<Drawer
classes={{
paper: classes.drawerPaper,
}}
variant="permanent"
open
>
{drawer("permanent")}
</Drawer>
</Hidden>
</nav>
<div className={classes.contentWrapper}>
<div className={classes.toolbar}/>
<main className={classes.main}>
{props.children}
</main>
<footer className={classes.footer}>
<div className={classes.footerBody}>
<Typography variant="body2" component="p">Learn more about this project:</Typography>
<Box display="flex" justifyContent="center">
<Box m={1} p={1}>
<a className={classes.footerLink} rel="noreferrer" target="_blank" href="https://codefornebraska.slack.com/messages/housing"><Icon icon={slackIcon} width="36" height="36"/></a>
</Box>
<Box m={1} p={1}>
<a className={classes.footerLink} rel="noreferrer" target="_blank" href="https://github.com/codefornebraska/landlord"><Icon icon={githubIcon} width="36" height="36"/></a>
</Box>
</Box>
</div>
<div className={classes.footerCopyright}>
<Typography variant="body2">
{`Copyright © `}
<a className={classes.footerLink} rel="noreferrer" target="_blank" href="https://www.codefornebraska.org/">Code for Nebraska</a>
{` ${new Date().getFullYear()}`}
</Typography>
</div>
</footer>
</div>
</div>
);
}
Example #2
| Source File: Experience.js From Portfolio with MIT License | 4 votes |
|
export default function Experience() {
const classes = useStyles()
const theme = useTheme()
const mdDown = useMediaQuery(theme.breakpoints.down('md'))
const align = mdDown ? "center" : "flex-end"
const textAlign = mdDown ? "center" : "right"
const animRef = useRef(null)
const animate = useAnimate(animRef)
return (
<Grid direction="row" container justify="center" alignItems="center" spacing={10} className={classes.cont}>
<Grid item xs={12} lg={6}>
<Typography variant="h2" gutterBottom align="center">
Experience
</Typography>
<Hidden mdDown>
<Fade in={animate} style={{ transitionDelay: '250ms' }}>
<div>
<Image
alt="Experience"
src="/experience.svg"
width="996.46"
height="828.18"
/>
</div>
</Fade>
</Hidden>
</Grid>
<Grid container item xs={12} lg={6} direction="column" spacing={1} alignItems={align}>
{
Object.getOwnPropertyNames(experience).map((title, id) =>
<Grid item key={id} className={classes.expObj}>
<Typography variant="h4" align={textAlign} gutterBottom component="p">
{title}
</Typography>
<Grid container item direction="row" spacing={1} justify="center">
{
experience[title].map(({
organization,
role,
type,
startDate,
endDate,
city,
state,
country,
url,
thumbnail
}, i) =>
<Grid item xs={12} sm key={i}>
<Fade in={animate} style={{ transitionDelay: `${200 * i}ms` }}>
<Card className={classes.card}>
<CardActionArea
className={classes.cardActionArea}
href={url}
target="_blank"
rel="noopener noreferrer"
>
<CardHeader
avatar={
<Avatar variant="rounded">
<Image
alt={`${organization} logo`}
src={thumbnail}
layout="fill"
/>
</Avatar>
}
title={organization}
subheader={role + " - " + type}
/>
<CardHeader
avatar={<DateRange />}
title={getHumanDiff(startDate, endDate)}
subheader={`${startDate} - ${endDate}`}
className={classes.cardHeader}
/>
<CardHeader
avatar={<LocationCity />}
subheader={`${city}, ${state}, ${country}`}
className={classes.cardHeader}
/>
</CardActionArea>
</Card>
</Fade>
</Grid>
)
}
</Grid>
</Grid>
)
}
</Grid>
<div ref={animRef}></div>
</Grid>
)
}
