wip

apps/website/components/shared/StatusBadge.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { LucideIcon } from 'lucide-react';
+import { StatusBadge as UIStatusBadge } from '@/ui/StatusBadge';
 
 interface StatusBadgeProps {
   status: string;
@@ -16,51 +17,42 @@ interface StatusBadgeProps {
 export const StatusBadge = ({ status, config, className = '' }: StatusBadgeProps) => {
   const defaultConfig = {
     scheduled: {
-      icon: () => null,
-      color: 'text-primary-blue',
-      bg: 'bg-primary-blue/10',
-      border: 'border-primary-blue/30',
+      icon: undefined,
+      variant: 'info' as const,
       label: 'Scheduled',
     },
     running: {
-      icon: () => null,
-      color: 'text-performance-green',
-      bg: 'bg-performance-green/10',
-      border: 'border-performance-green/30',
+      icon: undefined,
+      variant: 'success' as const,
       label: 'LIVE',
     },
     completed: {
-      icon: () => null,
-      color: 'text-gray-400',
-      bg: 'bg-gray-500/10',
-      border: 'border-gray-500/30',
+      icon: undefined,
+      variant: 'neutral' as const,
       label: 'Completed',
     },
     cancelled: {
-      icon: () => null,
-      color: 'text-warning-amber',
-      bg: 'bg-warning-amber/10',
-      border: 'border-warning-amber/30',
+      icon: undefined,
+      variant: 'warning' as const,
       label: 'Cancelled',
     },
   };
 
-  const badgeConfig = config || defaultConfig[status as keyof typeof defaultConfig] || {
-    icon: () => null,
-    color: 'text-gray-400',
-    bg: 'bg-gray-500/10',
-    border: 'border-gray-500/30',
-    label: status,
-  };
-
-  const Icon = badgeConfig.icon;
+  const badgeConfig = config 
+    ? { ...config, variant: 'info' as const } // Fallback variant if config is provided
+    : defaultConfig[status as keyof typeof defaultConfig] || {
+        icon: undefined,
+        variant: 'neutral' as const,
+        label: status,
+      };
 
   return (
-    <div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${badgeConfig.bg} ${badgeConfig.border} border ${className}`}>
-      {Icon && <Icon className={`w-3.5 h-3.5 ${badgeConfig.color}`} />}
-      <span className={`text-xs font-medium ${badgeConfig.color}`}>
-        {badgeConfig.label}
-      </span>
-    </div>
+    <UIStatusBadge 
+      variant={badgeConfig.variant} 
+      icon={badgeConfig.icon}
+      className={className}
+    >
+      {badgeConfig.label}
+    </UIStatusBadge>
   );
 };