Files
starter-e2e-mrfepicl/packages/components/src/StatGrid.tsx
2026-07-10 22:47:11 +02:00

22 lines
712 B
TypeScript

import { SimpleGrid } from '@mantine/core'
import { StatCard, type StatCardProps } from './StatCard'
export interface StatGridProps {
stats: StatCardProps[]
/** Columns on wide screens (responsive down to 1). Defaults to stats.length capped at 4. */
columns?: number
}
// A responsive row of StatCards. Feed it the metrics from a stats RPC
// (e.g. getTaskStats) mapped to {label, value, icon}.
export function StatGrid({ stats, columns }: StatGridProps) {
const cols = columns ?? Math.min(stats.length || 1, 4)
return (
<SimpleGrid cols={{ base: 1, sm: 2, lg: cols }} spacing="md">
{stats.map((stat, index) => (
<StatCard key={index} {...stat} />
))}
</SimpleGrid>
)
}