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 ( {children} ); } else if (href) { return ( {children} ); } else { return {children}; } }; export default Badge;