implemented list view in other components as well

pages/search.tsx

@@ -4,11 +4,15 @@ 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 { Sort, ViewMode } from "@/types/global";
 import { faFilter, faSearch, faSort } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRouter } from "next/router";
 import { useState } from "react";
+import ViewDropdown from "@/components/ViewDropdown";
+import DefaultView from "@/components/LinkViews/DefaultView";
+import GridView from "@/components/LinkViews/GridView";
+import ListView from "@/components/LinkViews/ListView";
 
 export default function Search() {
   const { links } = useLinkStore();
@@ -24,6 +28,10 @@ export default function Search() {
   });
 
   const [filterDropdown, setFilterDropdown] = useState(false);
+
+  const [viewMode, setViewMode] = useState<string>(
+    localStorage.getItem("viewMode") || ViewMode.Default
+  );
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
   useLinks({
@@ -36,15 +44,24 @@ export default function Search() {
     searchByTags: searchFilter.tags,
   });
 
+  const linkView = {
+    [ViewMode.Default]: DefaultView,
+    // [ViewMode.Grid]: GridView,
+    [ViewMode.List]: ListView,
+  };
+
+  // @ts-ignore
+  const LinkComponent = linkView[viewMode];
+
   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">
+          <div className="flex gap-3 items-center">
+            <div className="flex items-center gap-2">
               <FontAwesomeIcon
                 icon={faSearch}
-                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-primary drop-shadow"
+                className="sm:w-8 sm:h-8 w-8 h-8 text-primary drop-shadow"
               />
               <p className="sm:text-4xl text-3xl capitalize font-thin">
                 Search Results
@@ -52,25 +69,17 @@ export default function Search() {
             </div>
           </div>
 
-          <div className="flex gap-2 items-center">
-            <div className="relative">
-              <FilterSearchDropdown
-                searchFilter={searchFilter}
-                setSearchFilter={setSearchFilter}
-              />
-            </div>
-
-            <div className="relative">
-              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
-            </div>
+          <div className="flex gap-2 items-center mt-2">
+            <FilterSearchDropdown
+              searchFilter={searchFilter}
+              setSearchFilter={setSearchFilter}
+            />
+            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
         </div>
         {links[0] ? (
-          <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5">
-            {links.map((e, i) => {
-              return <LinkCard key={i} link={e} count={i} />;
-            })}
-          </div>
+          <LinkComponent links={links} />
         ) : (
           <p>
             Nothing found.{" "}