many visual changes and improvements

pages/api/avatar/[id].ts

@@ -46,7 +46,6 @@ export default async function (req: NextApiRequest, res: NextApiResponse) {
     `data/uploads/avatar/${queryId}.jpg`
   );
 
-  console.log(filePath);
   const file = fs.existsSync(filePath)
     ? fs.readFileSync(filePath)
     : "File not found.";

pages/collections/index.tsx

@@ -85,7 +85,7 @@ export default function () {
             <div className="flex gap-2">
               <FontAwesomeIcon
                 icon={faBox}
-                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-300"
+                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500"
               />
               <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">
                 All Collections
@@ -218,7 +218,7 @@ export default function () {
             activeCollection={{
               name: "",
               description: "",
-              color: "#7dd3fc",
+              color: "#0ea5e9",
               isPublic: false,
               ownerId: session.data?.user.id as number,
               members: [],

pages/dashboard.tsx

@@ -39,7 +39,7 @@ export default function () {
           <div className="flex gap-2">
             <FontAwesomeIcon
               icon={faChartSimple}
-              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-300"
+              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500"
             />
             <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">
               Dashboard

pages/links.tsx

@@ -55,7 +55,7 @@ export default function Links() {
           <div className="flex gap-2">
             <FontAwesomeIcon
               icon={faBookmark}
-              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-300"
+              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500"
             />
             <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">
               All Links

pages/search/[query].tsx

@@ -1,7 +1,5 @@
-import Checkbox from "@/components/Checkbox";
-import ClickAwayHandler from "@/components/ClickAwayHandler";
+import FilterSearchDropdown from "@/components/FilterSearchDropdown";
 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";
@@ -17,8 +15,7 @@ export default function Links() {
   const [sortDropdown, setSortDropdown] = useState(false);
   const [sortBy, setSortBy] = useState("Name (A-Z)");
   const [sortedLinks, setSortedLinks] = useState(links);
-  const { searchSettings, toggleCheckbox, setSearchSettings, setSearchQuery } =
-    useSearchSettingsStore();
+  const { searchSettings, toggleCheckbox } = useSearchSettingsStore();
 
   const handleSortChange = (event: ChangeEvent<HTMLInputElement>) => {
     setSortBy(event.target.value);
@@ -93,45 +90,11 @@ export default function Links() {
               </div>
 
               {filterDropdown ? (
-                <ClickAwayHandler
-                  onClickOutside={(e: Event) => {
-                    const target = e.target as HTMLInputElement;
-                    if (target.id !== "filter-dropdown")
-                      setFilterDropdown(false);
-                  }}
-                  className="absolute top-8 right-0 shadow-md bg-gray-50 rounded-md p-2 z-20 border border-sky-100 w-40"
-                >
-                  <p className="mb-2 text-sky-900 text-center font-semibold">
-                    Filter by
-                  </p>
-                  <div className="flex flex-col gap-2">
-                    <Checkbox
-                      label="Name"
-                      state={searchSettings.filter.name}
-                      onClick={() => toggleCheckbox("name")}
-                    />
-                    <Checkbox
-                      label="Link"
-                      state={searchSettings.filter.url}
-                      onClick={() => toggleCheckbox("url")}
-                    />
-                    <Checkbox
-                      label="Title"
-                      state={searchSettings.filter.title}
-                      onClick={() => toggleCheckbox("title")}
-                    />
-                    <Checkbox
-                      label="Collection"
-                      state={searchSettings.filter.collection}
-                      onClick={() => toggleCheckbox("collection")}
-                    />
-                    <Checkbox
-                      label="Tags"
-                      state={searchSettings.filter.tags}
-                      onClick={() => toggleCheckbox("tags")}
-                    />
-                  </div>
-                </ClickAwayHandler>
+                <FilterSearchDropdown
+                  setFilterDropdown={setFilterDropdown}
+                  searchSettings={searchSettings}
+                  toggleCheckbox={toggleCheckbox}
+                />
               ) : null}
             </div>
 

pages/search/index.tsx

@@ -0,0 +1,146 @@
+import FilterSearchDropdown from "@/components/FilterSearchDropdown";
+import LinkList from "@/components/LinkList";
+import SortLinkDropdown from "@/components/SortLinkDropdown";
+import MainLayout from "@/layouts/MainLayout";
+import useLinkStore from "@/store/links";
+import useSearchSettingsStore from "@/store/search";
+import { faFilter, faSearch, faSort } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ChangeEvent, useEffect, useState } from "react";
+
+export default function Links() {
+  const { links } = useLinkStore();
+
+  const [filterDropdown, setFilterDropdown] = useState(false);
+  const [sortDropdown, setSortDropdown] = useState(false);
+  const [sortBy, setSortBy] = useState("Name (A-Z)");
+  const [sortedLinks, setSortedLinks] = useState(links);
+  const { searchSettings, toggleCheckbox } = useSearchSettingsStore();
+
+  const handleSortChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setSortBy(event.target.value);
+  };
+
+  const { name, url, title, collection, tags } = searchSettings.filter;
+
+  useEffect(() => {
+    const linksArray = [
+      ...links.filter((link) => {
+        const query = searchSettings.query.toLowerCase();
+
+        if (
+          (name && link.name.toLowerCase().includes(query)) ||
+          (url && link.url.toLowerCase().includes(query)) ||
+          (title && link.title.toLowerCase().includes(query)) ||
+          (collection && link.collection.name.toLowerCase().includes(query)) ||
+          (tags &&
+            link.tags.some((tag) => tag.name.toLowerCase().includes(query)))
+        )
+          return true;
+      }),
+    ];
+
+    if (sortBy === "Name (A-Z)")
+      setSortedLinks(linksArray.sort((a, b) => a.name.localeCompare(b.name)));
+    else if (sortBy === "Title (A-Z)")
+      setSortedLinks(linksArray.sort((a, b) => a.title.localeCompare(b.title)));
+    else if (sortBy === "Name (Z-A)")
+      setSortedLinks(linksArray.sort((a, b) => b.name.localeCompare(a.name)));
+    else if (sortBy === "Title (Z-A)")
+      setSortedLinks(linksArray.sort((a, b) => b.title.localeCompare(a.title)));
+    else if (sortBy === "Date (Newest First)")
+      setSortedLinks(
+        linksArray.sort(
+          (a, b) =>
+            new Date(b.createdAt as string).getTime() -
+            new Date(a.createdAt as string).getTime()
+        )
+      );
+    else if (sortBy === "Date (Oldest First)")
+      setSortedLinks(
+        linksArray.sort(
+          (a, b) =>
+            new Date(a.createdAt as string).getTime() -
+            new Date(b.createdAt as string).getTime()
+        )
+      );
+  }, [searchSettings, links, sortBy]);
+
+  return (
+    <MainLayout>
+      <div className="p-5 flex flex-col gap-5 w-full">
+        <div className="flex gap-3 items-center justify-between">
+          <div className="flex gap-3 items-center mb-5">
+            <div className="flex gap-2">
+              <FontAwesomeIcon
+                icon={faSearch}
+                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500"
+              />
+              <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">
+                Search Results
+              </p>
+            </div>
+          </div>
+
+          <div className="flex gap-3 items-center">
+            <div className="relative">
+              <div
+                onClick={() => setFilterDropdown(!filterDropdown)}
+                id="filter-dropdown"
+                className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
+              >
+                <FontAwesomeIcon
+                  icon={faFilter}
+                  id="filter-dropdown"
+                  className="w-5 h-5 text-gray-500"
+                />
+              </div>
+
+              {filterDropdown ? (
+                <FilterSearchDropdown
+                  setFilterDropdown={setFilterDropdown}
+                  searchSettings={searchSettings}
+                  toggleCheckbox={toggleCheckbox}
+                />
+              ) : null}
+            </div>
+
+            <div className="relative">
+              <div
+                onClick={() => setSortDropdown(!sortDropdown)}
+                id="sort-dropdown"
+                className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
+              >
+                <FontAwesomeIcon
+                  icon={faSort}
+                  id="sort-dropdown"
+                  className="w-5 h-5 text-gray-500"
+                />
+              </div>
+
+              {sortDropdown ? (
+                <SortLinkDropdown
+                  handleSortChange={handleSortChange}
+                  sortBy={sortBy}
+                  toggleSortDropdown={() => setSortDropdown(!sortDropdown)}
+                />
+              ) : null}
+            </div>
+          </div>
+        </div>
+        {sortedLinks[0] ? (
+          sortedLinks.map((e, i) => {
+            return <LinkList key={i} link={e} count={i} />;
+          })
+        ) : (
+          <p className="text-sky-900">
+            Nothing found.{" "}
+            <span className="text-sky-500 font-bold text-xl" title="Shruggie">
+              ¯\_(ツ)_/¯
+            </span>
+          </p>
+        )}
+      </div>
+    </MainLayout>
+  );
+}

pages/tags/[id].tsx

@@ -71,7 +71,7 @@ export default function () {
             <div className="flex gap-2">
               <FontAwesomeIcon
                 icon={faHashtag}
-                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-300"
+                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500"
               />
               <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">
                 {activeTag?.name}