f07dc0384f
* 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
50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import clsx from "clsx"
|
|
import { useInstantSearch } from "react-instantsearch"
|
|
import SearchHitGroupName from "../Hits/GroupName"
|
|
|
|
const SearchSuggestions = () => {
|
|
const { setIndexUiState } = useInstantSearch()
|
|
const suggestions = [
|
|
"Authentication",
|
|
"Expanding fields",
|
|
"Selecting fields",
|
|
"Pagination",
|
|
"Query parameter types",
|
|
]
|
|
return (
|
|
<div className="h-full overflow-auto">
|
|
<SearchHitGroupName name={"Search suggestions"} />
|
|
{suggestions.map((suggestion, index) => (
|
|
<div
|
|
className={clsx(
|
|
"flex items-center justify-between",
|
|
"cursor-pointer rounded-sm p-0.5",
|
|
"hover:bg-medusa-bg-base-hover dark:hover:bg-medusa-bg-base-hover-dark",
|
|
"focus:bg-medusa-bg-base-hover dark:focus:bg-medusa-bg-base-hover-dark",
|
|
"focus:outline-none"
|
|
)}
|
|
onClick={() =>
|
|
setIndexUiState({
|
|
query: suggestion,
|
|
})
|
|
}
|
|
key={index}
|
|
tabIndex={index}
|
|
data-hit
|
|
>
|
|
<span
|
|
className={clsx(
|
|
"text-medusa-fg-base dark:text-medusa-fg-base-dark",
|
|
"text-compact-small"
|
|
)}
|
|
>
|
|
{suggestion}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SearchSuggestions
|