improved public page [WIP]

2023-11-16 06:51:28 -05:00
parent d972ec2dab
commit 01602bafec
3 changed files with 8 additions and 13 deletions
@@ -0,0 +1,52 @@
+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("");
+
+  useEffect(() => {
+    console.log(router);
+  });
+
+  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-sky-500 dark:text-sky-500"
+      >
+        <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) =>
+          e.key === "Enter" &&
+          router.push(
+            "/public/collections/" +
+              router.query.id +
+              "?q=" +
+              encodeURIComponent(searchQuery)
+          )
+        }
+        className="border text-sm border-sky-100 bg-white dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-7 py-1 pr-1 w-44 sm:w-60 dark:hover:border-neutral-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none dark:bg-neutral-800"
+      />
+    </div>
+  );
+}