added dashboard + sorting functionality done partially

components/CollectionCard.tsx

@@ -5,10 +5,12 @@
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
-import { Collection } from "@prisma/client";
 import Link from "next/link";
+import { ExtendedCollection } from "@/types/global";
+import useLinkStore from "@/store/links";
 
-export default function ({ collection }: { collection: Collection }) {
+export default function ({ collection }: { collection: ExtendedCollection }) {
+  const { links } = useLinkStore();
   const formattedDate = new Date(collection.createdAt).toLocaleString("en-US", {
     year: "numeric",
     month: "short",
@@ -17,20 +19,37 @@ export default function ({ collection }: { collection: Collection }) {
 
   return (
     <Link href={`/collections/${collection.id}`}>
-      <div className="p-5 bg-gray-100 h-40 w-60 rounded-md border-sky-100 border-solid border flex flex-col justify-between cursor-pointer hover:bg-gray-50 duration-100">
+      <div className="p-5 bg-gray-100 min-h-[10rem] w-72 rounded-md border-sky-100 border-solid border flex flex-col gap-2 justify-between cursor-pointer hover:bg-gray-50 duration-100">
         <div>
           <div className="flex justify-between text-sky-900 items-center">
-            <p className="text-lg w-max">{collection.name}</p>
+            <p className="text-lg w-max font-bold">{collection.name}</p>
             <FontAwesomeIcon
               icon={faChevronRight}
               className="w-3 h-3 text-gray-500"
             />
           </div>
-          <p className="text-sm font-bold text-gray-500">
-            {collection.description}
+          <p className="text-sky-400">{collection.description}</p>
+        </div>
+        <div className="text-sky-400 flex gap-1 flex-wrap">
+          <p>Members:</p>
+          {collection.members.map((e, i) => {
+            return (
+              <p
+                className="text-sky-500 font-semibold"
+                title={e.user.email}
+                key={i}
+              >
+                {e.user.name}
+              </p>
+            );
+          })}
+        </div>
+        <div className="flex gap-2 items-baseline">
+          <p className="text-sky-300 font-bold text-sm">{formattedDate}</p>
+          <p className="text-sky-500 font-bold">
+            {links.filter((e) => e.collectionId === collection.id).length} Links
           </p>
         </div>
-        <p className="text-sm text-sky-300 font-bold">{formattedDate}</p>
       </div>
     </Link>
   );