47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import type { ReactNode } from "react";
|
||
|
||
/** KPI：图标软底 + 数字 + 说明 */
|
||
export default function AdminStatCard({
|
||
label,
|
||
value,
|
||
sub,
|
||
hint,
|
||
icon,
|
||
color = "var(--accent)",
|
||
soft = "var(--accent-soft)",
|
||
}: {
|
||
label: string;
|
||
value: ReactNode;
|
||
sub?: string;
|
||
hint?: string;
|
||
icon: ReactNode;
|
||
color?: string;
|
||
soft?: string;
|
||
}) {
|
||
return (
|
||
<div className="panel p-4 sm:p-5 flex items-center gap-3">
|
||
<span
|
||
className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0"
|
||
style={{ background: soft, color }}
|
||
aria-hidden
|
||
>
|
||
{icon}
|
||
</span>
|
||
<div className="min-w-0 leading-tight">
|
||
<p className="text-[11.5px] truncate" style={{ color: "var(--ink-3)" }}>
|
||
{label}
|
||
</p>
|
||
<p className="text-[19px] sm:text-[22px] font-extrabold tabular-nums leading-none mt-1" style={{ color: "var(--ink)" }}>
|
||
{value}
|
||
{sub ? (
|
||
<span className="ml-1.5 text-[11px] font-medium" style={{ color: "var(--ink-3)" }}>
|
||
{sub}
|
||
</span>
|
||
) : null}
|
||
</p>
|
||
{hint ? <p className="meta text-[12px] mt-1.5">{hint}</p> : null}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|