docs,api-ref: added search filters (#4830)

* initial implementation of search modal * added hit and search suggestions * added support for multiple indices * updated sample env * added close when click outside dropdown * test for mobile * added mobile design * added shortcut * dark mode fixes * added search to docs * added plugins filter * added React import * moved filters to configurations * handled error on page load * change suggestion text * removed hits limit * handle select all * open link in current tab * change highlight colors * added support for shortcuts + auto focus * change header and footer * redesigned search ui
2023-08-24 18:36:06 +03:00
parent f4bf9ee169
commit f07dc0384f
109 changed files with 4555 additions and 1648 deletions
--- a/www/api-reference/components/Search/ModalOpener/index.tsx
+++ b/www/api-reference/components/Search/ModalOpener/index.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import clsx from "clsx"
+import IconMagnifyingGlass from "../../Icons/MagnifyingGlass"
+import InputText from "../../Input/Text"
+import { MouseEvent, useMemo } from "react"
+import Kbd from "../../MDXComponents/Kbd"
+import { useSearch } from "../../../providers/search"
+import { useMobile } from "../../../providers/mobile"
+import Button from "../../Button"
+import { usePageLoading } from "../../../providers/page-loading"
+import useKeyboardShortcut from "../../../hooks/use-keyboard-shortcut"
+
+const SearchModalOpener = () => {
+  const { setIsOpen } = useSearch()
+  const { isMobile } = useMobile()
+  const isApple = useMemo(() => {
+    return typeof navigator !== "undefined"
+      ? navigator.userAgent.toLowerCase().indexOf("mac") !== 0
+      : true
+  }, [])
+  const { isLoading } = usePageLoading()
+  useKeyboardShortcut({
+    shortcutKeys: ["k"],
+    action: () => setIsOpen((prev) => !prev),
+  })
+
+  const handleOpen = (
+    e:
+      | MouseEvent<HTMLDivElement, globalThis.MouseEvent>
+      | MouseEvent<HTMLInputElement, globalThis.MouseEvent>
+      | MouseEvent<HTMLButtonElement, globalThis.MouseEvent>
+  ) => {
+    if (isLoading) {
+      return
+    }
+    e.preventDefault()
+    if ("blur" in e.target && typeof e.target.blur === "function") {
+      e.target.blur()
+    }
+    setIsOpen(true)
+  }
+
+  return (
+    <>
+      {isMobile && (
+        <Button variant="clear" onClick={handleOpen}>
+          <IconMagnifyingGlass iconColorClassName="stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" />
+        </Button>
+      )}
+      {!isMobile && (
+        <div
+          className={clsx("relative w-min hover:cursor-pointer")}
+          onClick={handleOpen}
+        >
+          <IconMagnifyingGlass
+            iconColorClassName="stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark"
+            className={clsx("absolute left-0.5 top-[5px]")}
+          />
+          <InputText
+            type="search"
+            className={clsx(
+              "placeholder:text-compact-small",
+              "!py-[5px] !pl-[36px] !pr-[8px]",
+              "cursor-pointer select-none"
+            )}
+            placeholder="Find something"
+            onClick={handleOpen}
+            onFocus={(e) => e.target.blur()}
+            tabIndex={-1}
+          />
+          <span
+            className={clsx("gap-0.25 flex", "absolute right-0.5 top-[5px]")}
+          >
+            <Kbd>{isApple ? "⌘" : "Ctrl"}</Kbd>
+            <Kbd>K</Kbd>
+          </span>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default SearchModalOpener