implemented list view in other components as well

pages/links/index.tsx

@@ -23,14 +23,14 @@ export default function Links() {
 
   useLinks({ sort: sortBy });
 
-  const components = {
+  const linkView = {
     [ViewMode.Default]: DefaultView,
     // [ViewMode.Grid]: GridView,
     [ViewMode.List]: ListView,
   };
 
   // @ts-ignore
-  const Component = components[viewMode];
+  const LinkComponent = linkView[viewMode];
 
   return (
     <MainLayout>
@@ -39,22 +39,22 @@ export default function Links() {
           <div className="flex items-center gap-3">
             <FontAwesomeIcon
               icon={faLink}
-              className="sm:w-10 sm:h-10 w-6 h-6 text-primary drop-shadow"
+              className="sm:w-10 sm:h-10 w-8 h-8 text-primary drop-shadow"
             />
             <div>
               <p className="text-3xl capitalize font-thin">All Links</p>
 
-              <p>Links from every Collections</p>
+              <p className="sm:text-sm text-xs">Links from every Collections</p>
             </div>
           </div>
 
-          <div className="flex items-center mt-2">
+          <div className="flex gap-2 items-center mt-2">
             <SortDropdown sortBy={sortBy} setSort={setSortBy} />
             <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
         </div>
         {links[0] ? (
-          <Component links={links} />
+          <LinkComponent links={links} />
         ) : (
           <NoLinksFound text="You Haven't Created Any Links Yet" />
         )}

pages/links/pinned.tsx

@@ -3,18 +3,34 @@ 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 { faThumbTack } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 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 PinnedLinks() {
   const { links } = useLinkStore();
 
+  const [viewMode, setViewMode] = useState<string>(
+    localStorage.getItem("viewMode") || ViewMode.Default
+  );
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
   useLinks({ sort: sortBy, pinnedOnly: true });
 
+  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 h-full">
@@ -22,25 +38,24 @@ export default function PinnedLinks() {
           <div className="flex items-center gap-3">
             <FontAwesomeIcon
               icon={faThumbTack}
-              className="sm:w-10 sm:h-10 w-6 h-6 text-primary drop-shadow"
+              className="sm:w-10 sm:h-10 w-8 h-8 text-primary drop-shadow"
             />
             <div>
               <p className="text-3xl capitalize font-thin">Pinned Links</p>
 
-              <p>Pinned Links from your Collections</p>
+              <p className="sm:text-sm text-xs">
+                Pinned Links from your Collections
+              </p>
             </div>
           </div>
 
-          <div className="relative mt-2">
+          <div className="flex gap-2 items-center mt-2">
             <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
         </div>
         {links.some((e) => e.pinnedBy && e.pinnedBy[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} />
         ) : (
           <div
             style={{ flex: "1 1 auto" }}