36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
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={`group relative overflow-hidden rounded-2xl border bg-surface/55 shadow-lg shadow-black/10 backdrop-blur-md p-4 transition-all duration-200 hover:-translate-y-0.5 ${
|
|
highlight
|
|
? "border-accent/30 shadow-accent/5"
|
|
: "border-white/10 hover:border-white/20"
|
|
}`}
|
|
>
|
|
{highlight && (
|
|
<div className="pointer-events-none absolute -right-8 -top-10 h-24 w-24 rounded-full bg-accent/20 blur-2xl" />
|
|
)}
|
|
<div className="text-xs font-medium uppercase tracking-widest text-fg/50">
|
|
{label}
|
|
</div>
|
|
<div
|
|
className={`mt-1.5 font-display font-bold tabular-nums text-fg ${
|
|
highlight ? "text-2xl" : "text-xl"
|
|
}`}
|
|
>
|
|
{value}
|
|
</div>
|
|
{hint ? <div className="mt-1 text-xs text-fg/50">{hint}</div> : null}
|
|
</div>
|
|
);
|
|
}
|