← back to Omega Watches 2

src/components/ui/StatusBadge.tsx

42 lines

'use client';

import { cn } from '@/lib/utils';

type BadgeVariant = 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'gold';

interface StatusBadgeProps {
  label: string;
  variant?: BadgeVariant;
  pulse?: boolean;
}

const variantStyles: Record<BadgeVariant, string> = {
  success: 'bg-green-500/20 text-green-400 border-green-500/30',
  warning: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
  danger: 'bg-red-500/20 text-red-400 border-red-500/30',
  info: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
  neutral: 'bg-navy-700/50 text-navy-300 border-navy-600',
  gold: 'bg-omega-500/20 text-omega-400 border-omega-500/30',
};

export default function StatusBadge({ label, variant = 'neutral', pulse = false }: StatusBadgeProps) {
  return (
    <span className={cn(
      'inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium border',
      variantStyles[variant]
    )}>
      {pulse && (
        <span className={cn(
          'w-1.5 h-1.5 rounded-full animate-pulse',
          variant === 'success' && 'bg-green-400',
          variant === 'warning' && 'bg-yellow-400',
          variant === 'danger' && 'bg-red-400',
          variant === 'info' && 'bg-blue-400',
          variant === 'gold' && 'bg-omega-400',
        )} />
      )}
      {label}
    </span>
  );
}