38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { Card } from "../ui/card";
|
|
import { LucideIcon, TrendingUp, TrendingDown } from "lucide-react";
|
|
|
|
interface StatCardProps {
|
|
title: string;
|
|
value: string | number;
|
|
icon: LucideIcon;
|
|
trend?: {
|
|
value: string;
|
|
positive: boolean;
|
|
};
|
|
iconColor?: string;
|
|
}
|
|
|
|
export function StatCard({ title, value, icon: Icon, trend, iconColor = "text-primary" }: StatCardProps) {
|
|
return (
|
|
<Card className="p-6">
|
|
<div className="flex items-start justify-between mb-4">
|
|
<p className="text-[14px] text-muted-foreground">{title}</p>
|
|
<Icon className={`w-5 h-5 ${iconColor}`} />
|
|
</div>
|
|
<p className="text-[28px] leading-[36px] mb-2">{value}</p>
|
|
{trend && (
|
|
<div className="flex items-center gap-1 text-[12px]">
|
|
{trend.positive ? (
|
|
<TrendingUp className="w-3 h-3 text-accent-positive" />
|
|
) : (
|
|
<TrendingDown className="w-3 h-3 text-accent-error" />
|
|
)}
|
|
<span className={trend.positive ? "text-accent-positive" : "text-accent-error"}>
|
|
{trend.value}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|