31 lines
1.1 KiB
JavaScript
31 lines
1.1 KiB
JavaScript
import * as React from 'react'
|
|
|
|
const Badge = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement> & {
|
|
variant?: 'default' | 'secondary' | 'outline' | 'success' | 'warning' | 'error'
|
|
}
|
|
>(({ 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 }
|