24 lines
890 B
TypeScript
24 lines
890 B
TypeScript
import { StatCardProps } from "@/constants/types";
|
|
import { colorMap } from "@/constants/constant";
|
|
|
|
|
|
|
|
export default function StatCard({ title, value, subtitle, progress, color }: StatCardProps) {
|
|
return (
|
|
<div className="rounded-xl border border-[#14253d] bg-[#0c1a2c] p-4 flex flex-col justify-between ">
|
|
<div>
|
|
<span className="text-xs font-bold uppercase tracking-wider text-gray-400">{title}</span>
|
|
<div className="text-4xl font-bold text-white mt-1">{value}</div>
|
|
</div>
|
|
<div >
|
|
<span className="text-xs text-gray-400">{subtitle}</span>
|
|
<div className="w-full bg-[#162a45] h-1.5 rounded-full mt-2 overflow-hidden">
|
|
<div
|
|
className={`h-1.5 rounded-full ${colorMap[color]} transition-all duration-500`}
|
|
style={{ width: `${progress}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |