website refactor

apps/website/ui/StatusBadge.tsx

@@ -1,33 +1,46 @@
 import React from 'react';
-import { Text } from './Text';
+import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
+import { Stack } from './Stack';
 
 interface StatusBadgeProps {
   children: React.ReactNode;
-  variant?: 'success' | 'warning' | 'error' | 'info';
+  variant?: 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'pending';
   className?: string;
+  icon?: LucideIcon;
 }
 
 export function StatusBadge({ 
   children, 
   variant = 'success',
-  className = ''
+  className = '',
+  icon,
 }: StatusBadgeProps) {
   const variantClasses = {
-    success: 'bg-performance-green/20 text-performance-green',
-    warning: 'bg-warning-amber/20 text-warning-amber',
-    error: 'bg-red-600/20 text-red-400',
-    info: 'bg-blue-500/20 text-blue-400'
+    success: 'bg-performance-green/20 text-performance-green border-performance-green/30',
+    warning: 'bg-warning-amber/20 text-warning-amber border-warning-amber/30',
+    error: 'bg-red-600/20 text-red-400 border-red-600/30',
+    info: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
+    neutral: 'bg-iron-gray text-gray-400 border-charcoal-outline',
+    pending: 'bg-warning-amber/20 text-warning-amber border-warning-amber/30',
   };
   
   const classes = [
-    'px-2 py-1 text-xs rounded-full',
+    'px-2 py-0.5 text-xs rounded-full border font-medium inline-flex items-center',
     variantClasses[variant],
     className
   ].filter(Boolean).join(' ');
   
-  return (
-    <Text size="xs" className={classes}>
+  const content = icon ? (
+    <Stack direction="row" align="center" gap={1.5}>
+      <Icon icon={icon} size={3} />
       {children}
-    </Text>
+    </Stack>
+  ) : children;
+
+  return (
+    <span className={classes}>
+      {content}
+    </span>
   );
 }