73 lines
2.2 KiB
JavaScript
73 lines
2.2 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import { makeStyles } from '@material-ui/core/styles';
|
||
|
|
import Toolbar from '@material-ui/core/Toolbar';
|
||
|
|
import Button from '@material-ui/core/Button';
|
||
|
|
import IconButton from '@material-ui/core/IconButton';
|
||
|
|
import SearchIcon from '@material-ui/icons/Search';
|
||
|
|
import Typography from '@material-ui/core/Typography';
|
||
|
|
import Link from '@material-ui/core/Link';
|
||
|
|
|
||
|
|
const useStyles = makeStyles(theme => ({
|
||
|
|
toolbar: {
|
||
|
|
borderBottom: `1px solid ${theme.palette.divider}`,
|
||
|
|
},
|
||
|
|
toolbarTitle: {
|
||
|
|
flex: 1,
|
||
|
|
},
|
||
|
|
toolbarSecondary: {
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
overflowX: 'auto',
|
||
|
|
},
|
||
|
|
toolbarLink: {
|
||
|
|
padding: theme.spacing(1),
|
||
|
|
flexShrink: 0,
|
||
|
|
},
|
||
|
|
}));
|
||
|
|
|
||
|
|
export default function Header(props) {
|
||
|
|
const classes = useStyles();
|
||
|
|
const { sections, title } = props;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<React.Fragment>
|
||
|
|
<Toolbar className={classes.toolbar}>
|
||
|
|
<Typography
|
||
|
|
component="h2"
|
||
|
|
variant="h5"
|
||
|
|
color="inherit"
|
||
|
|
align="center"
|
||
|
|
noWrap
|
||
|
|
className={classes.toolbarTitle}
|
||
|
|
>
|
||
|
|
{title}
|
||
|
|
</Typography>
|
||
|
|
<Toolbar component="nav" variant="dense" className={classes.toolbarSecondary}>
|
||
|
|
{sections.map(section => (
|
||
|
|
<Link
|
||
|
|
color="inherit"
|
||
|
|
noWrap
|
||
|
|
key={section.title}
|
||
|
|
variant="body2"
|
||
|
|
href={section.url}
|
||
|
|
className={classes.toolbarLink}
|
||
|
|
>
|
||
|
|
{section.title}
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
</Toolbar>
|
||
|
|
<Button size="small" variant="outlined" style={{margin: "0 1rem"}}>Login</Button>
|
||
|
|
|
||
|
|
|
||
|
|
<Button variant="outlined" size="small">
|
||
|
|
Sign up
|
||
|
|
</Button>
|
||
|
|
</Toolbar>
|
||
|
|
</React.Fragment>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
Header.propTypes = {
|
||
|
|
sections: PropTypes.array,
|
||
|
|
title: PropTypes.string,
|
||
|
|
};
|