website refactor

apps/website/components/actions/ActionStatusBadge.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+
+interface ActionStatusBadgeProps {
+  status: 'PENDING' | 'COMPLETED' | 'FAILED' | 'IN_PROGRESS';
+}
+
+export function ActionStatusBadge({ status }: ActionStatusBadgeProps) {
+  const styles = {
+    PENDING: { bg: 'bg-amber-500/10', text: 'text-[#FFBE4D]', border: 'border-amber-500/20' },
+    COMPLETED: { bg: 'bg-emerald-500/10', text: 'text-emerald-400', border: 'border-emerald-500/20' },
+    FAILED: { bg: 'bg-red-500/10', text: 'text-red-400', border: 'border-red-500/30' },
+    IN_PROGRESS: { bg: 'bg-blue-500/10', text: 'text-[#198CFF]', border: 'border-blue-500/20' },
+  };
+
+  const config = styles[status];
+
+  return (
+    <Box 
+      as="span" 
+      px={2} 
+      py={0.5} 
+      rounded="sm" 
+      bg={config.bg} 
+      border 
+      borderColor={config.border}
+      display="inline-block"
+    >
+      <Text 
+        size="xs" 
+        weight="bold" 
+        color={config.text} 
+        uppercase 
+        letterSpacing="tight"
+        fontSize="10px"
+      >
+        {status.replace('_', ' ')}
+      </Text>
+    </Box>
+  );
+}