wehub-resource-sync
30 lines
812 B
TypeScript
30 lines
812 B
TypeScript
import * as React from "react"
|
|
|
|
interface StatusCardProps {
|
|
label: string
|
|
value: string
|
|
sub?: string
|
|
icon?: React.ReactNode
|
|
}
|
|
|
|
export function StatusCard({ label, value, sub, icon }: StatusCardProps) {
|
|
return (
|
|
<div className="status-card-accent rounded-xl border border-border/60 bg-card p-5">
|
|
<div className="flex items-center gap-2">
|
|
{icon && (
|
|
<span className="text-primary/60">{icon}</span>
|
|
)}
|
|
<p className="text-[0.65rem] font-semibold uppercase tracking-wider text-muted-foreground">
|
|
{label}
|
|
</p>
|
|
</div>
|
|
<p className="mt-1.5 text-3xl font-bold tracking-tight truncate" title={value}>
|
|
{value}
|
|
</p>
|
|
{sub && (
|
|
<p className="mt-1 text-xs text-muted-foreground">{sub}</p>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|