43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import { LucideIcon } from "lucide-react";
|
|
|
|
interface StatCardProps {
|
|
title: string;
|
|
value: string;
|
|
change: string;
|
|
changeType: "positive" | "negative" | "neutral";
|
|
icon: LucideIcon;
|
|
delay?: number;
|
|
}
|
|
|
|
const StatCard = ({ title, value, change, changeType, icon: Icon, delay = 0 }: StatCardProps) => {
|
|
return (
|
|
<div
|
|
className="glass-card rounded-xl p-6 animate-fade-in"
|
|
style={{ animationDelay: `${delay}ms` }}
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-muted-foreground">{title}</p>
|
|
<p className="mt-2 text-3xl font-display font-bold text-foreground">{value}</p>
|
|
<p
|
|
className={`mt-1 text-sm font-medium ${
|
|
changeType === "positive"
|
|
? "text-success"
|
|
: changeType === "negative"
|
|
? "text-destructive"
|
|
: "text-muted-foreground"
|
|
}`}
|
|
>
|
|
{change}
|
|
</p>
|
|
</div>
|
|
<div className="w-11 h-11 rounded-lg bg-accent/10 flex items-center justify-center">
|
|
<Icon className="w-5 h-5 text-accent" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StatCard;
|