28 lines
990 B
TypeScript
28 lines
990 B
TypeScript
|
|
import React from 'react';
|
|
|
|
interface StatsDisplayProps {
|
|
value: string | number;
|
|
label: string;
|
|
subtext?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export const StatsDisplay: React.FC<StatsDisplayProps> = ({ value, label, subtext, className = '' }) => {
|
|
return (
|
|
<div className={`not-prose flex flex-col items-center justify-center p-8 my-10 bg-gradient-to-br from-slate-50 to-slate-100 border border-slate-200 rounded-2xl shadow-sm text-center ${className}`}>
|
|
<span className="text-7xl font-black text-slate-900 tracking-tighter tabular-nums leading-none">
|
|
{value}
|
|
</span>
|
|
<span className="text-xl font-bold text-slate-700 mt-3 uppercase tracking-wide">
|
|
{label}
|
|
</span>
|
|
{subtext && (
|
|
<span className="text-sm font-medium text-slate-500 mt-2 max-w-xs leading-relaxed">
|
|
{subtext}
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|