29 lines
1.0 KiB
TypeScript
29 lines
1.0 KiB
TypeScript
interface StatusBadgeProps {
|
|
active: boolean;
|
|
onClick?: () => void;
|
|
activeLabel?: string;
|
|
inactiveLabel?: string;
|
|
}
|
|
|
|
export default function StatusBadge({
|
|
active,
|
|
onClick,
|
|
activeLabel = 'Ativo',
|
|
inactiveLabel = 'Inativo'
|
|
}: StatusBadgeProps) {
|
|
const Component = onClick ? 'button' : 'span';
|
|
|
|
return (
|
|
<Component
|
|
onClick={onClick}
|
|
className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border transition-all ${active
|
|
? 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-900/20 dark:text-emerald-400 dark:border-emerald-900/30'
|
|
: 'bg-zinc-100 text-zinc-600 border-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:border-zinc-700'
|
|
} ${onClick ? 'cursor-pointer hover:opacity-80' : ''}`}
|
|
>
|
|
<span className={`w-1.5 h-1.5 rounded-full ${active ? 'bg-emerald-500' : 'bg-zinc-400'}`} />
|
|
{active ? activeLabel : inactiveLabel}
|
|
</Component>
|
|
);
|
|
}
|