gridpilot.gg/apps/website/components/dashboard/DashboardKpiRow.tsx

import { StatGrid } from '@/ui/StatGrid';
 
interface KpiItem {
  label: string;
  value: string | number;
  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'high' | 'med' | 'low';
}
 
interface DashboardKpiRowProps {
  items: KpiItem[];
  'data-testid'?: string;
}
 
/**
 * DashboardKpiRow
 *
 * A horizontal row of key performance indicators with telemetry styling.
 */
export function DashboardKpiRow({ items, 'data-testid': testId }: DashboardKpiRowProps) {
  return (
    <StatGrid
      variant="card"
      cardVariant="dark"
      font="mono"
      columns={{ base: 2, md: 3, lg: 6 }}
      stats={items.map((item, index) => ({
        label: item.label,
        value: item.value,
        intent: item.intent as any,
        'data-testid': `stat-${item.label.toLowerCase()}`
      }))}
      data-testid={testId}
    />
  );
}