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/Header.js | 42 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/components/Header/Header.js

(limited to 'src/components/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;
-- 
cgit v1.2.3