From 64a1f352cf5276e152a213c33c2b196ffb9d29a6 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Wed, 29 Nov 2023 15:17:51 -0500
Subject: [PATCH] recreated SortDropdown components

---
 components/CollectionCard.tsx     |   4 +-
 components/Navbar.tsx             |  86 ++++++---------
 components/SortDropdown.tsx       | 171 +++++++++++++++++++++---------
 components/ToggleDarkMode.tsx     |  63 ++++++-----
 pages/collections/[id].tsx        |  27 +----
 pages/collections/index.tsx       |  22 +---
 pages/links/index.tsx             |  23 +---
 pages/links/pinned.tsx            |  24 +----
 pages/public/collections/[id].tsx |  26 +----
 pages/search.tsx                  |  21 +---
 pages/tags/[id].tsx               |  22 +---
 11 files changed, 198 insertions(+), 291 deletions(-)

diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index a141313..fcea927 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -59,7 +59,7 @@ export default function CollectionCard({ collection, className }: Props) {
 
   return (
     <div className="relative">
-      <div className="dropdown dropdown-bottom dropdown-end absolute top-3 right-3 z-20">
+      <div className="dropdown dropdown-bottom dropdown-end absolute top-3 right-3 z-10">
         <div
           tabIndex={0}
           role="button"
@@ -72,7 +72,7 @@ export default function CollectionCard({ collection, className }: Props) {
             id={"expand-dropdown" + collection.id}
           />
         </div>
-        <ul className="dropdown-content z-[1] menu p-2 shadow bg-base-200 border border-neutral-content rounded-box w-52">
+        <ul className="dropdown-content z-[1] menu p-2 shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
           {permissions === true ? (
             <li>
               <div
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index f36a543..5e58daa 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -2,7 +2,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { signOut } from "next-auth/react";
 import { faPlus, faBars, faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { useEffect, useState } from "react";
-import Dropdown from "@/components/Dropdown";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 import Sidebar from "@/components/Sidebar";
 import { useRouter } from "next/router";
@@ -14,14 +13,13 @@ import ToggleDarkMode from "./ToggleDarkMode";
 import useLocalSettingsStore from "@/store/localSettings";
 import NewLinkModal from "./Modals/NewLink";
 import NewCollectionModal from "./Modals/NewCollectionModal";
+import Link from "next/link";
 
 export default function Navbar() {
   const { settings, updateSettings } = useLocalSettingsStore();
 
   const { account } = useAccountStore();
 
-  const [profileDropdown, setProfileDropdown] = useState(false);
-
   const router = useRouter();
 
   const [sidebar, setSidebar] = useState(false);
@@ -71,13 +69,13 @@ export default function Navbar() {
             <div
               tabIndex={0}
               role="button"
-              className="flex items-center group btn btn-accent text-white btn-sm"
+              className="flex items-center group btn btn-accent text-white btn-sm px-2"
             >
               <FontAwesomeIcon icon={faPlus} className="w-5 h-5" />
               <FontAwesomeIcon icon={faCaretDown} className="w-3 h-3" />
             </div>
           </div>
-          <ul className="dropdown-content z-[1] menu p-2 shadow bg-base-200 border border-neutral-content rounded-box w-52">
+          <ul className="dropdown-content z-[1] menu p-2 shadow bg-base-200 border border-neutral-content rounded-box w-40 mt-1">
             <li>
               <div
                 onClick={() => setNewLinkModalIsOpen(true)}
@@ -99,64 +97,42 @@ export default function Navbar() {
           </ul>
         </div>
 
-        <div className="relative">
-          <div
-            className="btn btn-circle btn-ghost"
-            onClick={() => setProfileDropdown(!profileDropdown)}
-            id="profile-dropdown"
-          >
+        <div className="dropdown dropdown-end">
+          <div tabIndex={0} role="button" className="btn btn-circle btn-ghost">
             <ProfilePhoto
               src={account.image ? account.image : undefined}
               priority={true}
               className=""
             />
           </div>
-          {profileDropdown ? (
-            <Dropdown
-              items={[
-                {
-                  name: "Settings",
-                  href: "/settings/account",
-                },
-                {
-                  name: `Switch to ${
-                    settings.theme === "light" ? "Dark" : "Light"
-                  }`,
-                  onClick: () => {
-                    setProfileDropdown(!profileDropdown);
-                    handleToggle();
-                  },
-                },
-                {
-                  name: "Logout",
-                  onClick: () => {
-                    signOut();
-                    setProfileDropdown(!profileDropdown);
-                  },
-                },
-              ]}
-              onClickOutside={(e: Event) => {
-                const target = e.target as HTMLInputElement;
-                if (target.id !== "profile-dropdown") setProfileDropdown(false);
-              }}
-              className="absolute top-11 right-0 z-20 w-36"
-            />
-          ) : null}
-
-          {sidebar ? (
-            <div className="fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
-              <ClickAwayHandler
-                className="h-full"
-                onClickOutside={toggleSidebar}
-              >
-                <div className="slide-right h-full shadow-lg">
-                  <Sidebar />
-                </div>
-              </ClickAwayHandler>
-            </div>
-          ) : null}
+          <ul className="dropdown-content z-[1] menu p-2 shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
+            <li>
+              <Link href="/settings/account" tabIndex={0} role="button">
+                Settings
+              </Link>
+            </li>
+            <li>
+              <div onClick={handleToggle} tabIndex={0} role="button">
+                Switch to {settings.theme === "light" ? "Dark" : "Light"}
+              </div>
+            </li>
+            <li>
+              <div onClick={() => signOut()} tabIndex={0} role="button">
+                Logout
+              </div>
+            </li>
+          </ul>
         </div>
       </div>
+      {sidebar ? (
+        <div className="fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
+          <ClickAwayHandler className="h-full" onClickOutside={toggleSidebar}>
+            <div className="slide-right h-full shadow-lg">
+              <Sidebar />
+            </div>
+          </ClickAwayHandler>
+        </div>
+      ) : null}
       <NewLinkModal
         isOpen={newLinkModalIsOpen}
         onClose={closeNewLinkModal}
diff --git a/components/SortDropdown.tsx b/components/SortDropdown.tsx
index 5f8ac11..4522b30 100644
--- a/components/SortDropdown.tsx
+++ b/components/SortDropdown.tsx
@@ -1,66 +1,131 @@
 import React, { Dispatch, SetStateAction } from "react";
-import ClickAwayHandler from "./ClickAwayHandler";
-import RadioButton from "./RadioButton";
 import { Sort } from "@/types/global";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSort } from "@fortawesome/free-solid-svg-icons";
 
 type Props = {
   sortBy: Sort;
   setSort: Dispatch<SetStateAction<Sort>>;
-
-  toggleSortDropdown: Function;
 };
 
-export default function SortDropdown({
-  sortBy,
-  toggleSortDropdown,
-  setSort,
-}: Props) {
+export default function SortDropdown({ sortBy, setSort }: Props) {
   return (
-    <ClickAwayHandler
-      onClickOutside={(e: Event) => {
-        const target = e.target as HTMLInputElement;
-        if (target.id !== "sort-dropdown") toggleSortDropdown();
-      }}
-      className="absolute top-8 right-0 border border-neutral-content shadow-md bg-base-200 rounded-md p-2 z-20 w-52"
-    >
-      <p className="mb-2 text-center font-semibold">Sort by</p>
-      <div className="flex flex-col gap-2">
-        <RadioButton
-          label="Date (Newest First)"
-          state={sortBy === Sort.DateNewestFirst}
-          onClick={() => setSort(Sort.DateNewestFirst)}
-        />
-
-        <RadioButton
-          label="Date (Oldest First)"
-          state={sortBy === Sort.DateOldestFirst}
-          onClick={() => setSort(Sort.DateOldestFirst)}
-        />
-
-        <RadioButton
-          label="Name (A-Z)"
-          state={sortBy === Sort.NameAZ}
-          onClick={() => setSort(Sort.NameAZ)}
-        />
-
-        <RadioButton
-          label="Name (Z-A)"
-          state={sortBy === Sort.NameZA}
-          onClick={() => setSort(Sort.NameZA)}
-        />
-
-        <RadioButton
-          label="Description (A-Z)"
-          state={sortBy === Sort.DescriptionAZ}
-          onClick={() => setSort(Sort.DescriptionAZ)}
-        />
-
-        <RadioButton
-          label="Description (Z-A)"
-          state={sortBy === Sort.DescriptionZA}
-          onClick={() => setSort(Sort.DescriptionZA)}
+    <div className="dropdown dropdown-bottom dropdown-end">
+      <div
+        tabIndex={0}
+        role="button"
+        className="btn btn-sm btn-square btn-ghost m-1"
+      >
+        <FontAwesomeIcon
+          icon={faSort}
+          id="sort-dropdown"
+          className="w-5 h-5 text-neutral"
         />
       </div>
-    </ClickAwayHandler>
+      <ul className="dropdown-content z-[20] menu p-2 shadow bg-base-200 border border-neutral-content rounded-box w-52">
+        <li>
+          <label
+            className="label cursor-pointer flex justify-start"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="radio"
+              name="sort-radio"
+              className="radio checked:bg-primary"
+              value="Date (Newest First)"
+              checked={sortBy === Sort.DateNewestFirst}
+              onChange={() => setSort(Sort.DateNewestFirst)}
+            />
+            <span className="label-text">Date (Newest First)</span>
+          </label>
+        </li>
+        <li>
+          <label
+            className="label cursor-pointer flex justify-start"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="radio"
+              name="sort-radio"
+              className="radio checked:bg-primary"
+              value="Date (Oldest First)"
+              checked={sortBy === Sort.DateOldestFirst}
+              onChange={() => setSort(Sort.DateOldestFirst)}
+            />
+            <span className="label-text">Date (Oldest First)</span>
+          </label>
+        </li>
+        <li>
+          <label
+            className="label cursor-pointer flex justify-start"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="radio"
+              name="sort-radio"
+              className="radio checked:bg-primary"
+              value="Name (A-Z)"
+              checked={sortBy === Sort.NameAZ}
+              onChange={() => setSort(Sort.NameAZ)}
+            />
+            <span className="label-text">Name (A-Z)</span>
+          </label>
+        </li>
+        <li>
+          <label
+            className="label cursor-pointer flex justify-start"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="radio"
+              name="sort-radio"
+              className="radio checked:bg-primary"
+              value="Name (Z-A)"
+              checked={sortBy === Sort.NameZA}
+              onChange={() => setSort(Sort.NameZA)}
+            />
+            <span className="label-text">Name (Z-A)</span>
+          </label>
+        </li>
+        <li>
+          <label
+            className="label cursor-pointer flex justify-start"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="radio"
+              name="sort-radio"
+              className="radio checked:bg-primary"
+              value="Description (A-Z)"
+              checked={sortBy === Sort.DescriptionAZ}
+              onChange={() => setSort(Sort.DescriptionAZ)}
+            />
+            <span className="label-text">Description (A-Z)</span>
+          </label>
+        </li>
+        <li>
+          <label
+            className="label cursor-pointer flex justify-start"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="radio"
+              name="sort-radio"
+              className="radio checked:bg-primary"
+              value="Description (Z-A)"
+              checked={sortBy === Sort.DescriptionZA}
+              onChange={() => setSort(Sort.DescriptionZA)}
+            />
+            <span className="label-text">Description (Z-A)</span>
+          </label>
+        </li>
+      </ul>
+    </div>
   );
 }
diff --git a/components/ToggleDarkMode.tsx b/components/ToggleDarkMode.tsx
index 58fd950..595ae2a 100644
--- a/components/ToggleDarkMode.tsx
+++ b/components/ToggleDarkMode.tsx
@@ -6,7 +6,7 @@ type Props = {
 };
 
 export default function ToggleDarkMode({ className }: Props) {
-  const { updateSettings } = useLocalSettingsStore();
+  const { settings, updateSettings } = useLocalSettingsStore();
 
   const [theme, setTheme] = useState(localStorage.getItem("theme"));
 
@@ -23,36 +23,41 @@ export default function ToggleDarkMode({ className }: Props) {
   }, [theme]);
 
   return (
-    <label
-      className={`swap swap-rotate btn-square text-neutral btn btn-ghost btn-sm ${className}`}
+    <div
+      className="tooltip tooltip-bottom"
+      data-tip={`Switch to ${settings.theme === "light" ? "Dark" : "Light"}`}
     >
-      <input
-        type="checkbox"
-        onChange={handleToggle}
-        className="theme-controller"
-        checked={localStorage.getItem("theme") === "light" ? false : true}
-      />
-
-      {/* sun icon */}
-
-      <svg
-        className="swap-on fill-current w-5 h-5"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="currentColor"
-        viewBox="0 0 16 16"
+      <label
+        className={`swap swap-rotate btn-square text-neutral btn btn-ghost btn-sm ${className}`}
       >
-        <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
-      </svg>
+        <input
+          type="checkbox"
+          onChange={handleToggle}
+          className="theme-controller"
+          checked={localStorage.getItem("theme") === "light" ? false : true}
+        />
 
-      {/* moon icon */}
-      <svg
-        className="swap-off fill-current w-5 h-5"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="currentColor"
-        viewBox="0 0 16 16"
-      >
-        <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278" />
-      </svg>
-    </label>
+        {/* sun icon */}
+
+        <svg
+          className="swap-on fill-current w-5 h-5"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          viewBox="0 0 16 16"
+        >
+          <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
+        </svg>
+
+        {/* moon icon */}
+        <svg
+          className="swap-off fill-current w-5 h-5"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          viewBox="0 0 16 16"
+        >
+          <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278" />
+        </svg>
+      </label>
+    </div>
   );
 }
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 1ba3da1..3daf937 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -3,11 +3,7 @@ import LinkCard from "@/components/LinkCard";
 import useCollectionStore from "@/store/collections";
 import useLinkStore from "@/store/links";
 import { CollectionIncludingMembersAndLinkCount, Sort } from "@/types/global";
-import {
-  faEllipsis,
-  faFolder,
-  faSort,
-} from "@fortawesome/free-solid-svg-icons";
+import { faEllipsis, faFolder } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
@@ -31,7 +27,6 @@ export default function Index() {
   const { collections } = useCollectionStore();
 
   const [expandDropdown, setExpandDropdown] = useState(false);
-  const [sortDropdown, setSortDropdown] = useState(false);
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
   const [activeCollection, setActiveCollection] =
@@ -124,25 +119,7 @@ export default function Index() {
             <p>{activeCollection?.description}</p>
             <div className="flex items-center gap-2">
               <div className="relative">
-                <div
-                  onClick={() => setSortDropdown(!sortDropdown)}
-                  id="sort-dropdown"
-                  className="btn btn-ghost btn-square btn-sm"
-                >
-                  <FontAwesomeIcon
-                    icon={faSort}
-                    id="sort-dropdown"
-                    className="w-5 h-5 text-neutral"
-                  />
-                </div>
-
-                {sortDropdown ? (
-                  <SortDropdown
-                    sortBy={sortBy}
-                    setSort={setSortBy}
-                    toggleSortDropdown={() => setSortDropdown(!sortDropdown)}
-                  />
-                ) : null}
+                <SortDropdown sortBy={sortBy} setSort={setSortBy} />
               </div>
               <div className="relative">
                 <div
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index 6943c5a..c5018a2 100644
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@@ -3,7 +3,6 @@ import {
   faEllipsis,
   faFolder,
   faPlus,
-  faSort,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import CollectionCard from "@/components/CollectionCard";
@@ -20,7 +19,6 @@ import NewCollectionModal from "@/components/Modals/NewCollectionModal";
 export default function Collections() {
   const { collections } = useCollectionStore();
   const [expandDropdown, setExpandDropdown] = useState(false);
-  const [sortDropdown, setSortDropdown] = useState(false);
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
   const [sortedCollections, setSortedCollections] = useState(collections);
 
@@ -91,25 +89,7 @@ export default function Collections() {
           </div>
 
           <div className="relative mt-2">
-            <div
-              onClick={() => setSortDropdown(!sortDropdown)}
-              id="sort-dropdown"
-              className="btn btn-ghost btn-square btn-sm"
-            >
-              <FontAwesomeIcon
-                icon={faSort}
-                id="sort-dropdown"
-                className="w-5 h-5 text-neutral"
-              />
-            </div>
-
-            {sortDropdown ? (
-              <SortDropdown
-                sortBy={sortBy}
-                setSort={setSortBy}
-                toggleSortDropdown={() => setSortDropdown(!sortDropdown)}
-              />
-            ) : null}
+            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
           </div>
         </div>
 
diff --git a/pages/links/index.tsx b/pages/links/index.tsx
index 8d5157b..6364e40 100644
--- a/pages/links/index.tsx
+++ b/pages/links/index.tsx
@@ -5,14 +5,13 @@ import useLinks from "@/hooks/useLinks";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
 import { Sort } from "@/types/global";
-import { faLink, faSort } from "@fortawesome/free-solid-svg-icons";
+import { faLink } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useState } from "react";
 
 export default function Links() {
   const { links } = useLinkStore();
 
-  const [sortDropdown, setSortDropdown] = useState(false);
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
   useLinks({ sort: sortBy });
@@ -34,25 +33,7 @@ export default function Links() {
           </div>
 
           <div className="relative mt-2">
-            <div
-              onClick={() => setSortDropdown(!sortDropdown)}
-              id="sort-dropdown"
-              className="btn btn-ghost btn-square btn-sm"
-            >
-              <FontAwesomeIcon
-                icon={faSort}
-                id="sort-dropdown"
-                className="w-5 h-5 text-neutral"
-              />
-            </div>
-
-            {sortDropdown ? (
-              <SortDropdown
-                sortBy={sortBy}
-                setSort={setSortBy}
-                toggleSortDropdown={() => setSortDropdown(!sortDropdown)}
-              />
-            ) : null}
+            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
           </div>
         </div>
         {links[0] ? (
diff --git a/pages/links/pinned.tsx b/pages/links/pinned.tsx
index 35e82dd..ac52af2 100644
--- a/pages/links/pinned.tsx
+++ b/pages/links/pinned.tsx
@@ -1,18 +1,16 @@
 import LinkCard from "@/components/LinkCard";
-import NoLinksFound from "@/components/NoLinksFound";
 import SortDropdown from "@/components/SortDropdown";
 import useLinks from "@/hooks/useLinks";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
 import { Sort } from "@/types/global";
-import { faSort, faThumbTack } from "@fortawesome/free-solid-svg-icons";
+import { faThumbTack } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useState } from "react";
 
 export default function PinnedLinks() {
   const { links } = useLinkStore();
 
-  const [sortDropdown, setSortDropdown] = useState(false);
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
   useLinks({ sort: sortBy, pinnedOnly: true });
@@ -34,25 +32,7 @@ export default function PinnedLinks() {
           </div>
 
           <div className="relative mt-2">
-            <div
-              onClick={() => setSortDropdown(!sortDropdown)}
-              id="sort-dropdown"
-              className="btn btn-ghost btn-square btn-sm"
-            >
-              <FontAwesomeIcon
-                icon={faSort}
-                id="sort-dropdown"
-                className="w-5 h-5 text-neutral"
-              />
-            </div>
-
-            {sortDropdown ? (
-              <SortDropdown
-                sortBy={sortBy}
-                setSort={setSortBy}
-                toggleSortDropdown={() => setSortDropdown(!sortDropdown)}
-              />
-            ) : null}
+            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
           </div>
         </div>
         {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
diff --git a/pages/public/collections/[id].tsx b/pages/public/collections/[id].tsx
index 8d4c065..a9ddc1e 100644
--- a/pages/public/collections/[id].tsx
+++ b/pages/public/collections/[id].tsx
@@ -17,7 +17,7 @@ import Image from "next/image";
 import Link from "next/link";
 import PublicSearchBar from "@/components/PublicPage/PublicSearchBar";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFilter, faSort } from "@fortawesome/free-solid-svg-icons";
+import { faFilter } from "@fortawesome/free-solid-svg-icons";
 import FilterSearchDropdown from "@/components/FilterSearchDropdown";
 import SortDropdown from "@/components/SortDropdown";
 import useLocalSettingsStore from "@/store/localSettings";
@@ -66,7 +66,6 @@ export default function PublicCollections() {
   });
 
   const [filterDropdown, setFilterDropdown] = useState(false);
-  const [sortDropdown, setSortDropdown] = useState(false);
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
   useLinks({
@@ -129,13 +128,14 @@ export default function PublicCollections() {
           </p>
           <div className="flex gap-2 items-center mt-8 min-w-fit">
             <ToggleDarkMode />
+
             <Link href="https://linkwarden.app/" target="_blank">
               <Image
                 src={`/icon.png`}
                 width={551}
                 height={551}
                 alt="Linkwarden"
-                title="Linkwarden"
+                title="Created with Linkwarden"
                 className="h-8 w-fit mx-auto rounded"
               />
             </Link>
@@ -230,25 +230,7 @@ export default function PublicCollections() {
               </div>
 
               <div className="relative">
-                <div
-                  onClick={() => setSortDropdown(!sortDropdown)}
-                  id="sort-dropdown"
-                  className="btn btn-ghost btn-square btn-sm"
-                >
-                  <FontAwesomeIcon
-                    icon={faSort}
-                    id="sort-dropdown"
-                    className="w-5 h-5 text-neutral"
-                  />
-                </div>
-
-                {sortDropdown ? (
-                  <SortDropdown
-                    sortBy={sortBy}
-                    setSort={setSortBy}
-                    toggleSortDropdown={() => setSortDropdown(!sortDropdown)}
-                  />
-                ) : null}
+                <SortDropdown sortBy={sortBy} setSort={setSortBy} />
               </div>
             </div>
           </div>
diff --git a/pages/search.tsx b/pages/search.tsx
index 34da3c6..058d4ed 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -24,7 +24,6 @@ export default function Search() {
   });
 
   const [filterDropdown, setFilterDropdown] = useState(false);
-  const [sortDropdown, setSortDropdown] = useState(false);
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
   useLinks({
@@ -77,25 +76,7 @@ export default function Search() {
             </div>
 
             <div className="relative">
-              <div
-                onClick={() => setSortDropdown(!sortDropdown)}
-                id="sort-dropdown"
-                className="btn btn-ghost btn-square btn-sm"
-              >
-                <FontAwesomeIcon
-                  icon={faSort}
-                  id="sort-dropdown"
-                  className="w-5 h-5 text-neutral"
-                />
-              </div>
-
-              {sortDropdown ? (
-                <SortDropdown
-                  sortBy={sortBy}
-                  setSort={setSortBy}
-                  toggleSortDropdown={() => setSortDropdown(!sortDropdown)}
-                />
-              ) : null}
+              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
             </div>
           </div>
         </div>
diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx
index 0ad9a71..528bb16 100644
--- a/pages/tags/[id].tsx
+++ b/pages/tags/[id].tsx
@@ -4,7 +4,6 @@ import {
   faCheck,
   faEllipsis,
   faHashtag,
-  faSort,
   faXmark,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -24,7 +23,6 @@ export default function Index() {
   const { links } = useLinkStore();
   const { tags, updateTag, removeTag } = useTagStore();
 
-  const [sortDropdown, setSortDropdown] = useState(false);
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
   const [expandDropdown, setExpandDropdown] = useState(false);
@@ -194,25 +192,7 @@ export default function Index() {
           </div>
 
           <div className="relative">
-            <div
-              onClick={() => setSortDropdown(!sortDropdown)}
-              id="sort-dropdown"
-              className="btn btn-ghost btn-square btn-sm"
-            >
-              <FontAwesomeIcon
-                icon={faSort}
-                id="sort-dropdown"
-                className="w-5 h-5 text-neutral"
-              />
-            </div>
-
-            {sortDropdown ? (
-              <SortDropdown
-                sortBy={sortBy}
-                setSort={setSortBy}
-                toggleSortDropdown={() => setSortDropdown(!sortDropdown)}
-              />
-            ) : null}
+            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
           </div>
         </div>
         <div className="grid grid-cols-1 2xl:grid-cols-3 xl:grid-cols-2 gap-5">