1 files changed, 76 insertions, 0 deletions
diff --git a/src/pages/Index.jsx b/src/pages/Index.jsx
new file mode 100644
index 0000000..78c32f0
--- /dev/null
+++ b/src/pages/Index.jsx
@@ -0,0 +1,76 @@
+import Card from "../components/Card";
+import "./Index.css";
+
+const Index = (props) => {
+    const response = props.response;
+    if (response.loading) {
+        return <div>Loading...</div>;
+    }
+
+    const data = response.data;
+
+    const latest = data[data.length - 1];
+
+    return (
+        <div>
+            <div>
+                <div className="Message">
+                    This site shows data from the 2020 Fall and 2021 Spring semesters. For the latest data, visit{" "}
+                    <a href="https://ritcoviddashboard.com/">ritcoviddashboard.com</a>
+                </div>
+            </div>
+            <div className="Section" id="total">
+                <div className="Title">Total Positive Cases Since August 19 (First Day of Classes)</div>
+                <div className="Cards">
+                    <Card name="Students" link="/totalstudents" latest={latest["total_students"]} />
+                    <Card name="Staff" link="/totalstaff" latest={latest["total_staff"]} />
+                </div>
+            </div>
+
+            <div className="Section" id="new">
+                <div className="Title">New Positive Cases From Past 14 Days</div>
+                <div className="Cards">
+                    <Card name="Students" link="/newstudents" latest={latest["new_students"]} />
+                    <Card name="Staff" link="/newstaff" latest={latest["new_staff"]} />
+                </div>
+            </div>
+
+            <div className="Section" id="quarantine">
+                <div className="Title">Number of Students in Quarantine</div>
+                <p className="Tip">
+                    Quarantine separates and restricts the movement of people who were exposed to a contagious disease
+                    to see if they become sick.
+                </p>
+                <div className="Cards">
+                    <Card name="On Campus" link="/quarantineoncampus" latest={latest["quarantine_on_campus"]} />
+                    <Card name="Off Campus" link="/quarantineoffcampus" latest={latest["quarantine_off_campus"]} />
+                </div>
+            </div>
+
+            <div className="Section" id="isolation">
+                <div className="Title">Number of Students in Isolation</div>
+                <p className="Tip">Isolation separates sick people with a contagious disease from people who are not sick.</p>
+                <div className="Cards">
+                    <Card name="On Campus" link="/isolationoncampus" latest={latest["isolation_on_campus"]} />
+                    <Card name="Off Campus" link="/isolationoffcampus" latest={latest["isolation_off_campus"]} />
+                </div>
+            </div>
+
+            <div className="Section" id="tests">
+                <div className="Title">Tests</div>
+                <div className="Cards">
+                    <Card name="Tests Administered" link="/tests" latest={latest["tests_administered"]} />
+                </div>
+            </div>
+
+            <div className="Section" id="beds">
+                <div className="Title">Quarantine/Isolation Bed Availability On-campus</div>
+                <div className="Cards">
+                    <Card name="Beds Available" link="/beds" latest={latest["beds_available"]} suffix="%" />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Index;