Search

1'use client';
2/* eslint-disable eslint-frontend-rules/no-focusable-non-interactive-elements */
3 
4import { cva, type VariantProps } from 'class-variance-authority';
5import { SearchIcon, X } from 'lucide-react';
6import { ComponentProps, useCallback, useRef } from 'react';
7 
8import { cn } from '@/lib/utils';
9 
10const SEARCH_VARIANTS = cva(
11  'flex items-center gap-2 rounded-lg border border-neutral-200 bg-neutral-0 transition-[color,background-color,border-color,box-shadow] duration-150 focus-within:border-primary focus-within:shadow-focus-primary',
12  {
13    variants: {
14      size: {
15        sm: 'h-8 px-2.5 text-xs',
16        md: 'h-10 px-3 text-sm',
17        lg: 'h-12 px-4 text-base',
18      },
19    },
20    defaultVariants: {
21      size: 'md',
22    },
23  },
24);
25 
26interface ISearchProps
27  extends Omit<ComponentProps<'input'>, 'size'>,
28    VariantProps<typeof SEARCH_VARIANTS> {
29  onClear?: () => void;
30  containerClassName?: string;
31}
32 
33/** Search input field with icon and optional clear button. */
34function Search({ className, size, onClear, containerClassName, value, ...props }: ISearchProps) {
35  const inputRef = useRef<HTMLInputElement>(null);
36  const handleContainerClick = useCallback(() => inputRef.current?.focus(), []);
37 
38  return (
39    <div
40      className={cn(SEARCH_VARIANTS({ size, className: containerClassName }))}
41      onClick={handleContainerClick}
42    >
43      <SearchIcon className='size-4 shrink-0 text-neutral-500' />
44      <input
45        ref={inputRef}
46        type='search'
47        className={cn(
48          'flex-1 bg-transparent outline-none placeholder:text-neutral-500',
49          // Hide the browser's native "x" clear control on type=search inputs.
50          // We render our own button so we don't want two of them.
51          '[&::-ms-clear]:hidden [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none',
52          className,
53        )}
54        value={value}
55        {...props}
56      />
57      {value && onClear && (
58        <button
59          type='button'
60          onClick={onClear}
61          className='shrink-0 rounded-sm opacity-60 transition-opacity hover:opacity-100 focus:outline-none'
62          aria-label='Clear search'
63        >
64          <X className='size-3.5' />
65        </button>
66      )}
67    </div>
68  );
69}
70 
71export { Search, SEARCH_VARIANTS };