aboutsummaryrefslogtreecommitdiff
path: root/src/index.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/index.js')
-rw-r--r--src/index.js41
1 files changed, 31 insertions, 10 deletions
diff --git a/src/index.js b/src/index.js
index f062952..de4cb2a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,31 +1,52 @@
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 Timer from './components/Timer/Timer';
+import Scoreboard from "./components/Scoreboard/Scoreboard";
const App = () => {
const [page, setPage] = useState('app');
+ const getPageComponent = page => {
+ switch (page) {
+ case 'app':
+ return (<Timer/>);
+ case 'scoreboard':
+ return (<Scoreboard/>);
+ default:
+ return (
+ <p>
+ This text is rendered outside of <code>Header</code> component, but
+ interacting with <code>Header</code> can influence content of this page!
+ </p>
+ )
+ }
+ };
+
+ const classes = useStyles();
return (
- <Root>
+ <ThemeProvider theme={theme}>
<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>
- <Timer />
- </Root>
+ <Header setPage={setPage}/>
+ <Box className={classes.root}>
+ <Typography variant="h4"> This is the {page} page! </Typography>
+ { getPageComponent(page)}
+ </Box>
+ </ThemeProvider>
);
};
-
const Root = styled.div`
background: cornsilk;
padding-bottom: 25px;