uup

app/components/layout/Container.tsx

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import { getResponsiveClasses, defaultLayoutConfig, type LayoutConfig } from '~/lib/layout-utils';
+
+interface ContainerProps {
+  children: ReactNode;
+  className?: string;
+  config?: Partial<LayoutConfig>;
+  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+  padding?: boolean;
+}
+
+export function Container({ 
+  children, 
+  className = '', 
+  config = {},
+  maxWidth = 'full',
+  padding = true 
+}: ContainerProps) {
+  const layoutConfig = { ...defaultLayoutConfig, ...config };
+  const classes = getResponsiveClasses(layoutConfig);
+  
+  const maxWidthClasses = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    '2xl': 'max-w-2xl',
+    full: 'max-w-full',
+  };
+  
+  const paddingClass = padding ? 'px-4 sm:px-6 lg:px-8' : '';
+  
+  return (
+    <div 
+      className={`${classes.container} ${maxWidthClasses[maxWidth]} ${paddingClass} ${className}`}
+      dir={layoutConfig.direction}
+    >
+      {children}
+    </div>
+  );
+}