website refactor

apps/website/components/actions/ActionStatusBadge.tsx

@@ -1,43 +1,26 @@
 'use client';
 
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
+import { Badge } from '@/ui/Badge';
 
 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 variants: Record<string, 'warning' | 'success' | 'danger' | 'info'> = {
+    PENDING: 'warning',
+    COMPLETED: 'success',
+    FAILED: 'danger',
+    IN_PROGRESS: 'info',
   };
 
-  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"
+    <Badge 
+      variant={variants[status]} 
+      size="sm" 
+      rounded="sm"
     >
-      <Text 
-        size="xs" 
-        weight="bold" 
-        color={config.text} 
-        uppercase 
-        letterSpacing="tight"
-        fontSize="10px"
-      >
-        {status.replace('_', ' ')}
-      </Text>
-    </Box>
+      {status.replace('_', ' ')}
+    </Badge>
   );
 }