雨霖铃
9c993b6cea
- 新增 StatCard 组件，简化统计信息的展示逻辑。 - 更新 TextStatistics 页面，使用 StatCard 组件替代原有的统计项渲染方式，提升代码可读性和维护性。
18 lines
730 B
TypeScript
18 lines
730 B
TypeScript
interface StatCardProps {
|
|
label: string;
|
|
value: React.ReactNode;
|
|
}
|
|
|
|
export default function StatCard({ label, value }: StatCardProps) {
|
|
return (
|
|
<div className="flex flex-col justify-center items-center p-4 text-center rounded-xl border border-border bg-card shadow-sm text-card-foreground hover:-translate-y-0.5 hover:shadow-md hover:border-primary/50 focus-within:ring-1 focus-within:ring-ring">
|
|
<span className="text-xs font-medium text-muted-foreground tracking-wider mb-1 select-none">
|
|
{label}
|
|
</span>
|
|
<span className="font-mono text-lg md:text-2xl font-extrabold text-primary break-all tracking-tight leading-none tabular-nums select-all">
|
|
{value}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|