'use client';

import * as React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { fass } from '../../lib/fontawesome-kit';
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group";
import { cn } from '../../lib/utils';

export interface SearchBarProps extends Omit<React.ComponentProps<'input'>, 'onChange' | 'onFocus' | 'onBlur' | 'value'> {
  onSearch?: (value: string) => void;
  onClear?: () => void;
  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
  debounceMs?: number;
  showClearButton?: boolean;
}

function SearchBar({
  onSearch,
  onClear,
  onFocus,
  onBlur,
  debounceMs = 300,
  showClearButton = true,
  className,
  placeholder = 'Search products...',
  defaultValue,
  ...props
}: SearchBarProps) {
  const [value, setValue] = React.useState(
    typeof defaultValue === 'string' ? defaultValue : '',
  );
  const timeoutRef = React.useRef<NodeJS.Timeout | undefined>(undefined);

  React.useEffect(() => {
    return () => {
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
    };
  }, []);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    setValue(newValue);

    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }

    timeoutRef.current = setTimeout(() => {
      onSearch?.(newValue);
    }, debounceMs);
  };

  const handleClear = () => {
    setValue('');
    onClear?.();
    onSearch?.('');
  };

  return (
    <div className={cn('relative w-full', className)}>
      <InputGroup variant="slant" className="h-9 w-full">
        <InputGroupAddon align="inline-start">
          <InputGroupText>
            <FontAwesomeIcon icon={fass.faMagnifyingGlass} className="h-4 w-4 text-muted-foreground" />
          </InputGroupText>
        </InputGroupAddon>
        <InputGroupInput
          type="text"
          value={value}
          onChange={handleChange}
          onFocus={onFocus}
          onBlur={onBlur}
          placeholder={placeholder}
          className={cn('min-w-0', showClearButton && 'pr-10')}
          {...props}
        />
      </InputGroup>
      {showClearButton && value ? (
        <button
          type="button"
          onClick={handleClear}
          className="absolute right-6 top-1/2 z-10 flex h-5 w-5 -translate-y-1/2 items-center justify-center text-muted-foreground transition-colors hover:text-foreground"
          aria-label="Clear search"
        >
          <FontAwesomeIcon icon={fass.faXmark} className="h-3.5 w-3.5" />
        </button>
      ) : null}
    </div>
  );
}

export { SearchBar };
Search Bar

Installation

Usage
