/ src / components / ui / filter-pill.tsx
filter-pill.tsx
 1  import { cn } from '@/lib/utils'
 2  
 3  interface FilterPillProps {
 4    label: string
 5    active?: boolean
 6    onClick: () => void
 7    className?: string
 8  }
 9  
10  export function FilterPill({ label, active, onClick, className }: FilterPillProps) {
11    return (
12      <button
13        type="button"
14        onClick={onClick}
15        className={cn(
16          'px-2.5 py-1 rounded-[8px] text-[10px] font-700 uppercase tracking-[0.08em] border transition-all cursor-pointer bg-transparent',
17          active
18            ? 'bg-accent-soft border-accent-bright/15 text-accent-bright'
19            : 'border-white/[0.05] text-text-3/70 hover:bg-white/[0.03] hover:text-text-2',
20          className,
21        )}
22        style={{ fontFamily: 'inherit' }}
23      >
24        {label}
25      </button>
26    )
27  }