import React from 'react';
interface BadgeProps {
children: React.ReactNode;
variant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
size?: 'sm' | 'md';
}
export const Badge: React.FC<BadgeProps> = ({
children,
variant = 'default',
size = 'md',
}) => {
const variantStyles = {
default: 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200',
success: 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400',
warning: 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-400',
danger: 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-400',
info: 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-400',
};
const sizeStyles = {
sm: 'px-2 py-0.5 text-xs',
md: 'px-2.5 py-1 text-sm',
};
return (
<span
className={`
inline-flex items-center font-medium rounded-full
${variantStyles[variant]}
${sizeStyles[size]}
`}
>
{children}
</span>
);
};
