better public page [WIP]

components/Modal/Collection/ViewTeam.tsx

@@ -3,7 +3,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCrown } from "@fortawesome/free-solid-svg-icons";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import ProfilePhoto from "@/components/ProfilePhoto";
-import { toast } from "react-hot-toast";
 import getPublicUserData from "@/lib/client/getPublicUserData";
 
 type Props = {
@@ -11,10 +10,6 @@ type Props = {
 };
 
 export default function ViewTeam({ collection }: Props) {
-  const currentURL = new URL(document.URL);
-
-  const publicCollectionURL = `${currentURL.origin}/public/collections/${collection.id}`;
-
   const [collectionOwner, setCollectionOwner] = useState({
     id: null,
     name: "",

components/Navbar.tsx

@@ -6,12 +6,13 @@ import Dropdown from "@/components/Dropdown";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 import Sidebar from "@/components/Sidebar";
 import { useRouter } from "next/router";
-import Search from "@/components/Search";
+import SearchBar from "@/components/SearchBar";
 import useAccountStore from "@/store/account";
 import ProfilePhoto from "@/components/ProfilePhoto";
 import useModalStore from "@/store/modals";
 import { useTheme } from "next-themes";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
+import ToggleDarkMode from "./ToggleDarkMode";
 
 export default function Navbar() {
   const { setModal } = useModalStore();
@@ -56,7 +57,7 @@ export default function Navbar() {
       >
         <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
       </div>
-      <Search />
+      <SearchBar />
       <div className="flex items-center gap-2">
         <div
           onClick={() => {
@@ -76,6 +77,9 @@ export default function Navbar() {
             New Link
           </span>
         </div>
+
+        <ToggleDarkMode className="sm:flex hidden" />
+
         <div className="relative">
           <div
             className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:dark:bg-neutral-700 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit cursor-pointer"

components/PublicSearchBar.tsx

@@ -0,0 +1,57 @@
+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;
+  className?: string;
+};
+
+export default function PublicSearchBar({ placeHolder, className }: Props) {
+  const router = useRouter();
+
+  const routeQuery = router.query.q;
+
+  const [searchQuery, setSearchQuery] = useState(
+    routeQuery ? decodeURIComponent(routeQuery as string) : ""
+  );
+
+  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>
+  );
+}

components/SearchBar.tsx

@@ -4,24 +4,17 @@ import { useState } from "react";
 import { useRouter } from "next/router";
 import { toast } from "react-hot-toast";
 
-export default function Search() {
+export default function SearchBar() {
   const router = useRouter();
 
-  const routeQuery = router.query.query;
+  const routeQuery = router.query.q;
 
   const [searchQuery, setSearchQuery] = useState(
     routeQuery ? decodeURIComponent(routeQuery as string) : ""
   );
 
-  const [searchBox, setSearchBox] = useState(
-    router.pathname.startsWith("/search") || false
-  );
-
   return (
-    <div
-      className="flex items-center relative group"
-      onClick={() => setSearchBox(true)}
-    >
+    <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-sky-500 dark:text-sky-500"
@@ -43,7 +36,6 @@ export default function Search() {
           e.key === "Enter" &&
           router.push("/search?q=" + encodeURIComponent(searchQuery))
         }
-        autoFocus={searchBox}
         className="border border-sky-100 bg-gray-50 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-10 py-2 pr-2 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>

components/ToggleDarkMode.tsx

@@ -2,7 +2,11 @@ import { useTheme } from "next-themes";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
 
-export default function ToggleDarkMode() {
+type Props = {
+  className?: string;
+};
+
+export default function ToggleDarkMode({ className }: Props) {
   const { theme, setTheme } = useTheme();
 
   const handleToggle = () => {
@@ -15,15 +19,13 @@ export default function ToggleDarkMode() {
 
   return (
     <div
-      className="flex gap-1 duration-100 h-10 rounded-full items-center w-fit cursor-pointer"
+      className={`cursor-pointer flex select-none border border-sky-600 items-center justify-center dark:bg-neutral-900 bg-white hover:border-sky-500 group duration-100 rounded-full text-white w-10 h-10 ${className}`}
       onClick={handleToggle}
     >
-      <div className="shadow bg-sky-700 dark:bg-sky-400 flex items-center justify-center rounded-full text-white w-10 h-10 duration-100">
-        <FontAwesomeIcon
-          icon={theme === "dark" ? faSun : faMoon}
-          className="w-1/2 h-1/2"
-        />
-      </div>
+      <FontAwesomeIcon
+        icon={theme === "dark" ? faSun : faMoon}
+        className="w-1/2 h-1/2 text-sky-600 group-hover:text-sky-500"
+      />
     </div>
   );
 }