| 'use client' |
|
|
| import { forwardRef, HTMLAttributes } from 'react' |
| import { cn } from '@/utils/helpers' |
|
|
| export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> { |
| variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'outline' | 'muted' |
| } |
|
|
| export const Badge = forwardRef<HTMLSpanElement, BadgeProps>( |
| ({ className, variant = 'primary', children, ...props }, ref) => { |
| const variants = { |
| primary: 'badge-primary', |
| secondary: 'badge-secondary', |
| success: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300', |
| warning: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300', |
| danger: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300', |
| outline: 'badge-outline', |
| muted: 'badge-muted', |
| } |
|
|
| return ( |
| <span |
| ref={ref} |
| className={cn( |
| 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium badge', |
| variants[variant], |
| className |
| )} |
| {...props} |
| > |
| {children} |
| </span> |
| ) |
| } |
| ) |
|
|
| Badge.displayName = 'Badge' |
