From 7be26fd020c7a77143fbe1caebed45adcdc53809 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Tue, 31 Dec 2019 16:13:55 +0300
Subject: Use MUI in Header

---
 src/components/Header.js | 35 ++++++++++++++++++++++++++---------
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index 47da527..4eceb6d 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,15 +1,32 @@
 import React from "react";
+import { Tab, Tabs, Typography } from "@material-ui/core";
+import styled from 'styled-components';
 
 const Header = () => (
-  <div>
-    <span> ChronoCube </span>
-    <ul>
-      <li> Home </li>
-      <li> App </li>
-      <li> Scoreboard </li>
-      <li> News </li>
-    </ul>
-  </div>
+  <HeaderWrapper>
+    <Tabs>
+      <Typography variant="h4" id="logo"> ChronoCube </Typography>
+      <Tab label="Home" />
+      <Tab label="App" />
+      <Tab label="Scoreboard" />
+      <Tab label="News" />
+    </Tabs>
+  </HeaderWrapper>
+
 );
 
+const HeaderWrapper = styled.div`
+  border-bottom: 1px solid black;
+  background-color: darkgrey;
+  & .MuiTab-wrapper {
+    padding: 10px;
+  }
+  & .MuiTypography-root {
+    font-weight: bold;
+    padding: 10px;
+    margin-right: 50px;
+    margin-left: 30px;
+  }
+`;
+
 export default Header;
-- 
cgit v1.2.3


From 7d09949d8903aca282e4349e1ccfd589e59a4624 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Tue, 31 Dec 2019 16:24:00 +0300
Subject: Use AppBar and wrap the Tabs in a styled component

---
 src/components/Header.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index 4eceb6d..cd217fc 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,23 +1,26 @@
 import React from "react";
-import { Tab, Tabs, Typography } from "@material-ui/core";
+import {
+  AppBar,
+  Tabs,
+  Tab,
+  Typography
+} from "@material-ui/core";
 import styled from 'styled-components';
 
 const Header = () => (
-  <HeaderWrapper>
-    <Tabs>
+  <AppBar position="static">
+    <TabsWrapper>
       <Typography variant="h4" id="logo"> ChronoCube </Typography>
       <Tab label="Home" />
       <Tab label="App" />
       <Tab label="Scoreboard" />
       <Tab label="News" />
-    </Tabs>
-  </HeaderWrapper>
-
+    </TabsWrapper>
+  </AppBar>
 );
 
-const HeaderWrapper = styled.div`
+const TabsWrapper = styled(Tabs)`
   border-bottom: 1px solid black;
-  background-color: darkgrey;
   & .MuiTab-wrapper {
     padding: 10px;
   }
-- 
cgit v1.2.3


From 488c4ed02814f35ba33bfd4bd23fa6968717c53b Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Tue, 31 Dec 2019 21:52:45 +0300
Subject: Create page state and pass it to Header

---
 src/components/Header.js | 21 ++++++++++++++-------
 src/index.js             | 28 +++++++++++++++++++---------
 2 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index cd217fc..cca73ed 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -7,17 +7,24 @@ import {
 } from "@material-ui/core";
 import styled from 'styled-components';
 
-const Header = () => (
+const Header = ({ setPage }) => {
+
+  const handleChange = (event, newPage) => {
+    setPage(newPage);
+  };
+
+  return (
   <AppBar position="static">
-    <TabsWrapper>
+    <TabsWrapper onChange={handleChange}>
       <Typography variant="h4" id="logo"> ChronoCube </Typography>
-      <Tab label="Home" />
-      <Tab label="App" />
-      <Tab label="Scoreboard" />
-      <Tab label="News" />
+      <Tab label="Home" value="home"/>
+      <Tab label="App" value="app"/>
+      <Tab label="Scoreboard" value="scoreboard"/>
+      <Tab label="News" value="news"/>
     </TabsWrapper>
   </AppBar>
-);
+  );
+};
 
 const TabsWrapper = styled(Tabs)`
   border-bottom: 1px solid black;
diff --git a/src/index.js b/src/index.js
index 512d416..bf09082 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 
 import styled from 'styled-components';
@@ -7,16 +7,26 @@ import CssBaseline from '@material-ui/core/CssBaseline'
 import Header from "./components/Header";
 
 
-const App = () => (
-  <Root>
-    <CssBaseline/>
-    <Header/>
-    <p> Page content here </p>
-  </Root>
-);
+const App = () => {
+
+  const [page, setPage] = useState('home');
+
+  return (
+    <Root>
+      <CssBaseline/>
+      <Header setPage={setPage} />
+      <h1> This is the {page} page! </h1>
+      <p>
+        This text is rendered outside of <code>Header</code> component, but
+        interacting with <code>Header</code> can influence content of this page!
+      </p>
+    </Root>
+  );
+};
 
 const Root = styled.div`
-  background: lightgrey;
+  background: cornsilk;
+  padding-bottom: 25px;
 `;
 
 
-- 
cgit v1.2.3


From 3524a41fc77b5fa3e6708cb3067d269d9fe62999 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Thu, 2 Jan 2020 13:31:20 +0300
Subject: Move Header.js to src/Header and reorder options

---
 src/components/Header.js        | 42 -----------------------------------------
 src/components/Header/Header.js | 42 +++++++++++++++++++++++++++++++++++++++++
 src/index.js                    |  4 ++--
 3 files changed, 44 insertions(+), 44 deletions(-)
 delete mode 100644 src/components/Header.js
 create mode 100644 src/components/Header/Header.js

diff --git a/src/components/Header.js b/src/components/Header.js
deleted file mode 100644
index cca73ed..0000000
--- a/src/components/Header.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from "react";
-import {
-  AppBar,
-  Tabs,
-  Tab,
-  Typography
-} from "@material-ui/core";
-import styled from 'styled-components';
-
-const Header = ({ setPage }) => {
-
-  const handleChange = (event, newPage) => {
-    setPage(newPage);
-  };
-
-  return (
-  <AppBar position="static">
-    <TabsWrapper onChange={handleChange}>
-      <Typography variant="h4" id="logo"> ChronoCube </Typography>
-      <Tab label="Home" value="home"/>
-      <Tab label="App" value="app"/>
-      <Tab label="Scoreboard" value="scoreboard"/>
-      <Tab label="News" value="news"/>
-    </TabsWrapper>
-  </AppBar>
-  );
-};
-
-const TabsWrapper = styled(Tabs)`
-  border-bottom: 1px solid black;
-  & .MuiTab-wrapper {
-    padding: 10px;
-  }
-  & .MuiTypography-root {
-    font-weight: bold;
-    padding: 10px;
-    margin-right: 50px;
-    margin-left: 30px;
-  }
-`;
-
-export default Header;
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
new file mode 100644
index 0000000..9bfe5c4
--- /dev/null
+++ b/src/components/Header/Header.js
@@ -0,0 +1,42 @@
+import React from "react";
+import {
+  AppBar,
+  Tabs,
+  Tab,
+  Typography
+} from "@material-ui/core";
+import styled from 'styled-components';
+
+const Header = ({ setPage }) => {
+
+  const handleChange = (event, newPage) => {
+    setPage(newPage);
+  };
+
+  return (
+  <AppBar position="static">
+    <TabsWrapper onChange={handleChange}>
+      <Typography variant="h4" id="logo"> ChronoCube </Typography>
+      <Tab label="App" value="app"/>
+      <Tab label="Profile" value="profile"/>
+      <Tab label="Scoreboard" value="scoreboard"/>
+      <Tab label="News" value="news"/>
+    </TabsWrapper>
+  </AppBar>
+  );
+};
+
+const TabsWrapper = styled(Tabs)`
+  border-bottom: 1px solid black;
+  & .MuiTab-wrapper {
+    padding: 10px;
+  }
+  & .MuiTypography-root {
+    font-weight: bold;
+    padding: 10px;
+    margin-right: 50px;
+    margin-left: 30px;
+  }
+`;
+
+export default Header;
diff --git a/src/index.js b/src/index.js
index bf09082..5c657f9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,12 +4,12 @@ import ReactDOM from 'react-dom';
 import styled from 'styled-components';
 import CssBaseline from '@material-ui/core/CssBaseline'
 
-import Header from "./components/Header";
+import Header from './components/Header/Header';
 
 
 const App = () => {
 
-  const [page, setPage] = useState('home');
+  const [page, setPage] = useState('app');
 
   return (
     <Root>
-- 
cgit v1.2.3