feat: implement basic header

1 files changed, 50 insertions, 0 deletions

diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx
new file mode 100644
index 0000000..fd2620c
--- /dev/null
+++ b/src/Header/Header.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { 
+  AppBar,
+  Toolbar,
+  Tabs,
+  Tab
+} from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+interface PropTypes {
+  page: string;
+  setPage: (newPage: string) => void;
+}
+
+const useStyles = makeStyles(theme => ({
+  tab: {
+    '& .MuiTab-wrapper': {
+        padding: theme.spacing(2),
+        flexDirection: 'row',
+        fontSize: '0.8125rem'
+    }
+  }
+}));
+
+const tabs = ["Profile", "Feed"];
+
+const Header: React.FC<PropTypes> = ({ page, setPage }) => {
+  const classes = useStyles();
+
+  const handleChange = () => {}
+
+  return (
+    <AppBar position="static">
+      <Toolbar> 
+        <Tabs onChange={handleChange} value={page}>
+          {tabs.map((tab: string) => (
+            <Tab
+              label={tab}
+              key={tab}
+              className={classes.tab}
+            />
+          ))}
+        </Tabs>
+      </Toolbar>
+    </AppBar>
+  )
+};
+
+export default Header;
+