32 أسطر
1.1 KiB
TypeScript
32 أسطر
1.1 KiB
TypeScript
import { ArrowDownLeft, ArrowUpRight, Minus } from "lucide-react";
|
|
|
|
import type { StatMetric } from "@/types";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const trendStyles = {
|
|
up: "text-emerald-300",
|
|
down: "text-rose-300",
|
|
neutral: "text-amber-200",
|
|
} as const;
|
|
|
|
export function StatCard({ metric }: { metric: StatMetric }) {
|
|
const Icon = metric.trend === "up" ? ArrowUpRight : metric.trend === "down" ? ArrowDownLeft : Minus;
|
|
|
|
return (
|
|
<Card className="ornament-grid">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-semibold text-muted-foreground">{metric.label}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold text-foreground">{metric.value}</div>
|
|
<p className={cn("mt-1 flex items-center gap-1 text-xs", trendStyles[metric.trend])}>
|
|
<Icon className="h-3.5 w-3.5" />
|
|
{metric.delta}
|
|
</p>
|
|
{metric.note ? <p className="mt-2 text-xs text-muted-foreground">{metric.note}</p> : null}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|