Julian Tabel
42b66ee9a2
Co-authored-by: Julian Tabel <juliantabel.jt@gmail.com> Co-committed-by: Julian Tabel <juliantabel.jt@gmail.com>
32 lines
906 B
TypeScript
32 lines
906 B
TypeScript
interface StatCardProps {
|
|
label: string
|
|
value: number
|
|
total?: number | undefined
|
|
color: string
|
|
}
|
|
|
|
const colorClasses: Record<string, string> = {
|
|
blue: 'border-status-completed',
|
|
green: 'border-status-alive',
|
|
red: 'border-status-failed',
|
|
purple: 'border-purple-500',
|
|
amber: 'border-amber-500',
|
|
gray: 'border-text-tertiary',
|
|
}
|
|
|
|
export function StatCard({ label, value, total, color }: StatCardProps) {
|
|
return (
|
|
<div
|
|
className={`bg-surface-1 rounded-lg border border-border-default p-4 border-l-4 ${colorClasses[color] ?? 'border-text-tertiary'}`}
|
|
>
|
|
<div className="text-2xl font-bold font-mono text-text-primary">
|
|
{value}
|
|
{total !== undefined && (
|
|
<span className="text-sm font-normal font-sans text-text-secondary"> / {total}</span>
|
|
)}
|
|
</div>
|
|
<div className="text-sm text-text-secondary">{label}</div>
|
|
</div>
|
|
)
|
|
}
|