17 lines
823 B
TypeScript
17 lines
823 B
TypeScript
import { ReactNode } from 'react'
|
|
|
|
export function Badge({ children, variant = 'default', size = 'sm' }: {
|
|
children: ReactNode; variant?: 'success' | 'warning' | 'error' | 'info' | 'default' | 'purple'; size?: 'sm' | 'md'
|
|
}) {
|
|
const variants = {
|
|
success: 'bg-green-100 text-green-700 border-green-200',
|
|
warning: 'bg-yellow-100 text-yellow-700 border-yellow-200',
|
|
error: 'bg-red-100 text-red-700 border-red-200',
|
|
info: 'bg-blue-100 text-blue-700 border-blue-200',
|
|
default: 'bg-gray-100 text-gray-700 border-gray-200',
|
|
purple: 'bg-purple-100 text-purple-700 border-purple-200',
|
|
}
|
|
const sizes = { sm: 'px-2 py-0.5 text-xs', md: 'px-3 py-1 text-sm' }
|
|
return <span className={`inline-flex items-center rounded-full border font-medium ${variants[variant]} ${sizes[size]}`}>{children}</span>
|
|
}
|