chore: starter template
This commit is contained in:
21
packages/components/src/StatGrid.tsx
Normal file
21
packages/components/src/StatGrid.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user