website refactor

apps/website/ui/ContentViewport.tsx

@@ -1,22 +1,30 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
+import { Box } from './primitives/Box';
+import { Container } from './Container';
 
-interface ContentViewportProps {
-  children: React.ReactNode;
-  className?: string;
-  fullWidth?: boolean;
+export interface ContentViewportProps {
+  children: ReactNode;
+  padding?: 'none' | 'sm' | 'md' | 'lg';
 }
 
-/**
- * ContentViewport is the main data zone of the "Telemetry Workspace".
- * It houses the primary content, track maps, and data tables.
- * Aligned with "Precision Racing Minimal" theme.
- */
-export function ContentViewport({ children, className = '', fullWidth = false }: ContentViewportProps) {
+export const ContentViewport = ({ 
+  children, 
+  padding = 'md' 
+}: ContentViewportProps) => {
+  const paddingMap: Record<string, any> = {
+    none: 0,
+    sm: 4,
+    md: 8,
+    lg: 12,
+  };
+
   return (
-    <main className={`flex-1 overflow-y-auto bg-[#0C0D0F] ${className}`}>
-      <div className={fullWidth ? '' : 'max-w-7xl mx-auto px-4 md:px-6 py-6'}>
-        {children}
-      </div>
-    </main>
+    <Box as="main" flex={1} overflow="auto">
+      <Container size="xl">
+        <Box paddingY={paddingMap[padding]}>
+          {children}
+        </Box>
+      </Container>
+    </Box>
   );
-}
+};