Vitex Tecnologia
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
interface StatusBadgeProps {
|
|
status: "connected" | "error" | "disconnected" | "pending";
|
|
label?: string;
|
|
}
|
|
|
|
const statusConfig = {
|
|
connected: {
|
|
label: "Conectado",
|
|
className: "bg-success/10 text-success border-success/20",
|
|
},
|
|
error: {
|
|
label: "Erro",
|
|
className: "bg-destructive/10 text-destructive border-destructive/20",
|
|
},
|
|
disconnected: {
|
|
label: "Desconectado",
|
|
className: "bg-muted text-muted-foreground border-border",
|
|
},
|
|
pending: {
|
|
label: "Pendente",
|
|
className: "bg-warning/10 text-warning border-warning/20",
|
|
},
|
|
};
|
|
|
|
export function StatusBadge({ status, label }: StatusBadgeProps) {
|
|
const config = statusConfig[status];
|
|
|
|
return (
|
|
<span
|
|
className={cn(
|
|
"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border",
|
|
config.className
|
|
)}
|
|
>
|
|
<span
|
|
className={cn("w-1.5 h-1.5 rounded-full", {
|
|
"bg-success": status === "connected",
|
|
"bg-destructive": status === "error",
|
|
"bg-muted-foreground": status === "disconnected",
|
|
"bg-warning": status === "pending",
|
|
})}
|
|
/>
|
|
{label || config.label}
|
|
</span>
|
|
);
|
|
}
|