sct-overseerr/src/components/Common/Badge/index.tsx

import Link from 'next/link';

interface BadgeProps {
  badgeType?:
    | 'default'
    | 'primary'
    | 'danger'
    | 'warning'
    | 'success'
    | 'dark'
    | 'light';
  className?: string;
  href?: string;
  children: React.ReactNode;
}

const Badge = ({
  badgeType = 'default',
  className,
  href,
  children,
}: BadgeProps) => {
  const badgeStyle = [
    'px-2 inline-flex text-xs leading-5 font-semibold rounded-full whitespace-nowrap',
  ];

  if (href) {
    badgeStyle.push('transition cursor-pointer !no-underline');
  } else {
    badgeStyle.push('cursor-default');
  }

  switch (badgeType) {
    case 'danger':
      badgeStyle.push('bg-red-600 !text-red-100');
      if (href) {
        badgeStyle.push('hover:bg-red-500');
      }
      break;
    case 'warning':
      badgeStyle.push('bg-yellow-500 !text-yellow-100');
      if (href) {
        badgeStyle.push('hover:bg-yellow-400');
      }
      break;
    case 'success':
      badgeStyle.push('bg-green-500 !text-green-100');
      if (href) {
        badgeStyle.push('hover:bg-green-400');
      }
      break;
    case 'dark':
      badgeStyle.push('bg-gray-900 !text-gray-400');
      if (href) {
        badgeStyle.push('hover:bg-gray-800');
      }
      break;
    case 'light':
      badgeStyle.push('bg-gray-700 !text-gray-300');
      if (href) {
        badgeStyle.push('hover:bg-gray-600');
      }
      break;
    default:
      badgeStyle.push('bg-indigo-500 !text-indigo-100');
      if (href) {
        badgeStyle.push('hover:bg-indigo-400');
      }
  }

  if (className) {
    badgeStyle.push(className);
  }

  if (href?.includes('://')) {
    return (
      <a
        href={href}
        target="_blank"
        rel="noopener noreferrer"
        className={badgeStyle.join(' ')}
      >
        {children}
      </a>
    );
  } else if (href) {
    return (
      <Link href={href}>
        <a className={badgeStyle.join(' ')}>{children}</a>
      </Link>
    );
  } else {
    return <span className={badgeStyle.join(' ')}>{children}</span>;
  }
};

export default Badge;