Populate the rest of the data with some niceish styling

2 files changed, 41 insertions, 0 deletions

diff --git a/src/App.js b/src/App.js
index e7137a2..4abd1e4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -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%;
+    }
 }