Create Scoreboard component & integrate with API

1 files changed, 23 insertions, 5 deletions

diff --git a/src/index.js b/src/index.js
index 5c657f9..38a79a6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,10 +1,17 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 
+import {
+  Typography,
+  Paper,
+  Container,
+} from "@material-ui/core";
+
 import styled from 'styled-components';
 import CssBaseline from '@material-ui/core/CssBaseline'
 
 import Header from './components/Header/Header';
+import Scoreboard from "./components/Scoreboard/Scoreboard";
 
 
 const App = () => {
@@ -15,11 +22,22 @@ const App = () => {
     <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>
+      <Container maxWidth="xl">
+        <Paper elevation={4} style={{backgroundColor: "bisque"}}>
+          <Typography variant="h4"> This is the {page} page! </Typography>
+          {
+            (page === 'scoreboard')?
+              (<Scoreboard/>)
+              :
+              (
+                <p>
+                  This text is rendered outside of <code>Header</code> component, but
+                  interacting with <code>Header</code> can influence content of this page!
+                </p>
+              )
+          }
+        </Paper>
+      </Container>
     </Root>
   );
 };