diff options
| -rw-r--r-- | src/Card.js | 13 | ||||
| -rw-r--r-- | src/MainPage.js | 37 |
2 files changed, 32 insertions, 18 deletions
diff --git a/src/Card.js b/src/Card.js index a296681..cac335c 100644 --- a/src/Card.js +++ b/src/Card.js @@ -3,21 +3,20 @@ import { Link } from "react-router-dom"; import "./Card.css"; const Card = (props) => { - let diff = props.latest - props.prior; - if (diff >= 0) { - diff = "+" + diff.toString(); + let diff = props.diff.toString(); + if (diff.charAt(0) != "-") { + diff = "+" + diff; } + return ( <Link className="Card" style={{ padding: 0 }} to={props.link}> <div className="group bg-white hover:bg-orange-400 rounded-lg border-2 border-orange-300 hover:border-orange-400 p-4 m-6 transition ease-in-out duration-300"> <p> <span className="text-2xl group-hover:text-white transition ease-in-out duration-300"> - {props.latest} - {props.suffix}{" "} + {props.latest}{" "} </span> <span className="Diff text-gray-600 group-hover:text-gray-100 text-sm transition ease-in-out duration-300"> - ({diff} - {props.suffix}) + ({diff}) </span> </p> <h3 className="text-base group-hover:text-white transition ease-in-out duration-300">{props.name}</h3> diff --git a/src/MainPage.js b/src/MainPage.js index 7dd0cc9..f00db6a 100644 --- a/src/MainPage.js +++ b/src/MainPage.js @@ -22,18 +22,33 @@ const MainPage = (props) => { <Card name="Students" latest={latest.total_students} - prior={prior.total_students} + diff={latest.total_students - prior.total_students} link="/totalstudents" /> - <Card name="Staff" latest={latest.total_staff} prior={prior.total_staff} link="/totalstaff" /> + <Card + name="Staff" + latest={latest.total_staff} + diff={latest.total_staff - 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} link="/newstudents" /> - <Card name="Staff" latest={latest.new_staff} prior={prior.new_staff} link="/newstaff" /> + <Card + name="Students" + latest={latest.new_students} + diff={latest.new_students - prior.new_students} + link="/newstudents" + /> + <Card + name="Staff" + latest={latest.new_staff} + diff={latest.new_staff - prior.new_staff} + link="/newstaff" + /> </div> </div> <br /> @@ -47,13 +62,13 @@ const MainPage = (props) => { <Card name="On Campus" latest={latest.quarantine_on_campus} - prior={prior.quarantine_on_campus} + diff={latest.quarantine_on_campus - prior.quarantine_on_campus} link="/quarantineoncampus" /> <Card name="Off Campus" latest={latest.quarantine_off_campus} - prior={prior.quarantine_off_campus} + diff={latest.quarantine_off_campus - prior.quarantine_off_campus} link="/quarantineoffcampus" /> </div> @@ -68,13 +83,13 @@ const MainPage = (props) => { <Card name="On Campus" latest={latest.isolation_on_campus} - prior={prior.isolation_on_campus} + diff={latest.isolation_on_campus - prior.isolation_on_campus} link="isolationoncampus" /> <Card name="Off Campus" latest={latest.isolation_off_campus} - prior={prior.isolation_off_campus} + diff={latest.isolation_off_campus - prior.isolation_off_campus} link="isolationoffcampus" /> </div> @@ -86,7 +101,7 @@ const MainPage = (props) => { <Card name="Tests to date" latest={latest.tests_administered} - prior={prior.tests_administered} + diff={latest.tests_administered - prior.tests_administered} link="/tests" /> </div> @@ -97,8 +112,8 @@ const MainPage = (props) => { <div className="Section"> <Card name="Beds Available" - latest={latest.beds_available} - prior={prior.beds_available} + latest={latest.beds_available + "%"} + diff={latest.beds_available - prior.beds_available + "%"} suffix="%" link="/beds" /> |