From dcb9b3aeb6dec55b133afa5748233494e8374fcd Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 7 Jun 2020 19:11:22 +0300
Subject: feat: add searchbar and improve header

---
 src/Header/Header.tsx | 52 ++++++++++++++++++++++++++-------------------------
 1 file changed, 27 insertions(+), 25 deletions(-)

(limited to 'src/Header/Header.tsx')

diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx
index 8e8a301..5ce79be 100644
--- a/src/Header/Header.tsx
+++ b/src/Header/Header.tsx
@@ -2,45 +2,47 @@ import React from 'react';
 import {
   AppBar,
   Toolbar,
-  Tabs,
-  Tab
+  IconButton,
+  Typography
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+import NotificationsIcon from '@material-ui/icons/Notifications';
 
-interface PropTypes {
-  page: string;
-  setPage: (newPage: string) => void;
-}
+import SearchBar from './SearchBar';
 
 const useStyles = makeStyles(theme => ({
-  tab: {
-    '& .MuiTab-wrapper': {
-      padding: theme.spacing(2),
-      flexDirection: 'row',
-      fontSize: '0.8125rem'
-    }
+  root: {
+    display: 'flex',
+    justifyContent: 'space-around',
+    width: '60%',
+    margin: 'auto'
+  },
+  logo: {
+    fontWeight: 'bold',
   }
 }));
 
-const tabs = ['Profile', 'Feed'];
-
-const Header: React.FC<PropTypes> = ({ page /* , setPage */ }) => {
+const Header: React.FC = () => {
   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 className={classes.root}>
+        <Typography variant="h5" className={classes.logo}>
+          Which
+        </Typography>
+        <SearchBar />
+        <div>
+          <IconButton>
+            <NotificationsIcon />
+          </IconButton>
+          <IconButton>
+            <AccountCircle />
+          </IconButton>
+        </div>
       </Toolbar>
     </AppBar>
   );
-- 
cgit v1.2.3