From cf10bd8925fe8cbffb91e2b282e16f086575bf32 Mon Sep 17 00:00:00 2001 From: asketonim Date: Mon, 3 Feb 2020 19:53:37 +0300 Subject: feat: migrate Header to TypeScript --- src/lib/Header/Header.tsx | 79 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 src/lib/Header/Header.tsx (limited to 'src/lib/Header/Header.tsx') diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx new file mode 100644 index 0000000..85dac4b --- /dev/null +++ b/src/lib/Header/Header.tsx @@ -0,0 +1,79 @@ +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: any; + page: string; + setPage: any; +} + + + +const useStyles = makeStyles((theme: any) => ({ + 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 = ({ logo, contents, page, setPage }) => { + const classes = useStyles(); + + const handleChange = (event: any, newPage: string) => { + setPage(newPage); + }; + + return ( + + + {logo.icon} + + {logo.title} + + + {contents && Object.keys(contents).map(item => ( + + ))} + + + + ); +}; + +export default Header; -- cgit v1.2.3