File size: 2,296 Bytes
e99b3d0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 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(52,211,153,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(251,191,36,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(244,63,94,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>
);
}
|