71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { X, Sparkles } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
import { LABEL_COLORS } from '@/lib/types'
|
|
import { useNotebooks } from '@/context/notebooks-context'
|
|
|
|
interface LabelBadgeProps {
|
|
label: string
|
|
type?: 'ai' | 'user' // Optional: if provided, applies AI vs User styling
|
|
onRemove?: () => void
|
|
variant?: 'default' | 'filter' | 'clickable'
|
|
onClick?: () => void
|
|
isSelected?: boolean
|
|
isDisabled?: boolean
|
|
}
|
|
|
|
export function LabelBadge({
|
|
label,
|
|
type,
|
|
onRemove,
|
|
variant = 'default',
|
|
onClick,
|
|
isSelected = false,
|
|
isDisabled = false,
|
|
}: LabelBadgeProps) {
|
|
const { getLabelColor } = useNotebooks()
|
|
const colorName = getLabelColor(label)
|
|
const colorClasses = LABEL_COLORS[colorName] || LABEL_COLORS.gray
|
|
|
|
// AI labels get special Blueprint styling with Sparkles icon
|
|
const isAI = type === 'ai'
|
|
|
|
return (
|
|
<Badge
|
|
className={cn(
|
|
'text-xs border gap-1 transition-all',
|
|
isAI
|
|
? 'bg-blue-100/70 border-blue-200/50 text-sky-700 dark:bg-sky-900/30 dark:border-sky-700/50 dark:text-sky-300 hover:bg-blue-200/70'
|
|
: `${colorClasses.bg} ${colorClasses.text} ${colorClasses.border}`,
|
|
variant === 'filter' && 'cursor-pointer hover:opacity-80',
|
|
variant === 'clickable' && 'cursor-pointer',
|
|
isDisabled && 'opacity-50',
|
|
isSelected && 'ring-2 ring-primary'
|
|
)}
|
|
onClick={onClick}
|
|
>
|
|
{isAI && <Sparkles className="h-3 w-3 text-[#75B2D6]" />}
|
|
<span className="truncate">{label}</span>
|
|
{onRemove && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
onRemove()
|
|
}}
|
|
className="hover:text-red-600"
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
)}
|
|
{isAI && (
|
|
<span className="relative flex h-1.5 w-1.5 ml-1">
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#75B2D6] opacity-75"></span>
|
|
<span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-[#75B2D6]"></span>
|
|
</span>
|
|
)}
|
|
</Badge>
|
|
)
|
|
}
|