27 lines
1.0 KiB
JavaScript
27 lines
1.0 KiB
JavaScript
import * as React from 'react'
|
|
|
|
const Badge = React.forwardRef(
|
|
({ className = '', variant = 'default', ...props }, ref) => {
|
|
const baseStyles = 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2'
|
|
|
|
const variants = {
|
|
default: 'border-transparent bg-primary-navy text-white hover:bg-primary-navy-dark',
|
|
secondary: 'border-transparent bg-section-alt text-text hover:bg-opacity-80',
|
|
outline: 'text-foreground',
|
|
success: 'border-transparent bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300',
|
|
warning: 'border-transparent bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300',
|
|
error: 'border-transparent bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
|
|
}
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={`${baseStyles} ${variants[variant]} ${className}`}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
)
|
|
Badge.displayName = 'Badge'
|
|
|
|
export { Badge } |