website refactor

apps/website/ui/Layout.tsx

@@ -0,0 +1,63 @@
+import React, { ReactNode } from 'react';
+
+interface LayoutProps {
+  children: ReactNode;
+  className?: string;
+  padding?: string;
+  gap?: string;
+  grid?: boolean;
+  gridCols?: 1 | 2 | 3 | 4;
+  flex?: boolean;
+  flexCol?: boolean;
+  items?: 'start' | 'center' | 'end' | 'stretch';
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around';
+}
+
+export function Layout({ 
+  children, 
+  className = '',
+  padding = 'p-6',
+  gap = 'gap-4',
+  grid = false,
+  gridCols = 1,
+  flex = false,
+  flexCol = false,
+  items = 'start',
+  justify = 'start'
+}: LayoutProps) {
+  const baseClasses = [padding, gap, className];
+  
+  if (grid) {
+    const gridColsMap = {
+      1: 'grid-cols-1',
+      2: 'grid-cols-2',
+      3: 'grid-cols-3',
+      4: 'grid-cols-4'
+    };
+    baseClasses.push('grid', gridColsMap[gridCols]);
+  } else if (flex) {
+    baseClasses.push('flex');
+    if (flexCol) baseClasses.push('flex-col');
+    
+    const itemsMap = {
+      start: 'items-start',
+      center: 'items-center',
+      end: 'items-end',
+      stretch: 'items-stretch'
+    };
+    baseClasses.push(itemsMap[items]);
+    
+    const justifyMap = {
+      start: 'justify-start',
+      center: 'justify-center',
+      end: 'justify-end',
+      between: 'justify-between',
+      around: 'justify-around'
+    };
+    baseClasses.push(justifyMap[justify]);
+  }
+  
+  const classes = baseClasses.filter(Boolean).join(' ');
+  
+  return <div className={classes}>{children}</div>;
+}