40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import { Card, CardContent } from "@/components/ui/card";
|
|
|
|
const accentColors: Record<string, string> = {
|
|
Containers: "from-blue-500 to-blue-600",
|
|
"Hosts Online": "from-green-500 to-emerald-600",
|
|
GPU: "from-violet-500 to-purple-600",
|
|
"Emails Today": "from-amber-500 to-orange-600",
|
|
Alerts: "from-red-500 to-rose-600",
|
|
};
|
|
|
|
interface StatCardProps {
|
|
label: string;
|
|
value: string | number;
|
|
sub?: React.ReactNode;
|
|
}
|
|
|
|
export function StatCard({ label, value, sub }: StatCardProps) {
|
|
const gradient = accentColors[label] ?? "from-blue-500 to-blue-600";
|
|
|
|
return (
|
|
<Card className="card-hover-lift overflow-hidden relative group">
|
|
<div
|
|
className={`absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r ${gradient}`}
|
|
/>
|
|
<div
|
|
className={`absolute top-0 left-0 right-0 h-8 bg-gradient-to-b ${gradient} opacity-[0.03] group-hover:opacity-[0.06] transition-opacity`}
|
|
/>
|
|
<CardContent className="pt-4 pb-3 px-4 relative">
|
|
<p className="text-[10px] uppercase tracking-wider text-muted-foreground font-medium mb-1">
|
|
{label}
|
|
</p>
|
|
<p className="text-2xl font-bold text-foreground tabular-nums-transition">
|
|
{value}
|
|
</p>
|
|
{sub && <div className="mt-1 text-xs text-muted-foreground">{sub}</div>}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|