import * as React from 'react';
import { cn } from '../../lib/utils';

export interface FilterChipProps extends React.HTMLAttributes<HTMLDivElement> {
  label: string;
  onRemove?: () => void;
  removable?: boolean;
}

function FilterChip({ label, onRemove, removable = true, className, ...props }: FilterChipProps) {
  return (
    <div
      className={cn(
        'inline-flex items-center gap-1.5 border border-foreground/30 bg-foreground/10 px-3 py-1 text-sm font-medium text-foreground/70',
        'transition-all hover:border-foreground/40 hover:bg-foreground/20',
        className
      )}
      {...props}
    >
      <span>{label}</span>
      {removable && onRemove && (
        <button
          type="button"
          onClick={(e) => {
            e.stopPropagation();
            onRemove();
          }}
          className="flex h-4 w-4 items-center justify-center transition hover:bg-foreground/30"
          aria-label={`Remove ${label} filter`}
        >
          <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      )}
    </div>
  );
}

export { FilterChip };
Filter Chip

Installation

Usage
