website refactor

apps/website/ui/ContentShell.tsx

@@ -1,20 +1,34 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
+import { Box } from './primitives/Box';
 
-interface ContentShellProps {
-  children: React.ReactNode;
-  className?: string;
+export interface ContentShellProps {
+  children: ReactNode;
+  header?: ReactNode;
+  sidebar?: ReactNode;
 }
 
-/**
- * ContentShell is the main data zone of the application.
- * It houses the primary content and track maps/data tables.
- */
-export function ContentShell({ children, className = '' }: ContentShellProps) {
+export const ContentShell = ({ 
+  children, 
+  header, 
+  sidebar 
+}: ContentShellProps) => {
   return (
-    <main className={`flex-1 overflow-y-auto bg-[#0C0D0F] ${className}`}>
-      <div className="max-w-7xl mx-auto px-4 md:px-6 py-6">
-        {children}
-      </div>
-    </main>
+    <Box display="flex" flexDirection="col" fullHeight>
+      {header && (
+        <Box borderBottom>
+          {header}
+        </Box>
+      )}
+      <Box display="flex" flex={1} minHeight="0">
+        {sidebar && (
+          <Box width="18rem" borderRight display={{ base: 'none', lg: 'block' }}>
+            {sidebar}
+          </Box>
+        )}
+        <Box flex={1} overflow="auto">
+          {children}
+        </Box>
+      </Box>
+    </Box>
   );
-}
+};