spb/fabri-ka Public

1import { FormEvent, useState } from 'react'2import { useNavigate } from 'react-router-dom'3import { IconSearch } from './Icons'45interface Props {6  compact?: boolean7  placeholder?: string8  initialValue?: string9  /** id for the input (used by the "/" keyboard shortcut in the header). */10  inputId?: string11  /** Show the "/" keyboard hint inside the field (desktop header). */12  shortcutHint?: boolean13}1415export default function SearchBar({16  compact = false,17  placeholder = 'Rechercher un produit québécois…',18  initialValue = '',19  inputId,20  shortcutHint = false,21}: Props) {22  const [value, setValue] = useState(initialValue)23  const [focused, setFocused] = useState(false)24  const navigate = useNavigate()2526  function onSubmit(e: FormEvent) {27    e.preventDefault()28    const q = value.trim()29    navigate(q ? `/produits?q=${encodeURIComponent(q)}` : '/produits')30  }3132  return (33    <form34      className={compact ? 'searchbar searchbar-compact' : 'searchbar'}35      onSubmit={onSubmit}36      role="search"37    >38      <div className="searchbar-field">39        <span className="searchbar-icon" aria-hidden="true">40          <IconSearch size={compact ? 16 : 18} />41        </span>42        <input43          id={inputId}44          type="search"45          value={value}46          onChange={(e) => setValue(e.target.value)}47          onFocus={() => setFocused(true)}48          onBlur={() => setFocused(false)}49          placeholder={placeholder}50          aria-label="Rechercher"51          enterKeyHint="search"52        />53        {shortcutHint && !focused && value === '' && (54          <kbd className="searchbar-kbd" aria-hidden="true">55            /56          </kbd>57        )}58      </div>59      {!compact && (60        <button type="submit" aria-label="Lancer la recherche">61          Rechercher62        </button>63      )}64    </form>65  )66}67