42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
import { useCallback, useState } from "react";
|
|
|
|
import { TextInput, rem } from "@mantine/core";
|
|
import { TbSearch } from "react-icons/tb";
|
|
|
|
import type { UseSearchBoxProps } from "react-instantsearch";
|
|
import { useSearchBox } from "react-instantsearch";
|
|
|
|
export default function SearchBox(props: UseSearchBoxProps) {
|
|
const { query, refine } = useSearchBox(props);
|
|
const [inputValue, setInputValue] = useState(query);
|
|
|
|
const setQuery = useCallback(
|
|
(value: string) => {
|
|
setInputValue(value);
|
|
refine(value);
|
|
},
|
|
[refine, setInputValue],
|
|
);
|
|
|
|
return (
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}}
|
|
>
|
|
<TextInput
|
|
placeholder="Search"
|
|
autoComplete="off"
|
|
autoCorrect="off"
|
|
autoCapitalize="off"
|
|
spellCheck="false"
|
|
type="search"
|
|
leftSection={<TbSearch style={{ width: rem(16), height: rem(16) }} />}
|
|
value={inputValue}
|
|
onChange={(event) => setQuery(event.currentTarget.value)}
|
|
/>
|
|
</form>
|
|
);
|
|
}
|