uup

app/components/layout/Grid.tsx

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+import { defaultLayoutConfig, type LayoutConfig } from '~/lib/layout-utils';
+
+interface GridProps {
+  children: ReactNode;
+  className?: string;
+  config?: Partial<LayoutConfig>;
+  cols?: 1 | 2 | 3 | 4 | 6 | 12;
+  gap?: 'sm' | 'md' | 'lg' | 'xl';
+  responsive?: {
+    sm?: 1 | 2 | 3 | 4 | 6 | 12;
+    md?: 1 | 2 | 3 | 4 | 6 | 12;
+    lg?: 1 | 2 | 3 | 4 | 6 | 12;
+    xl?: 1 | 2 | 3 | 4 | 6 | 12;
+  };
+}
+
+export function Grid({ 
+  children, 
+  className = '', 
+  config = {},
+  cols = 1,
+  gap = 'md',
+  responsive = {}
+}: GridProps) {
+  const layoutConfig = { ...defaultLayoutConfig, ...config };
+  
+  const colsClasses = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-2',
+    3: 'grid-cols-3',
+    4: 'grid-cols-4',
+    6: 'grid-cols-6',
+    12: 'grid-cols-12',
+  };
+  
+  const gapClasses = {
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6',
+    xl: 'gap-8',
+  };
+  
+  const responsiveClasses = Object.entries(responsive)
+    .map(([breakpoint, cols]) => `${breakpoint}:${colsClasses[cols]}`)
+    .join(' ');
+  
+  return (
+    <div 
+      className={`grid-rtl ${colsClasses[cols]} ${gapClasses[gap]} ${responsiveClasses} ${className}`}
+      dir={layoutConfig.direction}
+    >
+      {children}
+    </div>
+  );
+}