| 29 | } |
| 30 | |
| 31 | function Badge({ className, variant, dot = false, children, ...props }: BadgeProps) { |
| 32 | const dotColors: Record<string, string> = { |
| 33 | default: 'bg-surface-400', |
| 34 | success: 'bg-success', |
| 35 | error: 'bg-error', |
| 36 | warning: 'bg-warning', |
| 37 | info: 'bg-info', |
| 38 | brand: 'bg-brand-400', |
| 39 | outline: 'bg-surface-500', |
| 40 | } |
| 41 | const dotColor = dotColors[variant ?? 'default'] ?? dotColors.default |
| 42 | |
| 43 | return ( |
| 44 | <span className={cn(badgeVariants({ variant, className }))} {...props}> |
| 45 | {dot && ( |
| 46 | <span |
| 47 | className={cn('h-1.5 w-1.5 rounded-full flex-shrink-0', dotColor)} |
| 48 | aria-hidden="true" |
| 49 | /> |
| 50 | )} |
| 51 | {children} |
| 52 | </span> |
| 53 | ) |
| 54 | } |
| 55 | |
| 56 | export { Badge, badgeVariants } |