diff options
author | Eugene Sokolov <eug-vs@keemail.me> | 2020-10-10 14:15:36 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-10-10 14:15:36 +0300 |
commit | 0b1bbde30d4d396f8e760c59d35689353ea012a2 (patch) | |
tree | 521284ca3aefc0f66e9e9df0f6affc82baba8ba6 /src/lib/Header/Header.tsx | |
parent | 513f28b126bac41a3a4853a2c4466f0f24070a66 (diff) | |
parent | ff32e155b003997d2f71cc8ff62f5f0063592824 (diff) | |
download | react-benzin-0b1bbde30d4d396f8e760c59d35689353ea012a2.tar.gz |
Merge pull request #16 from eug-vs/develop
Release v4.0.0
Diffstat (limited to 'src/lib/Header/Header.tsx')
-rw-r--r-- | src/lib/Header/Header.tsx | 81 |
1 files changed, 0 insertions, 81 deletions
diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx deleted file mode 100644 index 58be989..0000000 --- a/src/lib/Header/Header.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react'; - -import { - AppBar, - Tabs, - Tab, - Typography, - Toolbar, -} from '@material-ui/core'; - -import { makeStyles } from '@material-ui/core/styles'; - - -interface PropTypes { - logo: { - icon: React.ReactNode; - title: string; - }; - contents: { - [key: string]: React.ReactNode | null; - }; - page: string; - setPage: (newPage: string) => void; -} - -const useStyles = makeStyles(theme => ({ - root: { - background: theme.palette.background.elevation2, - color: theme.palette.text.primary, - paddingLeft: theme.spacing(3), - }, - logo: { - margin: theme.spacing(0, 3, 0, 1), - }, - tab: { - '& .MuiTab-wrapper': { - padding: theme.spacing(2), - flexDirection: 'row', - fontSize: '0.8125rem', - '& svg': { - marginRight: theme.spacing(1), - marginBottom: '0 !important', - }, - }, - }, -})); - - -const Header: React.FC<PropTypes> = ({ - logo, contents, page, setPage, -}) => { - const classes = useStyles(); - - const handleChange = (event: React.ChangeEvent<{}>, newPage: string): void => { - setPage(newPage); - }; - - return ( - <AppBar position="sticky" className={classes.root}> - <Toolbar> - {logo.icon} - <Typography variant="h5" className={classes.logo} color="primary"> - {logo.title} - </Typography> - <Tabs onChange={handleChange} value={page}> - {contents && Object.keys(contents).map((item: string) => ( - <Tab - label={item} - icon={contents[item] as JSX.Element} - value={item} - className={classes.tab} - key={item} - /> - ))} - </Tabs> - </Toolbar> - </AppBar> - ); -}; - -export default Header; |