Create page state and pass it to Header

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;
 `;