website refactor

apps/website/ui/ControlBar.tsx

@@ -1,21 +1,32 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
+import { Box } from './primitives/Box';
+import { Surface } from './primitives/Surface';
 
-interface ControlBarProps {
-  children: React.ReactNode;
-  className?: string;
+export interface ControlBarProps {
+  children: ReactNode;
+  actions?: ReactNode;
 }
 
-/**
- * ControlBar is the top-level header of the "Telemetry Workspace".
- * It provides global controls, navigation, and status information.
- * Aligned with "Precision Racing Minimal" theme.
- */
-export function ControlBar({ children, className = '' }: ControlBarProps) {
+export const ControlBar = ({ 
+  children, 
+  actions 
+}: ControlBarProps) => {
   return (
-    <header 
-      className={`sticky top-0 z-50 h-16 md:h-20 bg-[#0C0D0F]/80 backdrop-blur-md border-b border-[#23272B] flex items-center px-4 md:px-6 ${className}`}
+    <Surface 
+      variant="muted" 
+      padding={4} 
+      style={{ borderBottom: '1px solid var(--ui-color-border-default)' }}
     >
-      {children}
-    </header>
+      <Box display="flex" alignItems="center" justifyContent="between">
+        <Box display="flex" alignItems="center" gap={4}>
+          {children}
+        </Box>
+        {actions && (
+          <Box display="flex" alignItems="center" gap={4}>
+            {actions}
+          </Box>
+        )}
+      </Box>
+    </Surface>
   );
-}
+};