From 2fd21c8219157910f9682f44500ea6c2bc1e3af7 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Thu, 30 Nov 2023 06:55:37 -0500
Subject: [PATCH] redesigned link collection page

---
 pages/collections/[id].tsx | 242 ++++++++++++++++++++-----------------
 1 file changed, 128 insertions(+), 114 deletions(-)

diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 2c6b2ab..7330b32 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -73,34 +73,34 @@ export default function Index() {
 
   return (
     <MainLayout>
-      <div className="p-5 flex flex-col gap-5 w-full h-full">
-        <div
-          style={{
-            backgroundImage: `linear-gradient(-45deg, ${
-              activeCollection?.color
-            }30 10%, ${
-              settings.theme === "dark" ? "#262626" : "#f3f4f6"
-            } 50%, ${settings.theme === "dark" ? "#262626" : "#f9fafb"} 100%)`,
-          }}
-          className="border border-solid border-neutral-content rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between"
-        >
-          <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>
+      <div
+        style={{
+          backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${
+            settings.theme === "dark" ? "#262626" : "#f3f4f6"
+          } 50%, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
+        }}
+        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>
-            )}
+            </div>
+          )}
+        </div>
 
-            {activeCollection ? (
+        {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={() =>
@@ -141,101 +141,115 @@ export default function Index() {
                   </div>
                 ) : null}
               </div>
-            ) : undefined}
+              <p className="text-neutral text-xs">
+                By {collectionOwner.name}
+                {activeCollection.members.length > 0
+                  ? ` and ${activeCollection.members.length} others`
+                  : undefined}
+                .
+              </p>
+            </div>
           </div>
+        ) : undefined}
 
-          <div className="flex justify-between items-end gap-5">
-            <p>{activeCollection?.description}</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 p-1 shadow bg-base-200 border border-neutral-content rounded-xl w-44 mt-1">
-                    {permissions === true ? (
-                      <li>
-                        <div
-                          className="px-2 py-1 rounded-lg"
-                          role="button"
-                          tabIndex={0}
-                          onClick={() => {
-                            (document?.activeElement as HTMLElement)?.blur();
-                            activeCollection &&
-                              setModal({
-                                modal: "COLLECTION",
-                                state: true,
-                                method: "UPDATE",
-                                isOwner: permissions === true,
-                                active: activeCollection,
-                              });
-                          }}
-                        >
-                          Edit Collection Info
-                        </div>
-                      </li>
-                    ) : undefined}
-                    <li>
-                      <div
-                        className="px-2 py-1 rounded-lg"
-                        role="button"
-                        tabIndex={0}
-                        onClick={() => {
-                          (document?.activeElement as HTMLElement)?.blur();
-                          activeCollection &&
-                            setModal({
-                              modal: "COLLECTION",
-                              state: true,
-                              method: "UPDATE",
-                              isOwner: permissions === true,
-                              active: activeCollection,
-                              defaultIndex: permissions === true ? 1 : 0,
-                            });
-                        }}
-                      >
-                        {permissions === true
-                          ? "Share and Collaborate"
-                          : "View Team"}
-                      </div>
-                    </li>
-                    <li>
-                      <div
-                        className="px-2 py-1 rounded-lg"
-                        role="button"
-                        tabIndex={0}
-                        onClick={() => {
-                          (document?.activeElement as HTMLElement)?.blur();
-                          activeCollection &&
-                            setModal({
-                              modal: "COLLECTION",
-                              state: true,
-                              method: "UPDATE",
-                              isOwner: permissions === true,
-                              active: activeCollection,
-                              defaultIndex: permissions === true ? 2 : 1,
-                            });
-                        }}
-                      >
-                        {permissions === true
-                          ? "Delete Collection"
-                          : "Leave Collection"}
-                      </div>
-                    </li>
-                  </ul>
+        {activeCollection?.description ? (
+          <p>{activeCollection?.description}</p>
+        ) : undefined}
+
+        <hr className="border-1 border-neutral" />
+
+        <div className="flex justify-between items-end gap-5">
+          <p>Listing {activeCollection?._count?.links} Bookmarks</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 p-1 shadow bg-base-200 border border-neutral-content rounded-xl w-44 mt-1">
+                  {permissions === true ? (
+                    <li>
+                      <div
+                        className="px-2 py-1 rounded-lg"
+                        role="button"
+                        tabIndex={0}
+                        onClick={() => {
+                          (document?.activeElement as HTMLElement)?.blur();
+                          activeCollection &&
+                            setModal({
+                              modal: "COLLECTION",
+                              state: true,
+                              method: "UPDATE",
+                              isOwner: permissions === true,
+                              active: activeCollection,
+                            });
+                        }}
+                      >
+                        Edit Collection Info
+                      </div>
+                    </li>
+                  ) : undefined}
+                  <li>
+                    <div
+                      className="px-2 py-1 rounded-lg"
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => {
+                        (document?.activeElement as HTMLElement)?.blur();
+                        activeCollection &&
+                          setModal({
+                            modal: "COLLECTION",
+                            state: true,
+                            method: "UPDATE",
+                            isOwner: permissions === true,
+                            active: activeCollection,
+                            defaultIndex: permissions === true ? 1 : 0,
+                          });
+                      }}
+                    >
+                      {permissions === true
+                        ? "Share and Collaborate"
+                        : "View Team"}
+                    </div>
+                  </li>
+                  <li>
+                    <div
+                      className="px-2 py-1 rounded-lg"
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => {
+                        (document?.activeElement as HTMLElement)?.blur();
+                        activeCollection &&
+                          setModal({
+                            modal: "COLLECTION",
+                            state: true,
+                            method: "UPDATE",
+                            isOwner: permissions === true,
+                            active: activeCollection,
+                            defaultIndex: permissions === true ? 2 : 1,
+                          });
+                      }}
+                    >
+                      {permissions === true
+                        ? "Delete Collection"
+                        : "Leave Collection"}
+                    </div>
+                  </li>
+                </ul>
               </div>
             </div>
           </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