37 lines
1.3 KiB
React
37 lines
1.3 KiB
React
export default function StatCard({ label, value, sub, accent, details, detailsPosition = 'below' }) {
|
|
const showDetails = details?.length > 0
|
|
const detailsOnRight = showDetails && detailsPosition === 'right'
|
|
|
|
return (
|
|
<div className="bg-slate-900 border border-slate-800 rounded-xl p-4 min-w-0">
|
|
<div className={`flex ${detailsOnRight ? 'items-start justify-between gap-4' : 'flex-col gap-1'}`}>
|
|
<div className="min-w-0">
|
|
<p className="text-slate-400 text-xs uppercase tracking-widest truncate">{label}</p>
|
|
<p className={`text-3xl font-bold ${accent ?? 'text-slate-100'}`}>{value}</p>
|
|
{sub && <p className="text-slate-400 text-sm">{sub}</p>}
|
|
</div>
|
|
|
|
{detailsOnRight && (
|
|
<div className="space-y-0.5 text-right shrink-0">
|
|
{details.map((line) => (
|
|
<p key={line} className="text-slate-500 text-xs font-medium">
|
|
{line}
|
|
</p>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{showDetails && !detailsOnRight && (
|
|
<div className="mt-1 space-y-0.5">
|
|
{details.map((line) => (
|
|
<p key={line} className="text-slate-500 text-xs">
|
|
{line}
|
|
</p>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|