gridpilot.gg/apps/website/ui/StatGrid.tsx

import React from 'react';
import { Grid } from './Grid';
import { StatBox, StatBoxProps } from './StatBox';
import { StatCard, StatCardProps } from './StatCard';

export interface StatGridProps {
  stats: (StatBoxProps | StatCardProps)[];
  columns?: number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number };
  variant?: 'box' | 'card';
  cardVariant?: 'default' | 'dark' | 'muted' | 'glass' | 'outline';
  font?: 'sans' | 'mono';
}

export const StatGrid = ({
  stats,
  columns = 3,
  variant = 'box',
  cardVariant,
  font,
  ...props
}: StatGridProps & { [key: string]: any }) => {
  return (
    <Grid cols={columns} gap={4} {...props}>
      {stats.map((stat, index) => (
        variant === 'box' ? (
          <StatBox key={index} {...(stat as StatBoxProps)} />
        ) : (
          <StatCard
            key={index}
            variant={cardVariant}
            font={font}
            {...(stat as StatCardProps)}
          />
        )
      ))}
    </Grid>
  );
};