add links to all stats

1 files changed, 40 insertions, 9 deletions

diff --git a/src/MainPage.js b/src/MainPage.js
index 3ce4c22..82cb196 100644
--- a/src/MainPage.js
+++ b/src/MainPage.js
@@ -10,16 +10,21 @@ const MainPage = (props) => {
             <div id="total">
                 <h4 className="text-2xl">Total Positive Cases Since August 19 (First Day of Classes)</h4>
                 <div className="Section">
-                    <Card name="Students" latest={latest.total_students} prior={prior.total_students} />
-                    <Card name="Staff" latest={latest.total_staff} prior={prior.total_staff} />
+                    <Card
+                        name="Students"
+                        latest={latest.total_students}
+                        prior={prior.total_students}
+                        link="/totalstudents"
+                    />
+                    <Card name="Staff" latest={latest.total_staff} prior={prior.total_staff} link="/totalstaff" />
                 </div>
             </div>
             <br />
             <div id="new">
                 <h4 className="text-2xl">New Positive Cases From Past 14 Days</h4>
                 <div className="Section">
-                    <Card name="Students" latest={latest.new_students} prior={prior.new_students} />
-                    <Card name="Staff" latest={latest.new_staff} prior={prior.new_staff} />
+                    <Card name="Students" latest={latest.new_students} prior={prior.new_students} link="/newstudents" />
+                    <Card name="Staff" latest={latest.new_staff} prior={prior.new_staff} link="/newstaff" />
                 </div>
             </div>
             <br />
@@ -30,8 +35,18 @@ const MainPage = (props) => {
                     to see if they become sick.
                 </h5>
                 <div className="Section">
-                    <Card name="On Campus" latest={latest.quarantine_on_campus} prior={prior.quarantine_on_campus} />
-                    <Card name="Off Campus" latest={latest.quarantine_off_campus} prior={prior.quarantine_off_campus} />
+                    <Card
+                        name="On Campus"
+                        latest={latest.quarantine_on_campus}
+                        prior={prior.quarantine_on_campus}
+                        link="/quarantineoncampus"
+                    />
+                    <Card
+                        name="Off Campus"
+                        latest={latest.quarantine_off_campus}
+                        prior={prior.quarantine_off_campus}
+                        link="/quarantineoffcampus"
+                    />
                 </div>
             </div>
             <br />
@@ -41,15 +56,30 @@ const MainPage = (props) => {
                     Isolation separates sick people with a contagious disease from people who are not sick.
                 </h5>
                 <div className="Section">
-                    <Card name="On Campus" latest={latest.isolation_on_campus} prior={prior.isolation_on_campus} />
-                    <Card name="Off Campus" latest={latest.isolation_off_campus} prior={prior.isolation_off_campus} />
+                    <Card
+                        name="On Campus"
+                        latest={latest.isolation_on_campus}
+                        prior={prior.isolation_on_campus}
+                        link="isolationoncampus"
+                    />
+                    <Card
+                        name="Off Campus"
+                        latest={latest.isolation_off_campus}
+                        prior={prior.isolation_off_campus}
+                        link="isolationoffcampus"
+                    />
                 </div>
             </div>
             <br />
             <div id="tests">
                 <h4 className="text-2xl">Number of Tests Administered by Student Health Center</h4>
                 <div className="Section">
-                    <Card name="Tests to date" latest={latest.tests_administered} prior={prior.tests_administered} />
+                    <Card
+                        name="Tests to date"
+                        latest={latest.tests_administered}
+                        prior={prior.tests_administered}
+                        link="/tests"
+                    />
                 </div>
             </div>
             <br />
@@ -61,6 +91,7 @@ const MainPage = (props) => {
                         latest={latest.beds_available}
                         prior={prior.beds_available}
                         suffix="%"
+                        link="/beds"
                     />
                 </div>
             </div>