43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import { HTMLAttributes, forwardRef } from 'react';
|
|
|
|
export type BadgeVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';
|
|
|
|
interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
variant?: BadgeVariant;
|
|
size?: 'sm' | 'md';
|
|
}
|
|
|
|
const variantStyles: Record<BadgeVariant, string> = {
|
|
default: 'bg-slate-100 text-slate-700',
|
|
success: 'bg-green-100 text-green-800',
|
|
warning: 'bg-yellow-100 text-yellow-800',
|
|
danger: 'bg-red-100 text-red-800',
|
|
info: 'bg-blue-100 text-blue-800',
|
|
};
|
|
|
|
const sizeStyles: Record<'sm' | 'md', string> = {
|
|
sm: 'px-1.5 py-0.5 text-xs',
|
|
md: 'px-2 py-1 text-sm',
|
|
};
|
|
|
|
export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
|
|
({ className = '', variant = 'default', size = 'sm', children, ...props }, ref) => {
|
|
return (
|
|
<span
|
|
ref={ref}
|
|
className={`
|
|
inline-flex items-center font-medium rounded-full
|
|
${variantStyles[variant]}
|
|
${sizeStyles[size]}
|
|
${className}
|
|
`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|
|
);
|
|
|
|
Badge.displayName = 'Badge';
|