44 lines
933 B
TypeScript
44 lines
933 B
TypeScript
import React from 'react';
|
|
import { cn } from '@/utils/helpers';
|
|
|
|
interface BadgeProps {
|
|
children: React.ReactNode;
|
|
variant?: 'default' | 'success' | 'danger' | 'warning' | 'info';
|
|
size?: 'sm' | 'md' | 'lg';
|
|
className?: string;
|
|
}
|
|
|
|
export const Badge: React.FC<BadgeProps> = ({
|
|
children,
|
|
variant = 'default',
|
|
size = 'md',
|
|
className,
|
|
}) => {
|
|
const variants = {
|
|
default: 'bg-gray-100 text-gray-800',
|
|
success: 'bg-green-100 text-green-800',
|
|
danger: 'bg-red-100 text-red-800',
|
|
warning: 'bg-yellow-100 text-yellow-800',
|
|
info: 'bg-blue-100 text-blue-800',
|
|
};
|
|
|
|
const sizes = {
|
|
sm: 'px-2 py-0.5 text-xs',
|
|
md: 'px-2.5 py-1 text-sm',
|
|
lg: 'px-3 py-1.5 text-base',
|
|
};
|
|
|
|
return (
|
|
<span
|
|
className={cn(
|
|
'inline-flex items-center font-medium rounded-full',
|
|
variants[variant],
|
|
sizes[size],
|
|
className
|
|
)}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
};
|