implemented list view in other components as well

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -16,9 +16,11 @@ import useAccountStore from "@/store/account";
 export default function LinkActions({
   link,
   collection,
+  position,
 }: {
   link: LinkIncludingShortenedCollectionAndTags;
   collection: CollectionIncludingMembersAndLinkCount;
+  position?: string;
 }) {
   const permissions = usePermissions(link.collection.id as number);
 
@@ -62,7 +64,11 @@ export default function LinkActions({
       {permissions === true ||
       permissions?.canUpdate ||
       permissions?.canDelete ? (
-        <div className="dropdown dropdown-left absolute top-3 right-3 z-20">
+        <div
+          className={`dropdown dropdown-left absolute ${
+            position || "top-3 right-3"
+          } z-20`}
+        >
           <div
             tabIndex={0}
             role="button"

components/LinkViews/LinkComponents/LinkCard.tsx

@@ -62,7 +62,7 @@ export default function LinkCard({ link, count, className }: Props) {
         className="flex flex-col justify-between cursor-pointer h-full w-full gap-1 p-3"
       >
         <div className="absolute bottom-3 right-3">
-          <LinkIcon link={link} className="w-12" />
+          <LinkIcon link={link} />
         </div>
 
         <div className="flex items-baseline gap-1">

components/LinkViews/LinkComponents/LinkCardGrid.tsx

@@ -53,7 +53,7 @@ export default function LinkCardGrid({ link, count, className }: Props) {
         className="flex items-center cursor-pointer p-3"
       >
         <div className="shrink-0">
-          <LinkIcon link={link} className="w-12" />
+          <LinkIcon link={link} width="w-12" />
         </div>
 
         <div className="w-[calc(100%-56px)] ml-2">

components/LinkViews/LinkComponents/LinkIcon.tsx

@@ -6,10 +6,10 @@ import isValidUrl from "@/lib/shared/isValidUrl";
 
 export default function LinkIcon({
   link,
-  className,
+  width,
 }: {
   link: LinkIncludingShortenedCollectionAndTags;
-  className?: string;
+  width?: string;
 }) {
   const url =
     isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
@@ -17,7 +17,7 @@ export default function LinkIcon({
   const iconClasses: string =
     "bg-white text-primary shadow rounded-md border-[2px] border-white select-none z-10" +
     " " +
-      className || "";
+    (width || "w-12");
 
   return (
     <div>

components/LinkViews/LinkComponents/LinkRow.tsx

@@ -47,13 +47,13 @@ export default function LinkCardCompact({ link, count, className }: Props) {
 
   return (
     <>
-      <div className="border-neutral-content relative hover:bg-base-200 duration-200 rounded-lg">
+      <div className="border-neutral-content relative hover:bg-base-300 duration-200 rounded-lg">
         <div
           onClick={() => link.url && window.open(link.url || "", "_blank")}
-          className="flex items-center cursor-pointer p-3"
+          className="flex items-center cursor-pointer py-3 sm:px-3"
         >
           <div className="shrink-0">
-            <LinkIcon link={link} className="sm:w-12 w-8" />
+            <LinkIcon link={link} width="sm:w-12 w-8" />
           </div>
 
           <div className="w-[calc(100%-56px)] ml-2">
@@ -79,7 +79,11 @@ export default function LinkCardCompact({ link, count, className }: Props) {
           </div>
         </div>
 
-        <LinkActions link={link} collection={collection} />
+        <LinkActions
+          link={link}
+          collection={collection}
+          position="top-3 right-0 sm:right-3"
+        />
       </div>
 
       <div className="divider my-0 last:hidden h-[1px]"></div>

components/ViewDropdown.tsx

@@ -23,7 +23,7 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
   }, [viewMode]);
 
   return (
-    <div className="p-1 flex flex-row gap-0.5 border border-neutral-content rounded-md">
+    <div className="p-1 flex flex-row gap-1 border border-neutral-content rounded-[0.625rem]">
       <button
         onClick={(e) => onChangeViewMode(e, ViewMode.Default)}
         className={`p-2 rounded-md ${
@@ -38,20 +38,7 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
           <path d="M10.93,14.44v5.45a1.38,1.38,0,0,1-1.37,1.37H4.11a1.38,1.38,0,0,1-1.37-1.37V14.44a1.38,1.38,0,0,1,1.37-1.37H9.56A1.38,1.38,0,0,1,10.93,14.44ZM9.56,2.74H4.11A1.38,1.38,0,0,0,2.74,4.11V9.56a1.38,1.38,0,0,0,1.37,1.37H9.56a1.38,1.38,0,0,0,1.37-1.37V4.11A1.38,1.38,0,0,0,9.56,2.74Zm11.7,17.15V14.44a1.38,1.38,0,0,0-1.37-1.37H14.44a1.38,1.38,0,0,0-1.37,1.37v5.45a1.38,1.38,0,0,0,1.37,1.37h5.45A1.38,1.38,0,0,0,21.26,19.89Zm0-10.33V4.11a1.38,1.38,0,0,0-1.37-1.37H14.44a1.38,1.38,0,0,0-1.37,1.37V9.56a1.38,1.38,0,0,0,1.37,1.37h5.45A1.38,1.38,0,0,0,21.26,9.56Z" />
         </svg>
       </button>
-      {/* <button
+
-        onClick={(e) => onChangeViewMode(e, ViewMode.Grid)}
-        className={`p-2 rounded-md ${
-          viewMode == ViewMode.Grid ? "bg-primary/20" : "hover:bg-neutral/20"
-        }`}
-      >
-        <svg
-          className="w-4 h-4 text-neutral"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-        >
-          <path d="M14.34,11V13A1.37,1.37,0,0,1,13,14.34H11A1.37,1.37,0,0,1,9.66,13V11A1.37,1.37,0,0,1,11,9.66H13A1.37,1.37,0,0,1,14.34,11ZM13,2.74H11A1.37,1.37,0,0,0,9.66,4.11V6.06A1.37,1.37,0,0,0,11,7.43H13a1.37,1.37,0,0,0,1.37-1.37V4.11A1.37,1.37,0,0,0,13,2.74ZM21.26,13V11a1.37,1.37,0,0,0-1.37-1.37H17.94A1.37,1.37,0,0,0,16.57,11V13a1.37,1.37,0,0,0,1.37,1.37h1.95A1.37,1.37,0,0,0,21.26,13ZM11,21.26H13a1.37,1.37,0,0,0,1.37-1.37V17.94A1.37,1.37,0,0,0,13,16.57H11a1.37,1.37,0,0,0-1.37,1.37v1.95A1.37,1.37,0,0,0,11,21.26ZM2.74,11V13a1.37,1.37,0,0,0,1.37,1.37H6.06A1.37,1.37,0,0,0,7.43,13V11A1.37,1.37,0,0,0,6.06,9.66H4.11A1.37,1.37,0,0,0,2.74,11Zm18.52-5V4.11a1.38,1.38,0,0,0-1.37-1.37H17.94a1.38,1.38,0,0,0-1.37,1.37V6.06a1.38,1.38,0,0,0,1.37,1.37h1.95A1.38,1.38,0,0,0,21.26,6.06ZM2.74,4.11V6.06A1.38,1.38,0,0,0,4.11,7.43H6.06A1.38,1.38,0,0,0,7.43,6.06V4.11A1.38,1.38,0,0,0,6.06,2.74H4.11A1.38,1.38,0,0,0,2.74,4.11ZM21.26,19.89V17.94a1.38,1.38,0,0,0-1.37-1.37H17.94a1.38,1.38,0,0,0-1.37,1.37v1.95a1.38,1.38,0,0,0,1.37,1.37h1.95A1.38,1.38,0,0,0,21.26,19.89ZM2.74,17.94v1.95a1.38,1.38,0,0,0,1.37,1.37H6.06a1.38,1.38,0,0,0,1.37-1.37V17.94a1.38,1.38,0,0,0-1.37-1.37H4.11A1.38,1.38,0,0,0,2.74,17.94Z" />
-        </svg>
-      </button> */}
       <button
         onClick={(e) => onChangeViewMode(e, ViewMode.List)}
         className={`p-2 rounded-md ${
@@ -66,6 +53,21 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
           <path d="M5.36,5A1.76,1.76,0,1,1,3.6,3.26,1.76,1.76,0,0,1,5.36,5ZM20.78,3.48H8.6A1.37,1.37,0,0,0,7.22,4.85v.33A1.37,1.37,0,0,0,8.6,6.55H20.78a1.37,1.37,0,0,0,1.37-1.37V4.85A1.37,1.37,0,0,0,20.78,3.48ZM3.6,10.24A1.76,1.76,0,1,0,5.36,12,1.75,1.75,0,0,0,3.6,10.24Zm17.18.22H8.6a1.38,1.38,0,0,0-1.38,1.37v.34A1.38,1.38,0,0,0,8.6,13.54H20.78a1.37,1.37,0,0,0,1.37-1.37v-.34A1.37,1.37,0,0,0,20.78,10.46ZM3.6,17.23A1.76,1.76,0,1,0,5.36,19,1.75,1.75,0,0,0,3.6,17.23Zm17.18.22H8.6a1.37,1.37,0,0,0-1.38,1.37v.33A1.37,1.37,0,0,0,8.6,20.52H20.78a1.37,1.37,0,0,0,1.37-1.37v-.33A1.37,1.37,0,0,0,20.78,17.45Z" />
         </svg>
       </button>
+
+      {/* <button
+        onClick={(e) => onChangeViewMode(e, ViewMode.Grid)}
+        className={`p-2 rounded-md ${
+          viewMode == ViewMode.Grid ? "bg-primary/20" : "hover:bg-neutral/20"
+        }`}
+      >
+        <svg
+          className="w-4 h-4 text-neutral"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+        >
+          <path d="M14.34,11V13A1.37,1.37,0,0,1,13,14.34H11A1.37,1.37,0,0,1,9.66,13V11A1.37,1.37,0,0,1,11,9.66H13A1.37,1.37,0,0,1,14.34,11ZM13,2.74H11A1.37,1.37,0,0,0,9.66,4.11V6.06A1.37,1.37,0,0,0,11,7.43H13a1.37,1.37,0,0,0,1.37-1.37V4.11A1.37,1.37,0,0,0,13,2.74ZM21.26,13V11a1.37,1.37,0,0,0-1.37-1.37H17.94A1.37,1.37,0,0,0,16.57,11V13a1.37,1.37,0,0,0,1.37,1.37h1.95A1.37,1.37,0,0,0,21.26,13ZM11,21.26H13a1.37,1.37,0,0,0,1.37-1.37V17.94A1.37,1.37,0,0,0,13,16.57H11a1.37,1.37,0,0,0-1.37,1.37v1.95A1.37,1.37,0,0,0,11,21.26ZM2.74,11V13a1.37,1.37,0,0,0,1.37,1.37H6.06A1.37,1.37,0,0,0,7.43,13V11A1.37,1.37,0,0,0,6.06,9.66H4.11A1.37,1.37,0,0,0,2.74,11Zm18.52-5V4.11a1.38,1.38,0,0,0-1.37-1.37H17.94a1.38,1.38,0,0,0-1.37,1.37V6.06a1.38,1.38,0,0,0,1.37,1.37h1.95A1.38,1.38,0,0,0,21.26,6.06ZM2.74,4.11V6.06A1.38,1.38,0,0,0,4.11,7.43H6.06A1.38,1.38,0,0,0,7.43,6.06V4.11A1.38,1.38,0,0,0,6.06,2.74H4.11A1.38,1.38,0,0,0,2.74,4.11ZM21.26,19.89V17.94a1.38,1.38,0,0,0-1.37-1.37H17.94a1.38,1.38,0,0,0-1.37,1.37v1.95a1.38,1.38,0,0,0,1.37,1.37h1.95A1.38,1.38,0,0,0,21.26,19.89ZM2.74,17.94v1.95a1.38,1.38,0,0,0,1.37,1.37H6.06a1.38,1.38,0,0,0,1.37-1.37V17.94a1.38,1.38,0,0,0-1.37-1.37H4.11A1.38,1.38,0,0,0,2.74,17.94Z" />
+        </svg>
+      </button> */}
     </div>
   );
 }

pages/collections/[id].tsx

@@ -1,7 +1,11 @@
 import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
 import useCollectionStore from "@/store/collections";
 import useLinkStore from "@/store/links";
-import { CollectionIncludingMembersAndLinkCount, Sort } from "@/types/global";
+import {
+  CollectionIncludingMembersAndLinkCount,
+  Sort,
+  ViewMode,
+} from "@/types/global";
 import { faEllipsis, faFolder } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRouter } from "next/router";
@@ -18,6 +22,10 @@ import getPublicUserData from "@/lib/client/getPublicUserData";
 import EditCollectionModal from "@/components/ModalContent/EditCollectionModal";
 import EditCollectionSharingModal from "@/components/ModalContent/EditCollectionSharingModal";
 import DeleteCollectionModal from "@/components/ModalContent/DeleteCollectionModal";
+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 Index() {
   const { settings } = useLocalSettingsStore();
@@ -76,6 +84,19 @@ export default function Index() {
     useState(false);
   const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
 
+  const [viewMode, setViewMode] = useState<string>(
+    localStorage.getItem("viewMode") || ViewMode.Default
+  );
+
+  const linkView = {
+    [ViewMode.Default]: DefaultView,
+    // [ViewMode.Grid]: GridView,
+    [ViewMode.List]: ListView,
+  };
+
+  // @ts-ignore
+  const LinkComponent = linkView[viewMode];
+
   return (
     <MainLayout>
       <div
@@ -86,79 +107,19 @@ export default function Index() {
         }}
         className="h-full p-5 flex gap-3 flex-col"
       >
-        <div className="flex flex-col sm:flex-row gap-3 justify-between sm:items-start">
         {activeCollection && (
-            <div className="flex gap-3 items-center">
+          <div className="flex gap-3 items-start justify-between">
             <div className="flex gap-2">
               <FontAwesomeIcon
                 icon={faFolder}
                 style={{ color: activeCollection?.color }}
-                  className="sm:w-8 sm:h-8 w-6 h-6 mt-3 drop-shadow"
+                className="sm:w-8 sm:h-8 w-8 h-8 mt-2 drop-shadow"
               />
               <p className="sm:text-4xl text-3xl capitalize w-full py-1 break-words hyphens-auto font-thin">
                 {activeCollection?.name}
               </p>
             </div>
-            </div>
-          )}
-        </div>
 
-        {activeCollection ? (
-          <div className={`min-w-[15rem]`}>
-            <div className="flex gap-1 justify-center sm:justify-end items-center w-fit">
-              <div
-                className="flex items-center btn px-2 btn-ghost rounded-full w-fit"
-                onClick={() => setEditCollectionSharingModal(true)}
-              >
-                {collectionOwner.id ? (
-                  <ProfilePhoto
-                    src={collectionOwner.image || undefined}
-                    name={collectionOwner.name}
-                  />
-                ) : undefined}
-                {activeCollection.members
-                  .sort((a, b) => (a.userId as number) - (b.userId as number))
-                  .map((e, i) => {
-                    return (
-                      <ProfilePhoto
-                        key={i}
-                        src={e.user.image ? e.user.image : undefined}
-                        className="-ml-3"
-                        name={e.user.name}
-                      />
-                    );
-                  })
-                  .slice(0, 3)}
-                {activeCollection.members.length - 3 > 0 ? (
-                  <div className={`avatar drop-shadow-md placeholder -ml-3`}>
-                    <div className="bg-base-100 text-neutral rounded-full w-8 h-8 ring-2 ring-neutral-content">
-                      <span>+{activeCollection.members.length - 3}</span>
-                    </div>
-                  </div>
-                ) : null}
-              </div>
-              <p className="text-neutral text-sm font-semibold">
-                By {collectionOwner.name}
-                {activeCollection.members.length > 0
-                  ? ` and ${activeCollection.members.length} others`
-                  : undefined}
-                .
-              </p>
-            </div>
-          </div>
-        ) : undefined}
-
-        {activeCollection?.description ? (
-          <p>{activeCollection?.description}</p>
-        ) : undefined}
-
-        <div className="divider my-0"></div>
-
-        <div className="flex justify-between items-end gap-5">
-          <p>Showing {activeCollection?._count?.links} results</p>
-          <div className="flex items-center gap-2">
-            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
-            <div className="relative">
             <div className="dropdown dropdown-bottom dropdown-end">
               <div
                 tabIndex={0}
@@ -217,17 +178,73 @@ export default function Index() {
               </ul>
             </div>
           </div>
+        )}
+
+        {activeCollection ? (
+          <div className={`min-w-[15rem]`}>
+            <div className="flex gap-1 justify-center sm:justify-end items-center w-fit">
+              <div
+                className="flex items-center btn px-2 btn-ghost rounded-full w-fit"
+                onClick={() => setEditCollectionSharingModal(true)}
+              >
+                {collectionOwner.id ? (
+                  <ProfilePhoto
+                    src={collectionOwner.image || undefined}
+                    name={collectionOwner.name}
+                  />
+                ) : undefined}
+                {activeCollection.members
+                  .sort((a, b) => (a.userId as number) - (b.userId as number))
+                  .map((e, i) => {
+                    return (
+                      <ProfilePhoto
+                        key={i}
+                        src={e.user.image ? e.user.image : undefined}
+                        className="-ml-3"
+                        name={e.user.name}
+                      />
+                    );
+                  })
+                  .slice(0, 3)}
+                {activeCollection.members.length - 3 > 0 ? (
+                  <div className={`avatar drop-shadow-md placeholder -ml-3`}>
+                    <div className="bg-base-100 text-neutral rounded-full w-8 h-8 ring-2 ring-neutral-content">
+                      <span>+{activeCollection.members.length - 3}</span>
+                    </div>
+                  </div>
+                ) : null}
+              </div>
+              <p className="text-neutral text-sm font-semibold">
+                By {collectionOwner.name}
+                {activeCollection.members.length > 0
+                  ? ` and ${activeCollection.members.length} others`
+                  : undefined}
+                .
+              </p>
+            </div>
+          </div>
+        ) : undefined}
+
+        {activeCollection?.description ? (
+          <p>{activeCollection?.description}</p>
+        ) : undefined}
+
+        <div className="divider my-0"></div>
+
+        <div className="flex justify-between items-end gap-5">
+          <p>Showing {activeCollection?._count?.links} results</p>
+          <div className="flex items-center gap-2">
+            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
         </div>
 
         {links.some((e) => e.collectionId === Number(router.query.id)) ? (
-          <div className="grid grid-cols-1 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
+          <LinkComponent
-            {links
+            links={links.filter(
-              .filter((e) => e.collection.id === activeCollection?.id)
+              (e) => e.collection.id === activeCollection?.id
-              .map((e, i) => {
+            )}
-                return <LinkCard key={i} link={e} count={i} />;
+          />
-              })}
-          </div>
         ) : (
           <NoLinksFound />
         )}

pages/collections/index.tsx

@@ -34,14 +34,14 @@ export default function Collections() {
             <div className="flex items-center gap-3">
               <FontAwesomeIcon
                 icon={faFolder}
-                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">
                   Your Collections
                 </p>
 
-                <p>Collections you own</p>
+                <p className="sm:text-sm text-xs">Collections you own</p>
               </div>
             </div>
           </div>
@@ -75,14 +75,16 @@ export default function Collections() {
             <div className="flex items-center gap-3 my-5">
               <FontAwesomeIcon
                 icon={faFolder}
-                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">
                   Other Collections
                 </p>
 
-                <p>Shared collections you&apos;re a member of</p>
+                <p className="sm:text-sm text-xs">
+                  Shared collections you&apos;re a member of
+                </p>
               </div>
             </div>
 

pages/dashboard.tsx

@@ -108,12 +108,12 @@ export default function Dashboard() {
         <div className="flex items-center gap-3">
           <FontAwesomeIcon
             icon={faChartSimple}
-            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">Dashboard</p>
 
-            <p>A brief overview of your data</p>
+            <p className="sm:text-sm text-xs">A brief overview of your data</p>
           </div>
         </div>
 

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">
+          <LinkComponent links={links} />
-            {links.map((e, i) => {
-              return <LinkCard key={i} link={e} count={i} />;
-            })}
-          </div>
         ) : (
           <div
             style={{ flex: "1 1 auto" }}

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-3 items-center">
-            <div className="flex gap-2">
+            <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="flex gap-2 items-center mt-2">
-            <div className="relative">
             <FilterSearchDropdown
               searchFilter={searchFilter}
               setSearchFilter={setSearchFilter}
             />
-            </div>
-
-            <div className="relative">
             <SortDropdown sortBy={sortBy} setSort={setSortBy} />
-            </div>
+            <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">
+          <LinkComponent links={links} />
-            {links.map((e, i) => {
-              return <LinkCard key={i} link={e} count={i} />;
-            })}
-          </div>
         ) : (
           <p>
             Nothing found.{" "}

pages/tags/[id].tsx

@@ -12,10 +12,13 @@ import { FormEvent, useEffect, useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
 import useTagStore from "@/store/tags";
 import SortDropdown from "@/components/SortDropdown";
-import { Sort, TagIncludingLinkCount } from "@/types/global";
+import { Sort, TagIncludingLinkCount, ViewMode } from "@/types/global";
 import useLinks from "@/hooks/useLinks";
-import Dropdown from "@/components/Dropdown";
 import { toast } from "react-hot-toast";
+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 Index() {
   const router = useRouter();
@@ -25,8 +28,6 @@ export default function Index() {
 
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
-  const [expandDropdown, setExpandDropdown] = useState(false);
-
   const [renameTag, setRenameTag] = useState(false);
   const [newTagName, setNewTagName] = useState<string>();
 
@@ -97,6 +98,19 @@ export default function Index() {
     setRenameTag(false);
   };
 
+  const [viewMode, setViewMode] = useState<string>(
+    localStorage.getItem("viewMode") || ViewMode.Default
+  );
+
+  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">
@@ -105,7 +119,7 @@ export default function Index() {
             <div className="flex gap-2 items-end font-thin">
               <FontAwesomeIcon
                 icon={faHashtag}
-                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-primary"
+                className="sm:w-8 sm:h-8 w-8 h-8 mt-2 text-primary"
               />
               {renameTag ? (
                 <>
@@ -147,7 +161,13 @@ export default function Index() {
                     {activeTag?.name}
                   </p>
                   <div className="relative">
-                    <div className="dropdown dropdown-bottom font-normal">
+                    <div
+                      className={`dropdown dropdown-bottom font-normal ${
+                        activeTag?.name.length && activeTag?.name.length > 8
+                          ? "dropdown-end"
+                          : ""
+                      }`}
+                    >
                       <div
                         tabIndex={0}
                         role="button"
@@ -186,50 +206,22 @@ export default function Index() {
                         </li>
                       </ul>
                     </div>
-
-                    {expandDropdown ? (
-                      <Dropdown
-                        items={[
-                          {
-                            name: "Rename Tag",
-                            onClick: () => {
-                              setRenameTag(true);
-                              setExpandDropdown(false);
-                            },
-                          },
-                          {
-                            name: "Remove Tag",
-                            onClick: () => {
-                              remove();
-                              setExpandDropdown(false);
-                            },
-                          },
-                        ]}
-                        onClickOutside={(e: Event) => {
-                          const target = e.target as HTMLInputElement;
-                          if (target.id !== "expand-dropdown")
-                            setExpandDropdown(false);
-                        }}
-                        className="absolute top-8 left-0 w-36 font-normal"
-                      />
-                    ) : null}
                   </div>
                 </>
               )}
             </div>
           </div>
 
-          <div className="relative">
+          <div className="flex gap-2 items-center mt-2">
             <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
         </div>
-        <div className="grid grid-cols-1 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
+        <LinkComponent
-          {links
+          links={links.filter((e) =>
-            .filter((e) => e.tags.some((e) => e.id === Number(router.query.id)))
+            e.tags.some((e) => e.id === Number(router.query.id))
-            .map((e, i) => {
+          )}
-              return <LinkCard key={i} link={e} count={i} />;
+        />
-            })}
-        </div>
       </div>
     </MainLayout>
   );