implemented list view in other components as well

2023-12-17 01:25:46 -05:00 · 2023-12-17 01:25:46 -05:00 · c5b083e802
parent 4d691e0cce
commit c5b083e802
13 changed files with 237 additions and 190 deletions
--- a/components/LinkViews/LinkComponents/LinkActions.tsx
+++ b/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"
--- a/components/LinkViews/LinkComponents/LinkCard.tsx
+++ b/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">
--- a/components/LinkViews/LinkComponents/LinkCardGrid.tsx
+++ b/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">
--- a/components/LinkViews/LinkComponents/LinkIcon.tsx
+++ b/components/LinkViews/LinkComponents/LinkIcon.tsx
@ -6,18 +6,18 @@ 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;

  const iconClasses: string =
    "bg-white text-primary shadow rounded-md border-[2px] border-white select-none z-10" +
-      " " +
-      className || "";
+    " " +
+    (width || "w-12");

  return (
    <div>
--- a/components/LinkViews/LinkComponents/LinkRow.tsx
+++ b/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>
--- a/components/ViewDropdown.tsx
+++ b/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>
  );
 }
--- a/pages/collections/[id].tsx
+++ b/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,22 +107,78 @@ 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-2">
-                <FontAwesomeIcon
-                  icon={faFolder}
-                  style={{ color: activeCollection?.color }}
-                  className="sm:w-8 sm:h-8 w-6 h-6 mt-3 drop-shadow"
-                />
-                <p className="sm:text-4xl text-3xl capitalize w-full py-1 break-words hyphens-auto font-thin">
-                  {activeCollection?.name}
-                </p>
-              </div>
+        {activeCollection && (
+          <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-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 className="dropdown dropdown-bottom dropdown-end">
+              <div
+                tabIndex={0}
+                role="button"
+                className="btn btn-ghost btn-sm btn-square text-neutral"
+              >
+                <FontAwesomeIcon
+                  icon={faEllipsis}
+                  title="More"
+                  className="w-5 h-5"
+                />
+              </div>
+              <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
+                {permissions === true ? (
+                  <li>
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => {
+                        (document?.activeElement as HTMLElement)?.blur();
+                        setEditCollectionModal(true);
+                      }}
+                    >
+                      Edit Collection Info
+                    </div>
+                  </li>
+                ) : undefined}
+                <li>
+                  <div
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => {
+                      (document?.activeElement as HTMLElement)?.blur();
+                      setEditCollectionSharingModal(true);
+                    }}
+                  >
+                    {permissions === true
+                      ? "Share and Collaborate"
+                      : "View Team"}
+                  </div>
+                </li>
+                <li>
+                  <div
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => {
+                      (document?.activeElement as HTMLElement)?.blur();
+                      setDeleteCollectionModal(true);
+                    }}
+                  >
+                    {permissions === true
+                      ? "Delete Collection"
+                      : "Leave Collection"}
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        )}

        {activeCollection ? (
          <div className={`min-w-[15rem]`}>
@ -158,76 +235,16 @@ export default function Index() {
          <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}
-                  role="button"
-                  className="btn btn-ghost btn-sm btn-square text-neutral"
-                >
-                  <FontAwesomeIcon
-                    icon={faEllipsis}
-                    title="More"
-                    className="w-5 h-5"
-                  />
-                </div>
-                <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
-                  {permissions === true ? (
-                    <li>
-                      <div
-                        role="button"
-                        tabIndex={0}
-                        onClick={() => {
-                          (document?.activeElement as HTMLElement)?.blur();
-                          setEditCollectionModal(true);
-                        }}
-                      >
-                        Edit Collection Info
-                      </div>
-                    </li>
-                  ) : undefined}
-                  <li>
-                    <div
-                      role="button"
-                      tabIndex={0}
-                      onClick={() => {
-                        (document?.activeElement as HTMLElement)?.blur();
-                        setEditCollectionSharingModal(true);
-                      }}
-                    >
-                      {permissions === true
-                        ? "Share and Collaborate"
-                        : "View Team"}
-                    </div>
-                  </li>
-                  <li>
-                    <div
-                      role="button"
-                      tabIndex={0}
-                      onClick={() => {
-                        (document?.activeElement as HTMLElement)?.blur();
-                        setDeleteCollectionModal(true);
-                      }}
-                    >
-                      {permissions === true
-                        ? "Delete Collection"
-                        : "Leave Collection"}
-                    </div>
-                  </li>
-                </ul>
-              </div>
-            </div>
+            <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">
-            {links
-              .filter((e) => e.collection.id === activeCollection?.id)
-              .map((e, i) => {
-                return <LinkCard key={i} link={e} count={i} />;
-              })}
-          </div>
+          <LinkComponent
+            links={links.filter(
+              (e) => e.collection.id === activeCollection?.id
+            )}
+          />
        ) : (
          <NoLinksFound />
        )}
--- a/pages/collections/index.tsx
+++ b/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>

--- a/pages/dashboard.tsx
+++ b/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>

--- a/pages/links/index.tsx
+++ b/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" />
        )}
--- a/pages/links/pinned.tsx
+++ b/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" }}
--- a/pages/search.tsx
+++ b/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.{" "}
--- a/pages/tags/[id].tsx
+++ b/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">
-          {links
-            .filter((e) => e.tags.some((e) => e.id === Number(router.query.id)))
-            .map((e, i) => {
-              return <LinkCard key={i} link={e} count={i} />;
-            })}
-        </div>
+        <LinkComponent
+          links={links.filter((e) =>
+            e.tags.some((e) => e.id === Number(router.query.id))
+          )}
+        />
      </div>
    </MainLayout>
  );