36 lines
872 B
TypeScript
36 lines
872 B
TypeScript
import React from 'react';
|
|
|
|
interface BadgeProps {
|
|
variant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
|
|
children: React.ReactNode;
|
|
size?: 'sm' | 'md';
|
|
}
|
|
|
|
const variantStyles = {
|
|
default: 'bg-slate-100 text-slate-800 border-slate-200',
|
|
success: 'bg-green-100 text-green-800 border-green-200',
|
|
warning: 'bg-yellow-100 text-yellow-800 border-yellow-200',
|
|
danger: 'bg-red-100 text-red-800 border-red-200',
|
|
info: 'bg-blue-100 text-blue-800 border-blue-200',
|
|
};
|
|
|
|
const sizeStyles = {
|
|
sm: 'px-1.5 py-0 text-[10px]',
|
|
md: 'px-2 py-0.5 text-xs',
|
|
};
|
|
|
|
export default function Badge({
|
|
variant = 'default',
|
|
children,
|
|
size = 'md'
|
|
}: BadgeProps) {
|
|
return (
|
|
<span className={`
|
|
inline-flex items-center rounded-full font-medium border
|
|
${variantStyles[variant]}
|
|
${sizeStyles[size]}
|
|
`}>
|
|
{children}
|
|
</span>
|
|
);
|
|
} |