improved UI

pages/search.tsx

@@ -2,6 +2,7 @@ import Checkbox from "@/components/Checkbox";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 import LinkList from "@/components/LinkList";
 import RadioButton from "@/components/RadioButton";
+import SortLinkDropdown from "@/components/SortLinkDropdown";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
 import useSearchSettingsStore from "@/store/search";
@@ -148,54 +149,11 @@ export default function Links() {
               </div>
 
               {sortDropdown ? (
-                <ClickAwayHandler
-                  onClickOutside={(e: Event) => {
-                    const target = e.target as HTMLInputElement;
-                    if (target.id !== "sort-dropdown") setSortDropdown(false);
-                  }}
-                  className="absolute top-8 right-0 shadow-md bg-gray-50 rounded-md p-2 z-10 border border-sky-100 w-48"
-                >
-                  <p className="mb-2 text-sky-900 text-center font-semibold">
-                    Sort by
-                  </p>
-                  <div className="flex flex-col gap-2">
-                    <RadioButton
-                      label="Name (A-Z)"
-                      state={sortBy === "Name (A-Z)"}
-                      onClick={handleSortChange}
-                    />
-
-                    <RadioButton
-                      label="Name (Z-A)"
-                      state={sortBy === "Name (Z-A)"}
-                      onClick={handleSortChange}
-                    />
-
-                    <RadioButton
-                      label="Title (A-Z)"
-                      state={sortBy === "Title (A-Z)"}
-                      onClick={handleSortChange}
-                    />
-
-                    <RadioButton
-                      label="Title (Z-A)"
-                      state={sortBy === "Title (Z-A)"}
-                      onClick={handleSortChange}
-                    />
-
-                    <RadioButton
-                      label="Date (Newest First)"
-                      state={sortBy === "Date (Newest First)"}
-                      onClick={handleSortChange}
-                    />
-
-                    <RadioButton
-                      label="Date (Oldest First)"
-                      state={sortBy === "Date (Oldest First)"}
-                      onClick={handleSortChange}
-                    />
-                  </div>
-                </ClickAwayHandler>
+                <SortLinkDropdown
+                  handleSortChange={handleSortChange}
+                  sortBy={sortBy}
+                  toggleSortDropdown={() => setSortDropdown(!sortDropdown)}
+                />
               ) : null}
             </div>
           </div>