Badge

<Badge variant="magenta">BOSS LEVEL</Badge>

import { cn } from '@/lib/utils'

interface BadgeProps {
  children:   React.ReactNode
  variant?:   'magenta' | 'cyan' | 'yellow' | 'green'
  className?: string
}

const BADGE_VARIANTS: Record<NonNullable<BadgeProps['variant']>, string> = {
  green:   'badge-green',
  magenta: 'badge-magenta',
  cyan:    'badge-cyan',
  yellow:  'badge-yellow',
}

export function Badge({ children, variant = 'green', className }: BadgeProps): React.JSX.Element {
  return (
    <span className={cn('badge', BADGE_VARIANTS[variant], className)}>
      {children}
    </span>
  )
}