Skip to content

Commit 167b548

Browse files
ericallamericallam
committed
WIP implementing search
1 parent 5655631 commit 167b548

File tree

13 files changed

+821
-331
lines changed

13 files changed

+821
-331
lines changed

‎app/components/SearchBar.tsx‎

Lines changed: 27 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,30 @@
1-
import { ExclamationIcon, SearchIcon } from "@heroicons/react/outline";
1+
import { SearchIcon } from "@heroicons/react/outline";
22
import { ShortcutIcon } from "./Icons/ShortcutIcon";
33
import { Body } from "./Primitives/Body";
44
import { Dialog, DialogTrigger, DialogContent } from "./UI/Dialog";
5-
import { EscapeKeyIcon } from "./Icons/EscapeKeyIcon";
6-
import { ArrowKeysUpDownIcon } from "./Icons/ArrowKeysUpDownIcon";
7-
import { LoadingIcon } from "./Icons/LoadingIcon";
8-
import { SearchItem } from "./SearchItem";
5+
96
import classnames from "~/utilities/classnames";
7+
import { SearchPalette } from "./SearchPalette";
8+
import { useState } from "react";
9+
import { useHotkeys } from "react-hotkeys-hook";
10+
import { useJsonColumnViewAPI } from "~/hooks/useJsonColumnView";
11+
12+
export function SearchBar() {
13+
const [isOpen, setIsOpen] = useState(false);
14+
const { goToNodeId } = useJsonColumnViewAPI();
1015

11-
export type SearchBarProps = {
12-
className?: string;
13-
};
16+
useHotkeys(
17+
"cmd+k",
18+
(e) => {
19+
e.preventDefault();
20+
setIsOpen(true);
21+
},
22+
[setIsOpen]
23+
);
1424

15-
export function SearchBar({ className }: SearchBarProps) {
1625
return (
17-
<Dialog>
18-
<DialogTrigger>
26+
<Dialog open={isOpen}>
27+
<DialogTrigger onClick={() => setIsOpen(true)}>
1928
<div className="flex justify-between items-center group w-44 rounded-sm 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">
2029
<div className="flex items-center pl-1">
2130
<SearchIcon className="w-4 h-4 mr-1" />
@@ -40,73 +49,14 @@ export function SearchBar({ className }: SearchBarProps) {
4049
"bg-white border-[1px] dark:border-slate-700 dark:bg-slate-800"
4150
)}
4251
>
43-
<JamesCommandPalette />
52+
<SearchPalette
53+
onClose={() => setIsOpen(false)}
54+
onSelect={(entry) => {
55+
setIsOpen(false);
56+
goToNodeId(entry.path, "search");
57+
}}
58+
/>
4459
</DialogContent>
4560
</Dialog>
4661
);
4762
}
48-
49-
function JamesCommandPalette() {
50-
return (
51-
<>
52-
<div className="search-container max-h-[60vh] px-4 pt-4 overflow-hidden">
53-
<label className="relative text-gray-400 focus-within:text-gray-600 block">
54-
<SearchIcon className="absolute w-7 h-7 top-1/2 transform -translate-y-1/2 left-3 text-white pointer-events-none" />
55-
<input
56-
type="text"
57-
placeholder="Search the JSON…"
58-
className="search-field w-full pl-12 pr-4 py-4 rounded-sm text-white text-2xl caret-indigo-700 bg-slate-900 border-indigo-700 focus:outline-none focus:ring focus:ring-indigo-700"
59-
/>
60-
</label>
61-
<div className="search-content flex flex-col mt-4 mb-2">
62-
<div className="results flex">
63-
<div className="results-loading flex">
64-
<LoadingIcon className="animate-spin h-5 w-5 mr-1"></LoadingIcon>
65-
<Body className="text-slate-400">Loading…</Body>
66-
</div>
67-
<div className="results-returned">
68-
<Body className="text-slate-400">35 results</Body>
69-
</div>
70-
<div className="results-none flex">
71-
<ExclamationIcon className="h-5 w-5 mr-1 text-white"></ExclamationIcon>
72-
<Body className="text-slate-400">
73-
No results for "sdgiuhnkjdfg"
74-
</Body>
75-
</div>
76-
</div>
77-
</div>
78-
<ul className="search-items w-full max-h-[inherit] pb-24 overflow-y-auto">
79-
<SearchItem></SearchItem>
80-
<SearchItem></SearchItem>
81-
<SearchItem></SearchItem>
82-
<SearchItem></SearchItem>
83-
<SearchItem></SearchItem>
84-
<SearchItem></SearchItem>
85-
<SearchItem></SearchItem>
86-
<SearchItem></SearchItem>
87-
<SearchItem></SearchItem>
88-
<SearchItem></SearchItem>
89-
<SearchItem></SearchItem>
90-
<SearchItem></SearchItem>
91-
<SearchItem></SearchItem>
92-
</ul>
93-
</div>
94-
<div className="footer flex items-center w-full gap-4 px-3 py-2 border-t-[1px] border-slate-700 rounded-br-lg rounded-bl-lg bg-slate-900">
95-
<div className="flex items-center gap-1">
96-
<ShortcutIcon className="w-4 h-4 text-sm text-slate-900 bg-slate-300 transition duration-75 group-hover:bg-slate-100 dark:bg-slate-500 dark:group-hover:bg-slate-600">
97-
⏎
98-
</ShortcutIcon>
99-
<Body className="text-slate-500">to select</Body>
100-
</div>
101-
<div className="flex items-center gap-1">
102-
<ArrowKeysUpDownIcon className="transition text-slate-300 dark:text-slate-500" />
103-
<Body className="text-slate-500">to navigate</Body>
104-
</div>
105-
<div className="flex items-center gap-1">
106-
<EscapeKeyIcon className="transition text-slate-300 dark:text-slate-500" />
107-
<Body className="text-slate-500">to close</Body>
108-
</div>
109-
</div>
110-
</>
111-
);
112-
}

‎app/components/SearchItem.tsx‎

Lines changed: 0 additions & 49 deletions
This file was deleted.

0 commit comments

Comments
 (0)