34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import clsx from "clsx";
|
|
|
|
interface Props {
|
|
items: {
|
|
name: string;
|
|
stat: string;
|
|
hint?: string;
|
|
}[];
|
|
}
|
|
export default function SimpleStats({ items }: Props) {
|
|
return (
|
|
<div>
|
|
<dl
|
|
className={clsx(
|
|
"grid grid-cols-1 gap-3",
|
|
items.length === 1 && "md:grid-cols-1",
|
|
items.length === 2 && "grid-cols-2",
|
|
items.length === 3 && "md:grid-cols-3"
|
|
)}
|
|
>
|
|
{items.map((item) => (
|
|
// Subframe StatsCard layout: rounded-md, px-4 py-4, gap-3, body-default label / subtitle value
|
|
<div key={item.name} className="bg-surface-neutral-primary flex flex-col gap-3 overflow-hidden rounded-md px-4 py-4 shadow-xs">
|
|
<dt className="text-text-neutral-secondary text-body-default-regular-0 font-body-default-regular-0 truncate">{item.name}</dt>
|
|
<dd className="text-text-neutral-primary text-subtitle-0 font-subtitle-0 truncate">
|
|
{item.stat} {item.hint && <span className="text-text-neutral-tertiary text-body-small-regular-0 font-body-small-regular-0">{item.hint}</span>}
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
);
|
|
}
|