website refactor

apps/website/ui/Layout.tsx

@@ -1,67 +1,44 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { Box } from './primitives/Box';
-import { Grid } from './primitives/Grid';
-import { Stack } from './primitives/Stack';
 
-/**
- * WARNING: DO NOT VIOLATE THE PURPOSE OF THIS COMPONENT.
- * 
- * Layout is a high-level component for page or section layouts.
- * It should use Grid or Stack primitives internally.
- * 
- * If you need a specific layout pattern, create a new component.
- */
-
-interface LayoutProps {
+export interface LayoutProps {
   children: ReactNode;
-  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';
+  header?: ReactNode;
+  footer?: ReactNode;
+  sidebar?: ReactNode;
 }
 
-export function Layout({ 
+export const Layout = ({ 
   children, 
-  padding = 'p-6',
-  gap = 'gap-4',
-  grid = false,
-  gridCols = 1,
-  flex = false,
-  flexCol = false,
-  items = 'start',
-  justify = 'start'
-}: LayoutProps) {
-  if (grid) {
-    return (
-      <Grid 
-        cols={gridCols as any} 
-        className={`${padding} ${gap}`}
-      >
-        {children}
-      </Grid>
-    );
-  }
-  
-  if (flex) {
-    return (
-      <Stack 
-        direction={flexCol ? 'col' : 'row'} 
-        align={items} 
-        justify={justify} 
-        className={`${padding} ${gap}`}
-      >
-        {children}
-      </Stack>
-    );
-  }
-  
+  header, 
+  footer, 
+  sidebar 
+}: LayoutProps) => {
   return (
-    <Box className={`${padding} ${gap}`}>
-      {children}
+    <Box display="flex" flexDirection="col" minHeight="100vh" bg="var(--ui-color-bg-base)">
+      {header && (
+        <Box as="header" position="sticky" top="0" zIndex={50}>
+          {header}
+        </Box>
+      )}
+      
+      <Box display="flex" flex={1}>
+        {sidebar && (
+          <Box as="aside" width="16rem" display={{ base: 'none', lg: 'block' }}>
+            {sidebar}
+          </Box>
+        )}
+        
+        <Box as="main" flex={1}>
+          {children}
+        </Box>
+      </Box>
+      
+      {footer && (
+        <Box as="footer">
+          {footer}
+        </Box>
+      )}
     </Box>
   );
-}
+};