| 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> | |
| ); | |
| } | |