added cursor based pagination for links

components/LinkCard.tsx

@@ -1,6 +1,6 @@
 import {
   CollectionIncludingMembers,
-  LinkIncludingCollectionAndTags,
+  LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
 import {
   faFolder,
@@ -20,7 +20,7 @@ import useAccountStore from "@/store/account";
 import useModalStore from "@/store/modals";
 
 type Props = {
-  link: LinkIncludingCollectionAndTags;
+  link: LinkIncludingShortenedCollectionAndTags;
   count: number;
   className?: string;
 };
@@ -146,7 +146,7 @@ export default function LinkCard({ link, count, className }: Props) {
                 className="group/url"
               >
                 <div className="text-sky-400 font-bold flex items-center gap-1">
-                  <p className="truncate max-w-[10rem]">{url.host}</p>
+                  <p className="truncate max-w-[12rem]">{url.host}</p>
                   <FontAwesomeIcon
                     icon={faArrowUpRightFromSquare}
                     className="w-3 opacity-0 group-hover/url:opacity-100 duration-75"

components/Modal/LinkModal.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import CollectionSelection from "@/components/InputSelect/CollectionSelection";
 import TagSelection from "@/components/InputSelect/TagSelection";
-import { LinkIncludingCollectionAndTags } from "@/types/global";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
 import useLinkStore from "@/store/links";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
@@ -15,12 +15,12 @@ type Props =
   | {
       toggleLinkModal: Function;
       method: "CREATE";
-      activeLink?: LinkIncludingCollectionAndTags;
+      activeLink?: LinkIncludingShortenedCollectionAndTags;
     }
   | {
       toggleLinkModal: Function;
       method: "UPDATE";
-      activeLink: LinkIncludingCollectionAndTags;
+      activeLink: LinkIncludingShortenedCollectionAndTags;
     };
 
 export default function EditLink({
@@ -30,7 +30,7 @@ export default function EditLink({
 }: Props) {
   const { data } = useSession();
 
-  const [link, setLink] = useState<LinkIncludingCollectionAndTags>(
+  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>(
     method === "UPDATE"
       ? activeLink
       : {

components/ModalManagement.tsx

@@ -4,7 +4,7 @@ import LinkModal from "./Modal/LinkModal";
 import {
   AccountSettings,
   CollectionIncludingMembers,
-  LinkIncludingCollectionAndTags,
+  LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
 import CollectionModal from "./Modal/Collection";
 import UserModal from "./Modal/User";
@@ -22,7 +22,7 @@ export default function ModalManagement() {
         <LinkModal
           toggleLinkModal={toggleModal}
           method={modal.method}
-          activeLink={modal.active as LinkIncludingCollectionAndTags}
+          activeLink={modal.active as LinkIncludingShortenedCollectionAndTags}
         />
       </Modal>
     );

components/PublicPage/LinkCard.tsx

@@ -4,10 +4,14 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Image from "next/image";
-import { Link as LinkType } from "@prisma/client";
+import { Link as LinkType, Tag } from "@prisma/client";
+
+interface LinksIncludingTags extends LinkType {
+  tags: Tag[];
+}
 
 type Props = {
-  link: LinkType;
+  link: LinksIncludingTags;
   count: number;
 };
 
@@ -58,7 +62,18 @@ export default function LinkCard({ link, count }: Props) {
             <p className="text-gray-500 text-sm font-medium">
               {link.description}
             </p>
-
+            <div className="flex gap-3 items-center flex-wrap my-3">
+              <div className="flex gap-1 items-center flex-wrap mt-1">
+                {link.tags.map((e, i) => (
+                  <p
+                    key={i}
+                    className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer truncate max-w-[10rem]"
+                  >
+                    {e.name}
+                  </p>
+                ))}
+              </div>
+            </div>
             <div className="flex gap-2 items-center flex-wrap mt-2">
               <p className="text-gray-500">{formattedDate}</p>
               <div className="text-sky-400 font-bold flex items-center gap-1">

components/SortDropdown.tsx

@@ -25,6 +25,18 @@ export default function SortDropdown({
     >
       <p className="mb-2 text-sky-900 text-center font-semibold">Sort by</p>
       <div className="flex flex-col gap-2">
+        <RadioButton
+          label="Date (Newest First)"
+          state={sortBy === Sort.DateNewestFirst}
+          onClick={() => setSort(Sort.DateNewestFirst)}
+        />
+
+        <RadioButton
+          label="Date (Oldest First)"
+          state={sortBy === Sort.DateOldestFirst}
+          onClick={() => setSort(Sort.DateOldestFirst)}
+        />
+
         <RadioButton
           label="Name (A-Z)"
           state={sortBy === Sort.NameAZ}
@@ -48,18 +60,6 @@ export default function SortDropdown({
           state={sortBy === Sort.DescriptionZA}
           onClick={() => setSort(Sort.DescriptionZA)}
         />
-
-        <RadioButton
-          label="Date (Newest First)"
-          state={sortBy === Sort.DateNewestFirst}
-          onClick={() => setSort(Sort.DateNewestFirst)}
-        />
-
-        <RadioButton
-          label="Date (Oldest First)"
-          state={sortBy === Sort.DateOldestFirst}
-          onClick={() => setSort(Sort.DateOldestFirst)}
-        />
       </div>
     </ClickAwayHandler>
   );