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 +++++++++++++++++++++++++-----------------------
src/Header/SearchBar.tsx | 32 +++++++++++++++++++++++++++++
src/index.tsx | 2 +-
3 files changed, 60 insertions(+), 26 deletions(-)
create mode 100644 src/Header/SearchBar.tsx
(limited to 'src')
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>
);
diff --git a/src/Header/SearchBar.tsx b/src/Header/SearchBar.tsx
new file mode 100644
index 0000000..ed59874
--- /dev/null
+++ b/src/Header/SearchBar.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import SearchIcon from '@material-ui/icons/Search';
+import { InputBase } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ background: 'rgba(255, 255, 255, 0.5)',
+ borderRadius: '2px',
+ padding: theme.spacing(0.5),
+ display: 'flex',
+ alignItems: 'center',
+ // marginRight: theme.spacing(8),
+ }
+}));
+
+const SearchBar: React.FC = () => {
+ const classes = useStyles();
+
+ return (
+ <div className={classes.root}>
+ <SearchIcon />
+ <InputBase
+ placeholder="Search..."
+ />
+ </div>
+ );
+};
+
+
+export default SearchBar;
+
diff --git a/src/index.tsx b/src/index.tsx
index e397ca2..b0a8fdc 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -43,7 +43,7 @@ const App: React.FC = () => {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
- <Header page={page} setPage={setPage} />
+ <Header />
<PollCard author={pollProps.author} contents={pollProps.contents} />
</ThemeProvider>
);
--
cgit v1.2.3