@@ -17,6 +17,7 @@ export default function Search(props) {
1717
1818 const onChange = useCallback((event) => {
1919 const query = event.target.value;
20+
2021 SetQuery(query);
2122 if (query.length) {
2223 fetch(searchEndpoint(query))
@@ -52,102 +53,117 @@ export default function Search(props) {
5253 SetQuery("");
5354 }, []);
5455
55− return (
56− <div className="fixed w-screen h-screen bg-black bg-opacity-30 z-50 flex flex-col">
57− <div className="p-12 w-100 flex flex-col min-h-0">
58− <div className="relative flex flex-col" ref={searchRef}>
59− <input
60− className="bg-white type-ui text-green rounded-xl border-transparent p-2 outline-none relative"
61− onChange={onChange}
62− onFocus={onFocus}
63− placeholder="Search..."
64− type="text"
65− value={query}
66− autoFocus={true}
67− />
68− {query.length > 0 && (
56+ // Locks document scrolling when search is open
57+ if (typeof document !== "undefined") {
58+ if (props.showSearch) {
59+ document.body.style.overflow = "hidden";
60+ } else {
61+ document.body.style.overflow = "visible";
62+ }
63+ }
64+
65+ if (props.showSearch) {
66+ return (
67+ <div className="fixed w-screen h-screen bg-washedWall z-50 flex flex-col items-center">
68+ <div
69+ className="relative my-32 flex flex-col max-w-screen-lg w-10/12 md:w-10/12 lg:w-8/12 xl:w-6/12 rounded-xl bg-white"
70+ ref={searchRef}
71+ >
72+ <div className="">
73+ <input
74+ className="type-ui text-green bg-transparent py-2 px-4 outline-none relative w-full"
75+ onChange={onChange}
76+ onFocus={onFocus}
77+ placeholder="Search..."
78+ type="text"
79+ value={query}
80+ autoFocus={true}
81+ />
82+
6983 <span
70− onClick={clear}
71− className="absolute right-3"
72− style={{ top: 13 }}
84+ onClick={props.toggleSearch}
85+ className="absolute right-2 top-2 cursor-pointer"
7386 >
74− <svg
75− width="16"
76− height="16"
77− viewBox="0 0 16 16"
78− fill="none"
79− xmlns="http://www.w3.org/2000/svg"
80− >
81− <path
82− fill-rule="evenodd"
83− clip-rule="evenodd"
84− d="M0.39382 13.7045C-0.131273 14.2296 -0.131274 15.081 0.39382 15.6061C0.918913 16.1312 1.77026 16.1312 2.29535 15.6061L7.99999 9.90142L13.7047 15.6061C14.2297 16.1312 15.0811 16.1312 15.6062 15.6061C16.1313 15.081 16.1313 14.2296 15.6062 13.7046L9.90152 7.99989L15.6061 2.29535C16.1311 1.77026 16.1312 0.918913 15.6061 0.39382C15.081 -0.131273 14.2296 -0.131273 13.7045 0.39382L7.99999 6.09836L2.29548 0.393844C1.77038 -0.131249 0.919038 -0.131249 0.393945 0.393844C-0.131148 0.918937 -0.131148 1.77028 0.393945 2.29537L6.09846 7.99989L0.39382 13.7045Z"
85− fill="black"
86− fill-opacity="0.6"
87− />
88− </svg>
87+ <p className="px-2 h-8 bg-wall flex items-center justify-center text-sm rounded">
88+ ESC
89+ </p>
8990 </span>
90− )}
91− </div>
92− <div
93− className={
94− "bg-white overflow-scroll min-h-0 rounded-xl border-transparent mt-2 " +
95− (query.length > 0 ? "" : "hidden")
96− }
97− >
98− {active && glossaryResults.length > 0 && (
99− <ul>
100− {glossaryResults.map(({ name, link, desc, symbol }) => {
101− return (
102− <div className="border-b border-gray">
103− <p className="font-semibold text-sm pb-4 text-gray pl-3 pt-2">
104− Glossary Result
105− </p>
106− <li key={link} className="cursor-pointer hover:bg-wall">
107− <Link href={link} as={link}>
108− <div className="font-semibold px-3">
91+ </div>
92+
93+ <div
94+ className={
95+ "overflow-scroll min-h-0 pb-2" +
96+ (query.length > 0 ? "" : "hidden")
97+ }
98+ >
99+ {active &&
100+ results.length === 0 &&
101+ glossaryResults.length === 0 &&
102+ query !== "" ? (
103+ <div className="flex font-semibold text-sm p-3 py-8 w-full">
104+ <p className="mr-2 text-gray">No Results found for</p>
105+ <p className="font-semibold">"{query}"</p>
106+ </div>
107+ ) : null}
108+ {active && glossaryResults.length > 0 ? (
109+ <div>
110+ <div className="flex font-semibold text-sm p-3 py-1 w-full bg-ultraDeepWall text-white">
111+ <p className="font-semibold text-sm">Glossary</p>
112+ </div>
113+
114+ {glossaryResults.map(({ name, link, desc, symbol }) => {
115+ return (
116+ <Link href={link} as={link} key={link}>
117+ <div className="cursor-pointer hover:bg-wall">
118+ <div className="font-semibold p-3">
109119 {symbol.length > 0 && (
110− <code className="mr-1">{symbol}</code>
120+ <code className="mr-1 bg-wall rounded px-1 py-0.5">
121+ {symbol}
122+ </code>
111123 )}
112124 {name}
113− <p className="font-normal text-base pt-1 pb-4">
114− {desc}
115− </p>
125+ <p className="font-normal text-base mt-1">{desc}</p>
116126 </div>
117− </Link>
118− </li>
119− </div>
120− );
121− })}
122− </ul>
123− )}
124− {active && results.length > 0 && (
125− <ul className="p-2">
126− <div>
127− <p className="font-semibold text-sm pb-4 text-gray">
128− {results.length} results for "{query}"
129− </p>
130− </div>
131− {results
132− .filter((e) => e.parent !== "Glossary")
133− .map(({ title, slug, content, parent }) => {
134− return (
135− <li key={slug} className="cursor-pointer hover:bg-wall">
136− <Link href={slug} as={slug}>
137− <div>
138− <p className="font-medium text-base">
139− {parent} / {title}
140− </p>
141− <p className="text-base font-regular">{content}</p>
142− </div>
143− </Link>
144− </li>
127+ </div>
128+ </Link>
145129 );
146130 })}
147− </ul>
148− )}
131+ </div>
132+ ) : null}
133+ {active && results.length > 0 && (
134+ <ul className="">
135+ <div>
136+ <p className="font-semibold text-sm p-3 py-1 bg-ultraDeepWall text-white">
137+ {results.length} results for "{query}"
138+ </p>
139+ </div>
140+ {results
141+ .filter((e) => e.parent !== "Glossary")
142+ .map(({ title, slug, content, parent }) => {
143+ return (
144+ <li
145+ key={slug}
146+ className="cursor-pointer hover:bg-wall p-3"
147+ >
148+ <Link href={slug} as={slug}>
149+ <div>
150+ <p className="font-medium text-base">
151+ {parent} / {title}
152+ </p>
153+ <p className="text-base font-regular text-small text-gray">
154+ {content}
155+ </p>
156+ </div>
157+ </Link>
158+ </li>
159+ );
160+ })}
161+ </ul>
162+ )}
163+ </div>
149164 </div>
150165 </div>
151− </div>
152− );
166+ );
167+ }
168+ return null;
153169}