diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.js | 12 | ||||
| -rw-r--r-- | src/Card.js | 6 |
2 files changed, 14 insertions, 4 deletions
@@ -1,3 +1,4 @@ +import React from "react"; import useSWR from "swr"; import { DateTime } from "luxon"; import { BrowserRouter, Route, Switch, Link } from "react-router-dom"; @@ -10,6 +11,8 @@ const url = "https://ritcoviddashboard.com/api/v0/history"; function App() { const { data: data, error: error } = useSWR(url); + const [timeDifference, setTimeDifference] = React.useState(1); + if (error) return ( <div className="App"> @@ -26,7 +29,7 @@ function App() { ); const latest = data[data.length - 1]; - const prior = data[data.length - 2]; + const prior = data[data.length - (1 + timeDifference)]; const local = DateTime.local().zoneName; const lastUpdate = DateTime.fromSQL(latest.last_updated, { zone: "UTC" }).setZone(local); const priorUpdate = DateTime.fromSQL(prior.last_updated, { zone: "UTC" }).setZone(local); @@ -57,6 +60,13 @@ function App() { minute: "2-digit", })} </h4> + + <button + onClick={() => setTimeDifference(timeDifference == 1 ? 5 : 1)} + class="bg-transparent text-sm hover:bg-orange-400 text-gray-600 hover:text-white py-1 my-1 px-2 border border-orange-300 hover:border-transparent rounded transition ease-in-out duration-300" + > + Use one {timeDifference == 1 ? "week" : "day"} ago + </button> <br /> <Switch> <Route exact path="/"> diff --git a/src/Card.js b/src/Card.js index 86ee54d..a296681 100644 --- a/src/Card.js +++ b/src/Card.js @@ -8,8 +8,8 @@ const Card = (props) => { diff = "+" + diff.toString(); } 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"> + <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} @@ -21,7 +21,7 @@ const Card = (props) => { </span> </p> <h3 className="text-base group-hover:text-white transition ease-in-out duration-300">{props.name}</h3> - </div> + </div> </Link> ); }; |