Upload src/components/StatusBadge.tsx with huggingface_hub

src/components/StatusBadge.tsx

@@ -0,0 +1,83 @@
+import { ReactNode } from "react";
+import { cn } from "../utils/cn";
+
+interface StatusBadgeProps {
+  status: string;
+  className?: string;
+  size?: "sm" | "md";
+}
+
+export default function StatusBadge({ status, className, size = "md" }: StatusBadgeProps) {
+  const normalized = (status || "").toUpperCase();
+
+  let colorClasses = "bg-zinc-800 text-zinc-300 border-zinc-700";
+  let dotColor = "bg-zinc-400";
+  let pulse = false;
+
+  switch (normalized) {
+    case "ACTIVE":
+    case "CONNECTED":
+    case "EXCELLENT":
+    case "INTERESTED":
+    case "MEETING_BOOKED":
+      colorClasses = "bg-emerald-500/10 text-emerald-400 border-emerald-500/20";
+      dotColor = "bg-emerald-400 shadow-[0_0_8px_rgba(63,156,132,0.6)]";
+      pulse = true;
+      break;
+
+    case "PAUSED":
+    case "GOOD":
+    case "REPLIED":
+    case "RECONNECTING":
+    case "WARMING":
+      colorClasses = "bg-amber-500/10 text-amber-400 border-amber-500/20";
+      dotColor = "bg-amber-400 shadow-[0_0_8px_rgba(194,160,74,0.6)]";
+      break;
+
+    case "STOPPED":
+    case "ERROR":
+    case "POOR":
+    case "BOUNCED":
+    case "NOT_INTERESTED":
+    case "UNSUBSCRIBED":
+    case "DO_NOT_CONTACT":
+      colorClasses = "bg-rose-500/10 text-rose-400 border-rose-500/20";
+      dotColor = "bg-rose-400 shadow-[0_0_8px_rgba(203,117,80,0.6)]";
+      break;
+
+    case "MEETING_DONE":
+    case "COMPLETED":
+      colorClasses = "bg-indigo-500/10 text-indigo-400 border-indigo-500/20";
+      dotColor = "bg-indigo-400";
+      break;
+
+    default:
+      colorClasses = "bg-zinc-800/80 text-zinc-300 border-zinc-700";
+      dotColor = "bg-zinc-400";
+      break;
+  }
+
+  const formatText = (text: string) => {
+    return text.replace(/_/g, " ");
+  };
+
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 font-medium rounded-full border transition-all",
+        size === "sm" ? "px-2 py-0.5 text-[11px]" : "px-2.5 py-1 text-xs",
+        colorClasses,
+        className
+      )}
+    >
+      <span
+        className={cn(
+          "w-1.5 h-1.5 rounded-full shrink-0",
+          dotColor,
+          pulse && "animate-pulse"
+        )}
+      />
+      <span className="capitalize">{formatText(status)}</span>
+    </span>
+  );
+}