chore(docs): cleanup new search behaviour

Author: ndom91

docs/components/Docsearch/hit.tsx

@@ -1,14 +1,23 @@
-import { Highlight } from "react-instantsearch"
+import { Highlight, useInstantSearch } from "react-instantsearch"
 import Link from "next/link"
 
 export default function Hit({ hit }) {
+  const { setIndexUiState } = useInstantSearch()
   const hierarchy = Object.values(hit.hierarchy)?.filter(Boolean)
   const path = new URL(hit.url_without_anchor).pathname
 
+  const onClick = () => {
+    setIndexUiState((prevIndexUiState) => ({
+      ...prevIndexUiState,
+      query: "",
+    }))
+  }
+
   return (
     <Link
       key={hit.objectID}
       href={hit.url}
+      onClick={onClick}
       className="flex flex-col gap-2 p-4 px-2 rounded-md text-neutral-800 group dark:text-neutral-100 hover:dark:bg-neutral-900 hover:bg-neutral-200"
     >
       <h3 className="flex items-center text-sm font-semibold after:content-[''] whitespace-nowrap after:absolute after:bg-gradient-to-r after:h-6 after:right-0 after:w-12 after:from-transparent after:to-neutral-100 after:dark:to-neutral-800 relative overflow-hidden group-hover:dark:after:to-neutral-900 group-hover:after:to-neutral-200">

docs/components/Docsearch/index.tsx

@@ -1,15 +1,18 @@
 import dynamic from "next/dynamic"
 
-const DocSearch = dynamic(() => import("./search").then((mod) => mod.default), {
-  ssr: false,
-  loading: () => (
-    <div className="relative max-md:ml-6 h-8 appearance-none rounded-lg px-3 py-1.5 transition-colors text-base leading-tight md:text-sm bg-black/[.05] dark:bg-gray-50/10 focus:!bg-transparent pr-2 w-48 text-gray-500 dark:text-gray-400">
-      Search...
-      <kbd className="flex absolute top-0 right-0 gap-1 items-center px-1.5 my-1.5 h-5 font-mono font-medium text-gray-500 bg-white rounded border transition-opacity pointer-events-none select-none ltr:right-1.5 rtl:left-1.5 text-[10px] contrast-more:border-current contrast-more:text-current contrast-more:dark:border-current max-sm:hidden dark:border-gray-100/20 dark:bg-black/50">
-        CTRL K
-      </kbd>
-    </div>
-  ),
-})
+const DocSearch = dynamic(
+  () => import("./wrapper").then((mod) => mod.default),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="relative max-md:ml-6 h-8 appearance-none rounded-lg px-3 py-1.5 transition-colors text-base leading-tight md:text-sm bg-black/[.05] dark:bg-gray-50/10 focus:!bg-transparent pr-2 w-48 text-gray-500 dark:text-gray-400">
+        Search...
+        <kbd className="flex absolute top-0 right-0 gap-1 items-center px-1.5 my-1.5 h-5 font-mono font-medium text-gray-500 bg-white rounded border transition-opacity pointer-events-none select-none ltr:right-1.5 rtl:left-1.5 text-[10px] contrast-more:border-current contrast-more:text-current contrast-more:dark:border-current max-sm:hidden dark:border-gray-100/20 dark:bg-black/50">
+          CTRL K
+        </kbd>
+      </div>
+    ),
+  }
+)
 
 export default DocSearch

docs/components/Docsearch/searchbox.tsx renamed to docs/components/Docsearch/searchInput.tsx

@@ -2,7 +2,7 @@ import { useEffect } from "react"
 import algoliasearch from "algoliasearch/lite"
 import { Hits, useInstantSearch } from "react-instantsearch"
 import { InstantSearchNext } from "react-instantsearch-nextjs"
-import { CustomSearchBox } from "./searchbox"
+import { CustomSearchBox } from "./searchInput"
 import Hit from "./hit"
 
 const algoliaClient = algoliasearch(