changes to the searchbox

components/Search.tsx

@@ -1,10 +1,13 @@
+// Copyright (C) 2022-present Daniel31x13 <daniel31x13@gmail.com>
+// This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, version 3.
+// This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+// You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+
 import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useEffect, useState } from "react";
-import ClickAwayHandler from "./ClickAwayHandler";
 import useSearchSettingsStore from "@/store/search";
 import { useRouter } from "next/router";
-import Checkbox from "./Checkbox";
 
 export default function Search() {
   const router = useRouter();
@@ -13,69 +16,47 @@ export default function Search() {
     false || router.pathname == "/search"
   );
 
-  const { searchSettings, toggleCheckbox, setSearchQuery } =
+  const { searchSettings, setSearchSettings, setSearchQuery } =
     useSearchSettingsStore();
 
   useEffect(() => {
-    if (router.pathname !== "/search") setSearchQuery("");
+    if (router.pathname !== "/search")
+      setSearchSettings({
+        query: "",
+        filter: {
+          name: true,
+          url: true,
+          title: true,
+          collection: true,
+          tags: true,
+        },
+      });
   }, [router]);
 
   return (
-    <ClickAwayHandler onClickOutside={() => setSearchBox(false)}>
-      <div
-        className="flex items-center relative"
-        onClick={() => setSearchBox(true)}
+    <div
+      className="flex items-center relative"
+      onClick={() => setSearchBox(true)}
+    >
+      <label
+        htmlFor="search-box"
+        className="inline-flex w-fit absolute right-0 pointer-events-none rounded-md p-1 text-sky-500"
       >
-        <label
-          htmlFor="search-box"
-          className="inline-flex w-fit absolute right-0 pointer-events-none rounded-md p-1 text-sky-500"
-        >
-          <FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
-        </label>
+        <FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
+      </label>
 
-        <input
-          id="search-box"
-          type="text"
-          placeholder="Search for Links"
-          value={searchSettings.query}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          onFocus={() => router.push("/search")}
-          autoFocus={searchBox}
-          className="border border-sky-100 rounded-md pr-6 w-60 focus:border-sky-500 sm:focus:w-80 hover:border-sky-500 duration-100 outline-none p-1"
-        />
-        {searchBox ? (
-          <div className="absolute top-9 left-0 shadow-md bg-gray-50 rounded-md p-2 z-20 border border-sky-100 w-60 sm:w-80">
-            <div className="grid grid-cols-2 gap-x-5 gap-y-2 w-fit mx-auto">
-              <p className="text-sky-900 font-semibold">Filter by</p>
-              <Checkbox
-                label="Name"
-                state={searchSettings.filter.name}
-                onClick={() => toggleCheckbox("name")}
-              />
-              <Checkbox
-                label="Link"
-                state={searchSettings.filter.url}
-                onClick={() => toggleCheckbox("url")}
-              />
-              <Checkbox
-                label="Title"
-                state={searchSettings.filter.title}
-                onClick={() => toggleCheckbox("title")}
-              />
-              <Checkbox
-                label="Collection"
-                state={searchSettings.filter.collection}
-                onClick={() => toggleCheckbox("collection")}
-              />
-              <Checkbox
-                label="Tags"
-                state={searchSettings.filter.tags}
-                onClick={() => toggleCheckbox("tags")}
-              />
-            </div>
-          </div>
-        ) : null}
-      </div>
-    </ClickAwayHandler>
+      <input
+        id="search-box"
+        type="text"
+        placeholder="Search for Links"
+        value={searchSettings.query}
+        onChange={(e) => {
+          setSearchQuery(e.target.value);
+          router.push("/search");
+        }}
+        autoFocus={searchBox}
+        className="border border-sky-100 rounded-md pr-6 w-60 focus:border-sky-500 sm:focus:w-80 hover:border-sky-500 duration-100 outline-none p-1"
+      />
+    </div>
   );
 }