website refactor

apps/website/components/actions/ActionsHeader.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Activity } from 'lucide-react';
 import { StatusIndicator } from '@/ui/StatusIndicator';
@@ -11,31 +11,31 @@ interface ActionsHeaderProps {
 
 export function ActionsHeader({ title }: ActionsHeaderProps) {
   return (
-    <Box 
+    <Stack 
       as="header" 
+      direction="row"
       h="16" 
       borderBottom 
       borderColor="border-[#23272B]" 
-      display="flex" 
-      alignItems="center" 
+      align="center" 
       px={6} 
       bg="bg-[#141619]"
     >
-      <Box display="flex" alignItems="center" gap={4}>
-        <Box 
+      <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>
           {title}
         </Text>
-      </Box>
-      <Box ml="auto" display="flex" alignItems="center" gap={4}>
+      </Stack>
+      <Stack className="ml-auto" direction="row" align="center" gap={4}>
         <StatusIndicator icon={Activity} variant="info" label="SYSTEM_READY" />
-      </Box>
-    </Box>
+      </Stack>
+    </Stack>
   );
 }