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 (
|
|
<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,
|
|
};
|