refactoring [WIP]

2023-11-30 06:13:42 -05:00
parent 5850a423f9
commit cfc308f521
5 changed files with 100 additions and 109 deletions
@@ -1,59 +0,0 @@
-import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useEffect, useState } from "react";
-import { useRouter } from "next/router";
-import { toast } from "react-hot-toast";
-
-type Props = {
-  placeHolder?: string;
-};
-
-export default function PublicSearchBar({ placeHolder }: Props) {
-  const router = useRouter();
-
-  const [searchQuery, setSearchQuery] = useState<string>("");
-
-  useEffect(() => {
-    router.query.q
-      ? setSearchQuery(decodeURIComponent(router.query.q as string))
-      : setSearchQuery("");
-  }, [router.query.q]);
-
-  return (
-    <div className="flex items-center relative group">
-      <label
-        htmlFor="search-box"
-        className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md text-primary"
-      >
-        <FontAwesomeIcon icon={faMagnifyingGlass} className="w-4 h-4" />
-      </label>
-
-      <input
-        id="search-box"
-        type="text"
-        placeholder={placeHolder}
-        value={searchQuery}
-        onChange={(e) => {
-          e.target.value.includes("%") &&
-            toast.error("The search query should not contain '%'.");
-          setSearchQuery(e.target.value.replace("%", ""));
-        }}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") {
-            if (!searchQuery) {
-              return router.push("/public/collections/" + router.query.id);
-            }
-
-            return router.push(
-              "/public/collections/" +
-                router.query.id +
-                "?q=" +
-                encodeURIComponent(searchQuery || "")
-            );
-          }
-        }}
-        className="border text-sm border-neutral-content bg-base-200 focus:border-primary rounded-md pl-8 py-2 pr-2 w-44 sm:w-60 md:focus:w-80 duration-100 outline-none"
-      />
-    </div>
-  );
-}