File size: 1,269 Bytes
adea8c3 3fc3cc7 adea8c3 3fc3cc7 adea8c3 3fc3cc7 adea8c3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | import React from "react";
import { useQuery } from "@tanstack/react-query";
import { Trophy, Zap, Activity } from "lucide-react";
import { fetchStats, fetchHealth } from "../api";
import StatCard from "./StatCard";
const StatsRow: React.FC = () => {
const { data: stats } = useQuery({
queryKey: ["stats"],
queryFn: fetchStats,
refetchInterval: 30_000,
});
const { data: health } = useQuery({
queryKey: ["health"],
queryFn: fetchHealth,
refetchInterval: 10_000,
});
return (
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<StatCard
label="Total Episodes"
value={stats?.total_episodes ?? 0}
icon={<Trophy className="w-5 h-5 text-amber-600" />}
iconBg="bg-amber-50 border border-amber-100"
/>
<StatCard
label="Avg. Score"
value={stats?.avg_score?.toFixed(2) ?? "0.00"}
icon={<Zap className="w-5 h-5 text-blue-600" />}
iconBg="bg-blue-50 border border-blue-100"
/>
<StatCard
label="Active Episodes"
value={health?.active_episodes ?? 0}
icon={<Activity className="w-5 h-5 text-emerald-600" />}
iconBg="bg-emerald-50 border border-emerald-100"
/>
</div>
);
};
export default StatsRow;
|