refactoring [WIP]

components/SearchBar.tsx

@@ -4,7 +4,11 @@ import { useState } from "react";
 import { useRouter } from "next/router";
 import { toast } from "react-hot-toast";
 
-export default function SearchBar() {
+type Props = {
+  placeholder?: string;
+};
+
+export default function SearchBar({ placeholder }: Props) {
   const router = useRouter();
 
   const routeQuery = router.query.q;
@@ -17,7 +21,7 @@ export default function SearchBar() {
     <div className="flex items-center relative group">
       <label
         htmlFor="search-box"
-        className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md p-1 text-primary"
+        className="inline-flex w-fit absolute left-1 pointer-events-none rounded-md p-1 text-primary"
       >
         <FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
       </label>
@@ -25,18 +29,34 @@ export default function SearchBar() {
       <input
         id="search-box"
         type="text"
-        placeholder="Search for Links"
+        placeholder={placeholder || "Search for Links"}
         value={searchQuery}
         onChange={(e) => {
           e.target.value.includes("%") &&
             toast.error("The search query should not contain '%'.");
           setSearchQuery(e.target.value.replace("%", ""));
         }}
-        onKeyDown={(e) =>
-          e.key === "Enter" &&
-          router.push("/search?q=" + encodeURIComponent(searchQuery))
-        }
-        className="border border-neutral-content bg-base-200 focus:border-primary py-2 rounded-md pl-10 pr-2 w-44 sm:w-60 md:focus:w-80 duration-100 outline-none"
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            if (router.pathname.startsWith("/public")) {
+              if (!searchQuery) {
+                return router.push("/public/collections/" + router.query.id);
+              }
+
+              return router.push(
+                "/public/collections/" +
+                  router.query.id +
+                  "?q=" +
+                  encodeURIComponent(searchQuery || "")
+              );
+            } else {
+              return router.push(
+                "/search?q=" + encodeURIComponent(searchQuery)
+              );
+            }
+          }
+        }}
+        className="border border-neutral-content bg-base-200 focus:border-primary py-1 rounded-md pl-9 pr-2 w-44 sm:w-60 md:focus:w-80 duration-100 outline-none"
       />
     </div>
   );