()
| 11 | import { useJsonSearchApi } from "~/hooks/useJsonSearch"; |
| 12 | |
| 13 | export function SearchBar() { |
| 14 | const [isOpen, setIsOpen] = useState(false); |
| 15 | const { goToNodeId } = useJsonColumnViewAPI(); |
| 16 | const searchApi = useJsonSearchApi(); |
| 17 | |
| 18 | useHotkeys( |
| 19 | "cmd+k,ctrl+k", |
| 20 | (e) => { |
| 21 | e.preventDefault(); |
| 22 | setIsOpen(true); |
| 23 | }, |
| 24 | [setIsOpen] |
| 25 | ); |
| 26 | |
| 27 | return ( |
| 28 | <Dialog open={isOpen} onOpenChange={() => !isOpen && searchApi.reset()}> |
| 29 | <DialogTrigger |
| 30 | className="focus:outline-none focus-visible:outline-none" |
| 31 | onClick={() => setIsOpen(true)} |
| 32 | > |
| 33 | <div className="flex justify-between items-center group w-44 py-[3px] rounded bg-slate-300 transition hover:bg-slate-400 hover:bg-opacity-50 dark:bg-slate-800 dark:text-slate-400 hover:cursor-pointer hover:dark:bg-slate-700 hover:dark:bg-opacity-70"> |
| 34 | <div className="flex items-center pl-1"> |
| 35 | <SearchIcon className="w-4 h-4 mr-1" /> |
| 36 | <Body>Search…</Body> |
| 37 | </div> |
| 38 | <div className="flex items-center gap-1 pr-1"> |
| 39 | <ShortcutIcon className="w-4 h-4 text-sm bg-slate-200 transition group-hover:bg-slate-100 dark:bg-slate-700 dark:group-hover:bg-slate-600"> |
| 40 | ⌘ |
| 41 | </ShortcutIcon> |
| 42 | <ShortcutIcon className="w-4 h-4 text-sm bg-slate-200 transition group-hover:bg-slate-100 dark:bg-slate-700 dark:group-hover:bg-slate-600"> |
| 43 | K |
| 44 | </ShortcutIcon> |
| 45 | </div> |
| 46 | </div> |
| 47 | </DialogTrigger> |
| 48 | <DialogContent |
| 49 | onOverlayClick={() => setIsOpen(false)} |
| 50 | className={classnames( |
| 51 | "fixed z-50", |
| 52 | "w-[95vw] max-w-2xl rounded-lg", |
| 53 | "top-0 left-[50%] -translate-x-[50%]", |
| 54 | "mt-[60px]", |
| 55 | "bg-white border-[1px] border-slate-500 dark:border-slate-700 dark:bg-slate-800" |
| 56 | )} |
| 57 | > |
| 58 | <SearchPalette |
| 59 | onClose={() => setIsOpen(false)} |
| 60 | onSelect={(entry) => { |
| 61 | setIsOpen(false); |
| 62 | goToNodeId(entry, "search"); |
| 63 | }} |
| 64 | /> |
| 65 | </DialogContent> |
| 66 | </Dialog> |
| 67 | ); |
| 68 | } |
nothing calls this directly
no test coverage detected