update

app/component/SearchBox/SearchBox.tsx

@@ -0,0 +1,41 @@
+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>
+  );
+}