Upload components/StatusBadge.jsx with huggingface_hub

components/StatusBadge.jsx

@@ -0,0 +1,31 @@
+import { clsx } from 'clsx';
+
+const statusConfig = {
+  running: { bg: 'bg-emerald-500/15', text: 'text-emerald-400', dot: 'bg-emerald-400' },
+  active: { bg: 'bg-emerald-500/15', text: 'text-emerald-400', dot: 'bg-emerald-400' },
+  available: { bg: 'bg-emerald-500/15', text: 'text-emerald-400', dot: 'bg-emerald-400' },
+  idle: { bg: 'bg-amber-500/15', text: 'text-amber-400', dot: 'bg-amber-400' },
+  standby: { bg: 'bg-slate-500/15', text: 'text-slate-400', dot: 'bg-slate-400' },
+  degraded: { bg: 'bg-amber-500/15', text: 'text-amber-400', dot: 'bg-amber-400' },
+  provisioning: { bg: 'bg-cyan-500/15', text: 'text-cyan-400', dot: 'bg-cyan-400' },
+  stopped: { bg: 'bg-red-500/15', text: 'text-red-400', dot: 'bg-red-400' },
+  queued: { bg: 'bg-purple-500/15', text: 'text-purple-400', dot: 'bg-purple-400' },
+  waiting: { bg: 'bg-amber-500/15', text: 'text-amber-400', dot: 'bg-amber-400' },
+  completed: { bg: 'bg-slate-500/15', text: 'text-slate-400', dot: 'bg-slate-400' },
+};
+
+export default function StatusBadge({ status, size = 'sm' }) {
+  const config = statusConfig[status] || statusConfig.idle;
+  const sizeClasses = size === 'sm' ? 'text-xs px-2 py-0.5' : 'text-sm px-3 py-1';
+  const dotSize = size === 'sm' ? 'w-1.5 h-1.5' : 'w-2 h-2';
+
+  return (
+    <span className={clsx(
+      'inline-flex items-center gap-1.5 rounded-full font-medium',
+      config.bg, config.text, sizeClasses
+    )}>
+      <span className={clsx('rounded-full animate-pulse-slow', config.dot, dotSize)} />
+      {status}
+    </span>
+  );
+}