27 lines
825 B
TypeScript
27 lines
825 B
TypeScript
|
import type { ReactNode } from "react";
|
||
|
|
|
||
|
|
type StatCardProps = {
|
||
|
|
label: string;
|
||
|
|
value: ReactNode;
|
||
|
|
hint?: string;
|
||
|
|
highlight?: boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function StatCard({ label, value, hint, highlight }: StatCardProps) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={
|
||
|
|
highlight
|
||
|
|
? "rounded-lg border border-l-2 border-muted/30 border-l-accent/70 bg-surface p-4"
|
||
|
|
: "rounded-lg border border-muted/40 bg-surface px-3 py-2.5"
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<div className={highlight ? "text-xs font-medium uppercase tracking-widest text-fg/50" : "text-xs text-fg/55"}>
|
||
|
|
{label}
|
||
|
|
</div>
|
||
|
|
<div className={highlight ? "mt-1.5 text-2xl font-bold text-fg" : "mt-0.5 text-base font-semibold text-fg"}>{value}</div>
|
||
|
|
{hint ? <div className="mt-1 text-xs text-fg/50">{hint}</div> : null}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|