@@ -53,104 +53,101 @@ export default function Search(props) {
5353 }, []);
5454
5555 return (
56− <>
57− <div className="fixed w-screen h-screen bg-black bg-opacity-30 z-50 flex flex-col">
58− <div className="p-12 w-100 flex flex-col min-h-0">
59− <div className="relative flex flex-col" ref={searchRef}>
60− <input
61− className="bg-white type-ui text-green rounded-xl border-transparent p-2 outline-none relative"
62− onChange={onChange}
63− onFocus={onFocus}
64− placeholder="Search..."
65− type="text"
66− value={query}
67− autoFocus={true}
68− />
69− {query.length > 0 && (
70− <span
71− onClick={clear}
72− className="absolute right-3"
73− style={{ top: 13 }}
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 && (
69+ <span
70+ onClick={clear}
71+ className="absolute right-3"
72+ style={{ top: 13 }}
73+ >
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"
7480 >
75− <svg
76− width="16"
77− height="16"
78− viewBox="0 0 16 16"
79− fill="none"
80− xmlns="http://www.w3.org/2000/svg"
81− >
82− <path
83− fill-rule="evenodd"
84− clip-rule="evenodd"
85− 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"
86− fill="black"
87− fill-opacity="0.6"
88− />
89− </svg>
90− </span>
91− )}
92− </div>
93− <div
94− className={
95− "bg-white overflow-scroll min-h-0 rounded-xl border-transparent mt-2 " +
96− (query.length > 0 ? "" : "hidden")
97− }
98− >
99− {active && glossaryResults.length > 0 && (
100− <ul>
101− {glossaryResults.map(({ name, link, desc, symbol }) => {
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>
89+ </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">
109+ {symbol.length > 0 && (
110+ <code className="mr-1">{symbol}</code>
111+ )}
112+ {name}
113+ <p className="font-normal text-base pt-1 pb-4">
114+ {desc}
115+ </p>
116+ </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 }) => {
102134 return (
103− <div className="border-b border-gray">
104− <p className="font-semibold text-sm pb-4 text-gray pl-3 pt-2">
105− Glossary Result
106− </p>
107− <li key={link} className="cursor-pointer hover:bg-wall">
108− <Link href={link} as={link}>
109− <div className="font-semibold px-3">
110− {symbol.length > 0 && (
111− <code className="mr-1">{symbol}</code>
112− )}
113− {name}
114− <p className="font-normal text-base pt-1 pb-4">
115− {desc}
116− </p>
117− </div>
118− </Link>
119− </li>
120− </div>
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>
121145 );
122146 })}
123− </ul>
124− )}
125− {active && results.length > 0 && (
126− <ul className="p-2">
127− <div>
128− <p className="font-semibold text-sm pb-4 text-gray">
129− {results.length} results for "{query}"
130− </p>
131− </div>
132− {results
133− .filter((e) => e.parent !== "Glossary")
134− .map(({ title, slug, content, parent }) => {
135− return (
136− <li key={slug} className="cursor-pointer hover:bg-wall">
137− <Link href={slug} as={slug}>
138− <div>
139− <p className="font-medium text-base">
140− {parent} / {title}
141− </p>
142− <p className="text-base font-regular">{content}</p>
143− </div>
144− </Link>
145− </li>
146− );
147− })}
148− </ul>
149− )}
150− </div>
147+ </ul>
148+ )}
151149 </div>
152150 </div>
153− {props.children}
154− </>
151+ </div>
155152 );
156153}