website refactor

apps/website/ui/primitives/Grid.tsx

@@ -13,57 +13,25 @@ import { Box, BoxProps, ResponsiveValue } from './Box';
  * If you need a more specific layout, create a new component in apps/website/components.
  */
 
-export interface GridProps<T extends ElementType = 'div'> extends Omit<BoxProps<T>, 'children'> {
+export interface GridProps<T extends ElementType = 'div'> extends BoxProps<T> {
   children?: ReactNode;
-  cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
-  mdCols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
-  lgCols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
-  gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 16;
-  className?: string;
+  columns?: number | ResponsiveValue<number>;
+  gap?: number | string | ResponsiveValue<number | string>;
 }
 
 export function Grid<T extends ElementType = 'div'>({ 
   children, 
-  cols = 1, 
-  mdCols,
-  lgCols,
+  columns = 1, 
   gap = 4,
-  className = '',
   ...props 
 }: GridProps<T>) {
-  const colClasses: Record<number, string> = {
-    1: 'grid-cols-1',
-    2: 'grid-cols-1 md:grid-cols-2',
-    3: 'grid-cols-1 md:grid-cols-3',
-    4: 'grid-cols-2 md:grid-cols-4',
-    5: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-5',
-    6: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
-    12: 'grid-cols-12'
-  };
-
-  const gapClasses: Record<number, string> = {
-    0: 'gap-0',
-    1: 'gap-1',
-    2: 'gap-2',
-    3: 'gap-3',
-    4: 'gap-4',
-    6: 'gap-6',
-    8: 'gap-8',
-    12: 'gap-12',
-    16: 'gap-16'
-  };
-
-  const classes = [
-    'grid',
-    colClasses[cols] || 'grid-cols-1',
-    mdCols ? `md:grid-cols-${mdCols}` : '',
-    lgCols ? `lg:grid-cols-${lgCols}` : '',
-    gapClasses[gap] || 'gap-4',
-    className
-  ].filter(Boolean).join(' ');
-
   return (
-    <Box className={classes} {...props}>
+    <Box 
+      display="grid" 
+      gridCols={columns} 
+      gap={gap} 
+      {...props}
+    >
       {children}
     </Box>
   );