34 lines
886 B
TypeScript
34 lines
886 B
TypeScript
import { cn } from '@/lib/utils'
|
|
|
|
interface BadgeProps {
|
|
children: React.ReactNode
|
|
variant?: 'default' | 'primary' | 'accent' | 'mint' | 'sun'
|
|
className?: string
|
|
onClick?: () => void
|
|
}
|
|
|
|
const variants = {
|
|
default: 'bg-surface-warm text-text-secondary border border-border-light',
|
|
primary: 'bg-primary-soft text-primary',
|
|
accent: 'bg-accent-soft text-accent',
|
|
mint: 'bg-mint-soft text-mint',
|
|
sun: 'bg-sun-soft text-sun',
|
|
}
|
|
|
|
export function Badge({ children, variant = 'default', className, onClick }: BadgeProps) {
|
|
const Tag = onClick ? 'button' : 'span'
|
|
return (
|
|
<Tag
|
|
onClick={onClick}
|
|
className={cn(
|
|
'pill inline-flex items-center font-semibold transition-all duration-150',
|
|
variants[variant],
|
|
onClick && 'cursor-pointer hover:scale-105 active:scale-95',
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</Tag>
|
|
)
|
|
}
|