From caee577929870603eb0ef7f28c89c2c4207b8050 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sun, 26 Jan 2020 15:50:08 +0300 Subject: feat: initialize npm module, add components --- src/lib/components/Header/Header.js | 72 +++++++++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 src/lib/components/Header/Header.js (limited to 'src/lib/components/Header') diff --git a/src/lib/components/Header/Header.js b/src/lib/components/Header/Header.js new file mode 100644 index 0000000..1595141 --- /dev/null +++ b/src/lib/components/Header/Header.js @@ -0,0 +1,72 @@ +import React from 'react'; + +import { + AppBar, + Tabs, + Tab, + Typography, + Toolbar, +} from '@material-ui/core'; + +import { makeStyles } from '@material-ui/core/styles'; +import TimerIcon from '@material-ui/icons/Timer'; +import AccountCircleIcon from '@material-ui/icons/AccountCircle'; +import AssignmentIcon from '@material-ui/icons/Assignment'; +import GitHubIcon from '@material-ui/icons/GitHub'; + + +const useStyles = makeStyles(theme => ({ + logo: { + color: theme.palette.secondary.main, + margin: theme.spacing(0, 3, 0, 3), + }, + tab: { + '& .MuiTab-wrapper': { + padding: theme.spacing(2), + flexDirection: 'row', + '& svg': { + marginRight: theme.spacing(1), + marginBottom: '0 !important', + } + } + } +})); + + +const Header = ({ page, setPage }) => { + const classes = useStyles(); + + const handleChange = (event, newPage) => { + setPage(newPage); + }; + + const icons = { + app: (), + profile: (), + scoreboard: (), + contribute: (), + }; + + return ( + + + + ChronoCube + + + { Object.keys(icons).map(item => ( + + ))} + + + + ); +}; + +export default Header; -- cgit v1.2.3