website refactor

apps/website/components/actions/ActionsHeader.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { Stack } from '@/ui/primitives/Stack';
+import { Header } from '@/ui/Header';
 import { StatusIndicator } from '@/ui/StatusIndicator';
 import { Text } from '@/ui/Text';
 import { Activity } from 'lucide-react';
+import React from 'react';
 
 interface ActionsHeaderProps {
   title: string;
@@ -11,31 +12,15 @@ interface ActionsHeaderProps {
 
 export function ActionsHeader({ title }: ActionsHeaderProps) {
   return (
-    <Stack 
-      as="header" 
-      direction="row"
-      h="16" 
-      borderBottom 
-      borderColor="border-[#23272B]" 
-      align="center" 
-      px={6} 
-      bg="bg-[#141619]"
+    <Header
+      actions={<StatusIndicator icon={Activity} variant="info" label="SYSTEM_READY" />}
     >
-      <Stack direction="row" align="center" gap={4}>
-        <Stack 
-          w="2" 
-          h="6" 
-          bg="bg-[#198CFF]" 
-          rounded="sm" 
-          shadow="shadow-[0_0_8px_rgba(25,140,255,0.5)]"
-        >{null}</Stack>
-        <Text as="h1" size="xl" weight="medium" letterSpacing="tight" uppercase>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+        <div style={{ width: '0.5rem', height: '1.5rem', backgroundColor: 'var(--ui-color-intent-primary)', borderRadius: 'var(--ui-radius-sm)' }} />
+        <Text as="h1" size="xl" weight="medium" variant="high" uppercase>
           {title}
         </Text>
-      </Stack>
-      <Stack className="ml-auto" direction="row" align="center" gap={4}>
-        <StatusIndicator icon={Activity} variant="info" label="SYSTEM_READY" />
-      </Stack>
-    </Stack>
+      </div>
+    </Header>
   );
 }