diff options
| -rw-r--r-- | src/App.css | 34 | ||||
| -rw-r--r-- | src/App.js | 10 | ||||
| -rw-r--r-- | src/Card.css | 3 | ||||
| -rw-r--r-- | src/Card.js | 24 |
4 files changed, 38 insertions, 33 deletions
diff --git a/src/App.css b/src/App.css index 78b8850..0f57d9d 100644 --- a/src/App.css +++ b/src/App.css @@ -2,37 +2,9 @@ text-align: center; } -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; +.Section { display: flex; - flex-direction: column; - align-items: center; justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } + margin-left: auto; + margin-right: auto; } @@ -1,5 +1,5 @@ import useSWR from "swr"; -import logo from "./logo.svg"; +import Card from "./Card"; import "./App.css"; const url = "https://rcpoller.galenguyer.com/api/v0/history"; @@ -22,10 +22,16 @@ function App() { </div> ); + const latest = data[data.length - 1]; + const prior = data[data.length - 2]; + return ( <div className="App"> <h1>RIT Covid Dashboard</h1> - <h2>Data Loaded</h2> + <div className="Section"> + <Card name="Total Student Cases" latest={latest.total_students} prior={prior.total_students} /> + <Card name="Total Staff Cases" latest={latest.total_staff} prior={prior.total_staff} /> + </div> </div> ); } diff --git a/src/Card.css b/src/Card.css new file mode 100644 index 0000000..68d41ed --- /dev/null +++ b/src/Card.css @@ -0,0 +1,3 @@ +.Card { + padding: 16px; +} diff --git a/src/Card.js b/src/Card.js new file mode 100644 index 0000000..310848d --- /dev/null +++ b/src/Card.js @@ -0,0 +1,24 @@ +import React from "react"; +import "./Card.css"; + +const Card = (props) => { + let diff = props.latest - props.prior; + if (diff >= 0) { + diff = "+" + diff.toString(); + } + return ( + <div className="Card"> + <h3>{props.name}</h3> + <p> + {props.latest} + {props.suffix}{" "} + <span className="Diff"> + ({diff} + {props.suffix}) + </span> + </p> + </div> + ); +}; + +export default Card; |