From cb4c78bd4ea3c79c5cacbfd474ecddcf8db658ef Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sat, 6 Jun 2020 22:05:34 +0300
Subject: feat: implement basic header

---
 src/Header/Header.tsx | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 src/index.tsx         | 24 +++++++++++++++++++-----
 2 files changed, 69 insertions(+), 5 deletions(-)
 create mode 100644 src/Header/Header.tsx

(limited to 'src')

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;
+
diff --git a/src/index.tsx b/src/index.tsx
index fa9a15a..e858a17 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,21 @@
-import React from 'react';
+import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
+import { CssBaseline } from '@material-ui/core';
+import 'typeface-roboto';
+
+import Header from './Header/Header';
+
+const App: React.FC = () => {
+  const [page, setPage] = useState('feed');
+
+  return (
+    <>
+      <CssBaseline />
+      <Header page={page} setPage={setPage} />
+      <h1> Hello, world! </h1>
+    </>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById('root'));
 
-ReactDOM.render(
-  <h1> Hello, world! </h1>,
-  document.getElementById('root')
-);
-- 
cgit v1.2.3


From a23c4673ee2a59b45bc766df07aa208ee146e31e Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sat, 6 Jun 2020 22:33:28 +0300
Subject: feat: create initial theme

---
 src/index.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/index.tsx b/src/index.tsx
index e858a17..9225909 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,19 +1,34 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
+
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import { CssBaseline } from '@material-ui/core';
+import teal from '@material-ui/core/colors/teal';
 import 'typeface-roboto';
 
 import Header from './Header/Header';
 
+const theme = createMuiTheme({
+  palette: {
+    primary: {
+      main: teal[700],
+    },
+    text: {
+      primary: '#000000',
+      secondary: 'rgba(255, 255, 255, 0.6)',
+    },
+  },
+});
+
 const App: React.FC = () => {
   const [page, setPage] = useState('feed');
 
   return (
-    <>
+    <ThemeProvider theme={theme}>
       <CssBaseline />
       <Header page={page} setPage={setPage} />
       <h1> Hello, world! </h1>
-    </>
+    </ThemeProvider>
   );
 };
 
-- 
cgit v1.2.3