60 lines
1.8 KiB
JavaScript
60 lines
1.8 KiB
JavaScript
import BasicPage from "../../components/basic-page";
|
|
import WCard from "../../components/werefox-card";
|
|
import { useEffect, useState } from "react";
|
|
|
|
function getTimes() {
|
|
const total_ms =
|
|
Date.now() - new Date("December 11, 2020 00:00:00 GMT-05:00");
|
|
const days = Math.floor(total_ms / 1000 / 60 / 60 / 24);
|
|
const days_in_ms = days * 1000 * 60 * 60 * 24;
|
|
const hours = Math.floor((total_ms - days_in_ms) / 1000 / 60 / 60);
|
|
const hours_in_ms = hours * 1000 * 60 * 60;
|
|
const minutes = Math.floor((total_ms - days_in_ms - hours_in_ms) / 1000 / 60);
|
|
const minutes_in_ms = minutes * 1000 * 60;
|
|
const seconds = Math.floor(
|
|
(total_ms - days_in_ms - hours_in_ms - minutes_in_ms) / 1000
|
|
);
|
|
return {
|
|
days: `${days} days,`,
|
|
hours: `${hours} hours,`,
|
|
minutes: `${minutes} minutes,`,
|
|
seconds: `and ${seconds} seconds.`,
|
|
};
|
|
}
|
|
|
|
export const getServerSideProps = async () => {
|
|
return {
|
|
props: {
|
|
startTimes: getTimes(),
|
|
},
|
|
};
|
|
};
|
|
|
|
export default function HRT({ startTimes }) {
|
|
const [timesArray, setTimesArray] = useState(startTimes);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setTimesArray(getTimes(), 1000);
|
|
});
|
|
return () => clearInterval(interval);
|
|
}, [getTimes, setTimesArray]);
|
|
|
|
return (
|
|
<BasicPage
|
|
page_title="Alexis Werefox HRT Tracker"
|
|
card_title="Track my HRT progress!"
|
|
page_button_title="Take me back home!"
|
|
>
|
|
<WCard title={`I'm so glad you're interested!!`}>
|
|
<div className="p-2 sm:text-xl text-lg text-center text-skye-werefox-blue-dark dark:text-skye-werefox-blue grid grid-cols-1 grid-rows-4 gap-2">
|
|
<p>I've been on HRT for:</p>
|
|
{Object.keys(timesArray).map((t) => (
|
|
<p key={t}>{timesArray[t]}</p>
|
|
))}
|
|
</div>
|
|
</WCard>
|
|
</BasicPage>
|
|
);
|
|
}
|