website refactor

apps/website/components/actions/ActionsHeader.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Activity } from 'lucide-react';
+import { StatusIndicator } from '@/ui/StatusIndicator';
+
+interface ActionsHeaderProps {
+  title: string;
+}
+
+export function ActionsHeader({ title }: ActionsHeaderProps) {
+  return (
+    <Box 
+      as="header" 
+      h="16" 
+      borderBottom 
+      borderColor="border-[#23272B]" 
+      display="flex" 
+      alignItems="center" 
+      px={6} 
+      bg="bg-[#141619]"
+    >
+      <Box display="flex" alignItems="center" gap={4}>
+        <Box 
+          w="2" 
+          h="6" 
+          bg="bg-[#198CFF]" 
+          rounded="sm" 
+          shadow="shadow-[0_0_8px_rgba(25,140,255,0.5)]"
+        />
+        <Text as="h1" size="xl" weight="medium" letterSpacing="tight" uppercase>
+          {title}
+        </Text>
+      </Box>
+      <Box ml="auto" display="flex" alignItems="center" gap={4}>
+        <StatusIndicator icon={Activity} variant="info" label="SYSTEM_READY" />
+      </Box>
+    </Box>
+  );
+}