79 lines
1.9 KiB
JavaScript
79 lines
1.9 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 (
|
|
<>
|
|
<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>
|
|
</>
|
|
);
|
|
}
|
|
|
|
Header.propTypes = {
|
|
sections: PropTypes.array,
|
|
title: PropTypes.string,
|
|
};
|