diff options
| -rw-r--r-- | src/App.js | 34 | ||||
| -rw-r--r-- | src/Card.css | 7 |
2 files changed, 41 insertions, 0 deletions
@@ -32,6 +32,40 @@ function App() { <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 className="Section"> + <Card name="New Student Cases" latest={latest.new_students} prior={prior.new_students} /> + <Card name="New Staff Cases" latest={latest.new_staff} prior={prior.new_staff} /> + </div> + <div className="Section"> + <Card + name="Quarantine On Campus" + latest={latest.quarantine_on_campus} + prior={prior.quarantine_on_campus} + /> + <Card + name="Quarantine Off Campus" + latest={latest.quarantine_off_campus} + prior={prior.quarantine_off_campus} + /> + </div> + <div className="Section"> + <Card + name="Isolation On Campus" + latest={latest.isolation_on_campus} + prior={prior.isolation_on_campus} + /> + <Card + name="Isolation Off Campus" + latest={latest.isolation_off_campus} + prior={prior.isolation_off_campus} + /> + </div> + <div className="Section"> + <Card name="Tests Administered" latest={latest.tests_administered} prior={prior.tests_administered} /> + </div> + <div className="Section"> + <Card name="Beds Available" latest={latest.beds_available} prior={prior.beds_available} suffix="%" /> + </div> </div> ); } diff --git a/src/Card.css b/src/Card.css index 68d41ed..745a7c8 100644 --- a/src/Card.css +++ b/src/Card.css @@ -1,3 +1,10 @@ .Card { padding: 16px; + width: 50%; +} + +@media screen and (min-width: 1080px) { + .Card { + width: 20%; + } } |