58 lines
1.6 KiB
JavaScript
58 lines
1.6 KiB
JavaScript
import BasicPage from "../../components/basic-page-template";
|
|
import WCard from "../../components/werefox-card";
|
|
import { useEffect, useState } from "react";
|
|
|
|
function getTimes(interval) {
|
|
let expected = Date.now() - new Date("December 11, 2020 00:00:00") + interval;
|
|
let days = Math.round(expected / 1000 / 60 / 60 / 24);
|
|
let hours = (new Date(expected).getHours() + 6) % 24;
|
|
let minutes = new Date(expected).getMinutes();
|
|
let seconds = new Date(expected).getSeconds();
|
|
return {
|
|
expected: expected,
|
|
days: days,
|
|
hours: hours,
|
|
minutes: minutes,
|
|
seconds: seconds,
|
|
};
|
|
}
|
|
|
|
export default function HRT() {
|
|
const [timesArray, setTimesArray] = useState(getTimes());
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setTimesArray(getTimes(0), 1000);
|
|
});
|
|
return () => clearInterval(interval);
|
|
}, [getTimes, setTimesArray]);
|
|
|
|
const initialTimesArray = [
|
|
`${timesArray["days"]} days, `,
|
|
`${timesArray["hours"]} hours, `,
|
|
`${timesArray["minutes"]} minutes, `,
|
|
`and ${timesArray["seconds"]} seconds`,
|
|
];
|
|
|
|
return (
|
|
<BasicPage
|
|
page_title="Alexis Werefox HRT Tracker"
|
|
card_title="Track my HRT progress!"
|
|
>
|
|
<WCard>
|
|
<p className="p-6 text-lg md:text-2xl text-center text-werefox-blue-dark dark:text-werefox-blue">
|
|
I'm so glad you're interested!!
|
|
<br />
|
|
I have been on HRT for:
|
|
<br />
|
|
<p className="grid grid-cols-1 grid-rows-4">
|
|
{initialTimesArray.map((t, n) => (
|
|
<p id={`time_${n}`}>{t}</p>
|
|
))}
|
|
</p>
|
|
</p>
|
|
</WCard>
|
|
</BasicPage>
|
|
);
|
|
}
|