website refactor

apps/website/ui/StatGrid.tsx

@@ -1,58 +1,21 @@
 import React from 'react';
 import { Grid } from './primitives/Grid';
-import { GridItem } from './primitives/GridItem';
-import { Surface } from './primitives/Surface';
-import { Text } from './Text';
-import { Stack } from './primitives/Stack';
+import { StatBox, StatBoxProps } from './StatBox';
 
-type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 12;
-
-interface StatItem {
-  label: string;
-  value: string | number;
-  subValue?: string;
-  color?: string;
-  icon?: React.ElementType;
+export interface StatGridProps {
+  stats: StatBoxProps[];
+  columns?: number;
 }
 
-interface StatGridProps {
-  stats: StatItem[];
-  cols?: GridCols;
-  mdCols?: GridCols;
-  lgCols?: GridCols;
-  className?: string;
-}
-
-export function StatGrid({ stats, cols = 2, mdCols = 3, lgCols = 4, className = '' }: StatGridProps) {
+export const StatGrid = ({ 
+  stats, 
+  columns = 3 
+}: StatGridProps) => {
   return (
-    <Grid 
-      cols={cols}
-      mdCols={mdCols}
-      lgCols={lgCols}
-      gap={4} 
-      className={className}
-    >
+    <Grid columns={columns} gap={4}>
       {stats.map((stat, index) => (
-        <GridItem key={index}>
-          <Surface variant="muted" padding={4} rounded="lg" border className="h-full">
-            <Stack gap={1}>
-              <Text size="xs" color="text-gray-500" uppercase weight="semibold" letterSpacing="wider">
-                {stat.label}
-              </Text>
-              <Stack direction="row" align="baseline" gap={2}>
-                <Text size="2xl" weight="bold" font="mono" color={stat.color || 'text-white'}>
-                  {stat.value}
-                </Text>
-                {stat.subValue && (
-                  <Text size="xs" color="text-gray-500" font="mono">
-                    {stat.subValue}
-                  </Text>
-                )}
-              </Stack>
-            </Stack>
-          </Surface>
-        </GridItem>
+        <StatBox key={index} {...stat} />
       ))}
     </Grid>
   );
-}
+};