File size: 1,163 Bytes
201b13c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | export default function MetricCard({ label, value, detail, tone = "steel" }) {
const toneClasses = {
steel: "from-slate-200/10 to-transparent text-slate-100",
success: "from-emerald-300/[0.15] to-transparent text-emerald-100",
warning: "from-amber-300/[0.15] to-transparent text-amber-100",
danger: "from-rose-300/[0.15] to-transparent text-rose-100",
accent: "from-cyan-300/[0.15] to-transparent text-cyan-100",
}
return (
<div className="surface-card p-5">
<div className={`absolute inset-x-0 top-0 h-24 bg-gradient-to-br ${toneClasses[tone] || toneClasses.steel}`} />
<div className="relative">
<p className="eyebrow">{label}</p>
<div className="mt-4 flex items-end justify-between gap-4">
<p className="font-display text-4xl font-semibold tracking-tight text-slate-50">{value}</p>
<span className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs uppercase tracking-[0.24em] text-slate-300">
Live
</span>
</div>
{detail ? <p className="mt-4 text-sm leading-6 text-slate-400">{detail}</p> : null}
</div>
</div>
)
}
|