49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
|
import React from "react";
|
||
|
|
import { fetchApi, handleResponse } from "./apiClient.tsx";
|
||
|
|
import useSWR from "swr";
|
||
|
|
import { eachDayOfInterval, endOfMonth, startOfMonth, subMonths } from "date-fns";
|
||
|
|
import { UTCDateMini } from "@date-fns/utc";
|
||
|
|
import { Counter } from "./Counter.tsx";
|
||
|
|
|
||
|
|
export function HomePage() {
|
||
|
|
const globalStats = useSWR(
|
||
|
|
["stats", "GET", {}] as const,
|
||
|
|
(args) => fetchApi(...args).then(handleResponse),
|
||
|
|
{ refreshInterval: 2_000 },
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="my-16 flex flex-col gap-16 text-zinc-600 dark:text-zinc-400">
|
||
|
|
<p className="flex flex-col items-center gap-2 text-2xl sm:text-3xl">
|
||
|
|
<span>Pixels painted</span>
|
||
|
|
<Counter
|
||
|
|
className="font-bold text-zinc-700 dark:text-zinc-300"
|
||
|
|
value={globalStats.data?.pixelCount ?? 0}
|
||
|
|
digits={12}
|
||
|
|
transitionDurationMs={3_000}
|
||
|
|
/>
|
||
|
|
</p>
|
||
|
|
<div className="flex flex-col md:flex-row gap-16 md:gap-8">
|
||
|
|
<p className="flex-grow flex flex-col items-center gap-2 text-2xl">
|
||
|
|
<span>Images generated</span>
|
||
|
|
<Counter
|
||
|
|
className="font-bold text-zinc-700 dark:text-zinc-300"
|
||
|
|
value={globalStats.data?.imageCount ?? 0}
|
||
|
|
digits={9}
|
||
|
|
transitionDurationMs={1_500}
|
||
|
|
/>
|
||
|
|
</p>
|
||
|
|
<p className="flex-grow flex flex-col items-center gap-2 text-2xl">
|
||
|
|
<span>Unique users</span>
|
||
|
|
<Counter
|
||
|
|
className="font-bold text-zinc-700 dark:text-zinc-300"
|
||
|
|
value={globalStats.data?.userCount ?? 0}
|
||
|
|
digits={6}
|
||
|
|
transitionDurationMs={1_500}
|
||
|
|
/>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|