52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import Card from '@/components/site/card';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
type StatCardProps = {
|
|
label?: string;
|
|
value: string;
|
|
unit?: string;
|
|
description?: string;
|
|
align?: 'left' | 'center';
|
|
className?: string;
|
|
};
|
|
|
|
export default function StatCard({
|
|
label,
|
|
value,
|
|
unit,
|
|
description,
|
|
align = 'left',
|
|
className,
|
|
}: StatCardProps) {
|
|
return (
|
|
<Card
|
|
className={cn(
|
|
'flex flex-col justify-between gap-3',
|
|
align === 'center' && 'items-center text-center',
|
|
className,
|
|
)}
|
|
>
|
|
{label && (
|
|
<span className="text-primary font-mono text-xs font-semibold tracking-wider uppercase">
|
|
{label}
|
|
</span>
|
|
)}
|
|
<div className="flex flex-wrap items-baseline gap-x-2">
|
|
<span className="font-display text-on-surface text-4xl font-extrabold">
|
|
{value}
|
|
</span>
|
|
{unit && (
|
|
<span className="font-display text-primary text-xl font-bold">
|
|
{unit}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{description && (
|
|
<p className="text-on-surface-variant text-xs leading-relaxed">
|
|
{description}
|
|
</p>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|