44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
|
import React from "react";
|
||
|
|
|
||
|
|
interface StatCardProps {
|
||
|
|
label: string;
|
||
|
|
value: string;
|
||
|
|
trend?: string;
|
||
|
|
color: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const StatCard: React.FC<StatCardProps> = ({
|
||
|
|
label,
|
||
|
|
value,
|
||
|
|
trend,
|
||
|
|
color,
|
||
|
|
}) => (
|
||
|
|
<div className="bg-white p-5 rounded-2xl shadow-sm border border-slate-100 group hover:shadow-md transition-shadow">
|
||
|
|
<div className="flex justify-between items-start mb-3">
|
||
|
|
<span className="text-[9px] font-black text-slate-400 uppercase tracking-[0.2em]">
|
||
|
|
{label}
|
||
|
|
</span>
|
||
|
|
{trend && (
|
||
|
|
<span
|
||
|
|
className={`text-[10px] font-bold px-2 py-0.5 rounded-md ${
|
||
|
|
trend.startsWith("+")
|
||
|
|
? "bg-emerald-50 text-emerald-600"
|
||
|
|
: "bg-red-50 text-red-600"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{trend}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div className="flex items-baseline space-x-1">
|
||
|
|
<span className={`text-2xl font-black text-[#002147]`}>{value}</span>
|
||
|
|
</div>
|
||
|
|
<div className={`mt-4 h-1 w-10 rounded-full ${color}`}></div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
export default StatCard;
|
||
|
|
|
||
|
|
|
||
|
|
|