66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
import { StatCardProps } from "@/types/types";
|
|
import { colorMap } from "@/constants/constant";
|
|
|
|
export default function StatCard({
|
|
title,
|
|
value,
|
|
variant = "progress",
|
|
subtitle,
|
|
progress,
|
|
color = "teal",
|
|
icon: Icon,
|
|
badgeText,
|
|
badgeClassName = "text-slate-500 font-mono uppercase",
|
|
iconContainerClassName = "bg-[#11233a] border-[#1b2c3f]/50 text-cyan-400",
|
|
isActiveCard = false,
|
|
}: StatCardProps) {
|
|
|
|
// Base structural classes matched exactly to your dark UI design
|
|
const cardBorder = isActiveCard ? "border-[#0d9488]" : "border-[#142538]";
|
|
|
|
return (
|
|
<div className={`relative rounded-2xl border ${cardBorder} bg-[#091624] p-5 flex flex-col justify-between min-h-[142px] w-full transition-all duration-300`}>
|
|
|
|
{/* --- TOP HEADER SECTION --- */}
|
|
<div className="flex items-center justify-between w-full">
|
|
{variant === "icon" && Icon ? (
|
|
<div className={`flex h-9 w-9 items-center justify-center rounded-lg border ${iconContainerClassName}`}>
|
|
<Icon size={18} />
|
|
</div>
|
|
) : (
|
|
<span className="text-xs font-bold uppercase tracking-wider text-slate-400/80">
|
|
{title}
|
|
</span>
|
|
)}
|
|
|
|
{badgeText && (
|
|
<span className={`text-[10px] font-semibold tracking-wider ${badgeClassName}`}>
|
|
{badgeText}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* --- BODY STATS SECTION --- */}
|
|
<div className="mt-4 flex-grow flex flex-col justify-end">
|
|
<div className="text-3xl font-extrabold text-white tracking-tight leading-none">
|
|
{value}
|
|
</div>
|
|
|
|
{/* Subtitle / Bottom Label text arrangement layout swap */}
|
|
<p className="text-xs font-semibold text-slate-400/70 mt-2">
|
|
{variant === "icon" ? title : subtitle}
|
|
</p>
|
|
</div>
|
|
|
|
{/* --- PROGRESS LAYER (Only renders if variant="progress") --- */}
|
|
{variant === "progress" && progress !== undefined && (
|
|
<div className="w-full bg-[#162a45] h-1.5 rounded-full mt-3 overflow-hidden">
|
|
<div
|
|
className={`h-1.5 rounded-full ${colorMap[color] || 'bg-teal-500'} transition-all duration-500`}
|
|
style={{ width: `${progress}%` }}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |