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;