37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
|
|
export type BadgeVariant = 'info' | 'success' | 'warning' | 'error'
|
|
|
|
interface BadgeProps {
|
|
children: ReactNode
|
|
variant?: BadgeVariant
|
|
className?: string
|
|
}
|
|
|
|
function getVariantClasses(variant: BadgeVariant): string {
|
|
switch (variant) {
|
|
case 'info':
|
|
return 'bg-neon-cyan/20 text-neon-cyan border-neon-cyan/50'
|
|
case 'success':
|
|
return 'bg-neon-green/20 text-neon-green border-neon-green/50'
|
|
case 'warning':
|
|
return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/50'
|
|
case 'error':
|
|
return 'bg-red-500/20 text-red-400 border-red-500/50'
|
|
default:
|
|
return 'bg-neon-cyan/20 text-neon-cyan border-neon-cyan/50'
|
|
}
|
|
}
|
|
|
|
export function Badge({ children, variant = 'info', className = '' }: BadgeProps): React.ReactElement {
|
|
const variantClasses = getVariantClasses(variant)
|
|
const baseClasses = 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border'
|
|
const combinedClasses = `${baseClasses} ${variantClasses} ${className}`.trim()
|
|
|
|
return (
|
|
<span className={combinedClasses}>
|
|
{children}
|
|
</span>
|
|
)
|
|
}
|