"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

interface FilterChip {
  id: string
  label: string
  active?: boolean
}

interface FilterBarProps extends React.HTMLAttributes<HTMLDivElement> {
  filters: FilterChip[]
  searchPlaceholder?: string
  searchValue?: string
  onSearchChange?: (value: string) => void
  onFilterToggle?: (id: string) => void
  onClearAll?: () => void
  showClearAll?: boolean
}

function SearchIcon() {
  return (
    <svg viewBox="0 0 20 20" className="h-4 w-4" aria-hidden>
      <circle
        cx="9"
        cy="9"
        r="5.5"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
      />
      <path
        d="M13 13l4 4"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
      />
    </svg>
  )
}

function CloseIcon() {
  return (
    <svg viewBox="0 0 16 16" className="h-3 w-3" aria-hidden>
      <path
        d="M4 4l8 8M12 4l-8 8"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
      />
    </svg>
  )
}

const FilterBar = React.forwardRef<HTMLDivElement, FilterBarProps>(
  (
    {
      filters,
      searchPlaceholder = "Search...",
      searchValue,
      onSearchChange,
      onFilterToggle,
      onClearAll,
      showClearAll = true,
      className,
      ...props
    },
    ref
  ) => {
    const [internalSearch, setInternalSearch] = React.useState("")
    const search = searchValue !== undefined ? searchValue : internalSearch

    const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      const value = e.target.value
      if (onSearchChange) {
        onSearchChange(value)
      } else {
        setInternalSearch(value)
      }
    }

    const hasActiveFilters = filters.some((f) => f.active)

    return (
      <div
        ref={ref}
        className={cn(
          "flex flex-wrap items-center gap-3 rounded-xl border border-border bg-card px-4 py-3",
          className
        )}
        {...props}
      >
        <div className="relative flex-1 min-w-[180px]">
          <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
            <SearchIcon />
          </span>
          <input
            type="text"
            value={search}
            onChange={handleSearchChange}
            placeholder={searchPlaceholder}
            className="w-full rounded-lg border border-border bg-background py-2 pl-10 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20"
          />
        </div>
        <div className="flex flex-wrap items-center gap-2">
          {filters.map((filter) => (
            <button
              key={filter.id}
              type="button"
              onClick={() => onFilterToggle?.(filter.id)}
              className={cn(
                "inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors",
                filter.active
                  ? "border-primary bg-primary text-background"
                  : "border-border bg-muted text-foreground hover:bg-background"
              )}
            >
              {filter.label}
              {filter.active ? (
                <span className="ml-0.5">
                  <CloseIcon />
                </span>
              ) : null}
            </button>
          ))}
        </div>
        {showClearAll && hasActiveFilters ? (
          <button
            type="button"
            onClick={onClearAll}
            className="text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
          >
            Clear all
          </button>
        ) : null}
      </div>
    )
  }
)

FilterBar.displayName = "FilterBar"

export { FilterBar }
export type { FilterBarProps, FilterChip }
Filter Bar

Dependencies

Files

Installation
