37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { StatisticCardItem } from "../_components/statistic-card-item";
|
||
|
|
import { useQuery } from "@tanstack/react-query";
|
||
|
|
import countStatisticApi from "@/shared/services/count";
|
||
|
|
import { STAT_CARDS } from "../_components/statistic-config";
|
||
|
|
|
||
|
|
const formatNumber = (n?: number) =>
|
||
|
|
typeof n === "number" ? n.toLocaleString("id-ID") : "-";
|
||
|
|
export function StatisticCard() {
|
||
|
|
const { data, isLoading } = useQuery({
|
||
|
|
queryKey: ["count"],
|
||
|
|
queryFn: () =>
|
||
|
|
countStatisticApi.getCountStatistic({ skipAuth: true }).then((r) => r),
|
||
|
|
staleTime: 5000,
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="@container/hero-statistic container">
|
||
|
|
<div className="@container/hero-statistic container px-0 px-4 @3xl/hero-statistic:absolute @3xl/hero-statistic:inset-x-0 @3xl/hero-statistic:-translate-y-1/2">
|
||
|
|
<div className="mx-auto grid grid-cols-1 items-center justify-center gap-5 @xl/hero-statistic:grid-cols-2 @6xl/hero-statistic:grid-cols-5">
|
||
|
|
{STAT_CARDS.map((cfg) => (
|
||
|
|
<StatisticCardItem
|
||
|
|
key={cfg.key}
|
||
|
|
url={cfg.url}
|
||
|
|
icon={cfg.icon}
|
||
|
|
title={cfg.title}
|
||
|
|
value={formatNumber(data?.[cfg.key])}
|
||
|
|
loading={isLoading}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|