WIP

pages/collections/[id].tsx

@@ -102,24 +102,24 @@ export default function Index() {
       <div className="p-5 flex flex-col gap-5 w-full">
         <div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-xl 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 items-center sm:items-start">
-            {activeCollection ? (
+            {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-2 drop-shadow"
+                    className="sm:w-8 sm:h-8 w-6 h-6 mt-3 drop-shadow"
                   />
-                  <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">
+                  <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold py-1">
                     {activeCollection?.name}
                   </p>
                 </div>
               </div>
-            ) : null}
+            )}
 
             {activeCollection ? (
               <div
-                className={`text-sky-400 w-60 ${
+                className={`text-sky-400 min-w-[15rem] ${
                   activeCollection.members[0] && "mr-3"
                 }`}
               >

pages/collections/index.tsx

@@ -191,7 +191,7 @@ export default function Collections() {
           </div>
         </div>
 
-        <div className="grid 2xl:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 gap-5">
+        <div className="grid 2xl:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
           {sortedCollections.map((e, i) => {
             return <CollectionCard key={i} collection={e} />;
           })}

pages/dashboard.tsx

@@ -1,5 +1,8 @@
 import useCollectionStore from "@/store/collections";
-import { faArrowRight, faChartSimple } from "@fortawesome/free-solid-svg-icons";
+import {
+  faChartSimple,
+  faChevronDown,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
@@ -7,6 +10,7 @@ import useTagStore from "@/store/tags";
 import LinkCard from "@/components/LinkCard";
 import Link from "next/link";
 import CollectionCard from "@/components/CollectionCard";
+import { Disclosure, Transition } from "@headlessui/react";
 import { useEffect, useState } from "react";
 
 export default function Dashboard() {
@@ -14,22 +18,42 @@ export default function Dashboard() {
   const { links } = useLinkStore();
   const { tags } = useTagStore();
 
-  const [sortedCollections, setSortedCollections] = useState([]);
+  const [tagPinDisclosure, setTagPinDisclosure] = useState<boolean>(() => {
+    const storedValue = localStorage.getItem("tagPinDisclosure");
+    return storedValue ? storedValue === "true" : true;
+  });
 
-  useEffect(() => {
-    const collectionsWithLinkCount = collections.map((collection) => {
-      const linkCount = links.filter(
-        (link) => link.collectionId === collection.id
-      ).length;
-      return { ...collection, linkCount };
+  const [collectionPinDisclosure, setCollectionPinDisclosure] =
+    useState<boolean>(() => {
+      const storedValue = localStorage.getItem("collectionPinDisclosure");
+      return storedValue ? storedValue === "true" : true;
     });
 
-    setSortedCollections(
-      collectionsWithLinkCount.sort((a, b) => b.linkCount - a.linkCount) as any
-    );
+  const [linkPinDisclosure, setLinkPinDisclosure] = useState<boolean>(() => {
+    const storedValue = localStorage.getItem("linkPinDisclosure");
+    return storedValue ? storedValue === "true" : true;
+  });
 
-    // console.log(links.length);
-  }, [collections, links]);
+  useEffect(() => {
+    localStorage.setItem(
+      "tagPinDisclosure",
+      tagPinDisclosure ? "true" : "false"
+    );
+  }, [tagPinDisclosure]);
+
+  useEffect(() => {
+    localStorage.setItem(
+      "collectionPinDisclosure",
+      collectionPinDisclosure ? "true" : "false"
+    );
+  }, [collectionPinDisclosure]);
+
+  useEffect(() => {
+    localStorage.setItem(
+      "linkPinDisclosure",
+      linkPinDisclosure ? "true" : "false"
+    );
+  }, [linkPinDisclosure]);
 
   return (
     // ml-80
@@ -47,9 +71,11 @@ export default function Dashboard() {
           </div>
         </div>
 
-        <div className="flex flex-col md:flex-row md:items-center justify-evenly gap-2 mb-10 bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent">
+        <div className="flex flex-col md:flex-row md:items-center justify-evenly gap-2 mb-10">
           <div className="flex items-baseline gap-2">
-            <p className="font-bold text-6xl">{links.length}</p>
+            <p className="font-bold text-6xl bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent">
+              {links.length}
+            </p>
             <p className="text-sky-900 text-xl">
               Links
               {/* {links.length == 1 ? "Links" : "Link"} */}
@@ -57,73 +83,141 @@ export default function Dashboard() {
           </div>
 
           <div className="flex items-baseline gap-2">
-            <p className="font-bold text-6xl">{collections.length}</p>
+            <p className="font-bold text-6xl bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent">
+              {collections.length}
+            </p>
             <p className="text-sky-900 text-xl">Collections</p>
           </div>
 
           <div className="flex items-baseline gap-2">
-            <p className="font-bold text-6xl">{tags.length}</p>
+            <p className="font-bold text-6xl bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent">
+              {tags.length}
+            </p>
             <p className="text-sky-900 text-xl">Tags</p>
           </div>
         </div>
 
-        <div className="flex flex-col 2xl:flex-row items-start justify-evenly gap-5">
-          <div className="flex flex-col gap-5 p-2 w-full">
-            <div className="flex justify-between gap-2 items-baseline">
-              <p className="text-sky-600 text-xl mb-2">Recently added Links</p>
-              <Link href="/links">
-                <div className="text-sky-600 flex items-center gap-1 hover:border-b-sky-500 duration-100 hover:border-b">
-                  View All
+        {/* <hr className="my-5 border-sky-100" /> */}
+        <br />
+
+        <div className="flex flex-col 2xl:flex-row items-start justify-evenly 2xl:gap-2">
+          <Disclosure defaultOpen={linkPinDisclosure}>
+            <div className="flex flex-col gap-5 p-2 w-full">
+              <Disclosure.Button
+                onClick={() => {
+                  setLinkPinDisclosure(!linkPinDisclosure);
+                }}
+                className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
+              >
+                <p className="text-sky-600 text-xl">Pinned Links</p>
+
+                <div className="text-sky-600 flex items-center gap-2">
+                  {linkPinDisclosure ? "Hide" : "Show"}
                   <FontAwesomeIcon
-                    icon={faArrowRight}
-                    className="w-4 h-4 text-sky-300"
+                    icon={faChevronDown}
+                    className={`w-4 h-4 text-sky-300 ${
+                      linkPinDisclosure ? "rotate-reverse" : "rotate"
+                    }`}
                   />
                 </div>
-              </Link>
-            </div>
-            {links
-              .sort(
-                (a, b) =>
-                  new Date(b.createdAt as string).getTime() -
-                  new Date(a.createdAt as string).getTime()
-              )
-              .slice(0, 5)
-              .map((e, i) => (
-                <LinkCard key={i} link={e} count={i} />
-              ))}
-          </div>
+              </Disclosure.Button>
 
-          <div className="flex flex-col gap-5 p-2 w-full">
-            <div className="flex justify-between gap-2 items-baseline">
-              <p className="text-sky-600 text-xl mb-2">Top Collections</p>
-              <Link href="/collections">
-                <div className="text-sky-600 flex items-center gap-1 hover:border-b-sky-500 duration-100 hover:border-b">
-                  View All
+              <Transition
+                enter="transition duration-100 ease-out"
+                enterFrom="transform opacity-0 -translate-y-3"
+                enterTo="transform opacity-100 translate-y-0"
+                leave="transition duration-100 ease-out"
+                leaveFrom="transform opacity-100 translate-y-0"
+                leaveTo="transform opacity-0 -translate-y-3"
+              >
+                <Disclosure.Panel className="flex flex-col gap-5 w-full">
+                  {links.slice(0, 5).map((e, i) => (
+                    <LinkCard key={i} link={e} count={i} />
+                  ))}
+                </Disclosure.Panel>
+              </Transition>
+            </div>
+          </Disclosure>
+
+          <Disclosure defaultOpen={collectionPinDisclosure}>
+            <div className="flex flex-col gap-5 p-2 w-full">
+              <Disclosure.Button
+                onClick={() => {
+                  setCollectionPinDisclosure(!collectionPinDisclosure);
+                }}
+                className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
+              >
+                <p className="text-sky-600 text-xl">Pinned Collections</p>
+
+                <div className="text-sky-600 flex items-center gap-2">
+                  {collectionPinDisclosure ? "Hide" : "Show"}
                   <FontAwesomeIcon
-                    icon={faArrowRight}
-                    className="w-4 h-4 text-sky-300"
+                    icon={faChevronDown}
+                    className={`w-4 h-4 text-sky-300 ${
+                      collectionPinDisclosure ? "rotate-reverse" : "rotate"
+                    }`}
                   />
                 </div>
-              </Link>
+              </Disclosure.Button>
+              <Transition
+                enter="transition duration-100 ease-out"
+                enterFrom="transform opacity-0 -translate-y-3"
+                enterTo="transform opacity-100 translate-y-0"
+                leave="transition duration-100 ease-out"
+                leaveFrom="transform opacity-100 translate-y-0"
+                leaveTo="transform opacity-0 -translate-y-3"
+              >
+                <Disclosure.Panel className="flex flex-col gap-5 w-full">
+                  {collections.slice(0, 5).map((e, i) => (
+                    <CollectionCard key={i} collection={e} />
+                  ))}
+                </Disclosure.Panel>
+              </Transition>
             </div>
-            {sortedCollections.map((e, i) => (
-              <CollectionCard key={i} collection={e} />
-            ))}
-          </div>
+          </Disclosure>
 
-          <div className="flex flex-col gap-5 p-2 w-full">
-            <div className="flex gap-2 flex-wrap">
-              {tags.slice(0, 19).map((e, i) => (
-                <Link
-                  href={`/tags/${e.id}`}
-                  key={i}
-                  className="px-2 py-1 bg-sky-200 rounded-full hover:bg-sky-100 duration-100 text-sky-700"
-                >
-                  # {e.name}
-                </Link>
-              ))}
+          <Disclosure defaultOpen={tagPinDisclosure}>
+            <div className="flex flex-col gap-5 p-2 w-full">
+              <Disclosure.Button
+                onClick={() => {
+                  setTagPinDisclosure(!tagPinDisclosure);
+                }}
+                className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
+              >
+                <p className="text-sky-600 text-xl">Pinned Tags</p>
+
+                <div className="text-sky-600 flex items-center gap-2">
+                  {tagPinDisclosure ? "Hide" : "Show"}
+                  <FontAwesomeIcon
+                    icon={faChevronDown}
+                    className={`w-4 h-4 text-sky-300 ${
+                      tagPinDisclosure ? "rotate-reverse" : "rotate"
+                    }`}
+                  />
+                </div>
+              </Disclosure.Button>
+              <Transition
+                enter="transition duration-100 ease-out"
+                enterFrom="transform opacity-0 -translate-y-3"
+                enterTo="transform opacity-100 translate-y-0"
+                leave="transition duration-100 ease-out"
+                leaveFrom="transform opacity-100 translate-y-0"
+                leaveTo="transform opacity-0 -translate-y-3"
+              >
+                <Disclosure.Panel className="flex gap-2 flex-wrap">
+                  {tags.slice(0, 19).map((e, i) => (
+                    <Link
+                      href={`/tags/${e.id}`}
+                      key={i}
+                      className="px-2 py-1 bg-sky-200 rounded-full hover:opacity-60 duration-100 text-sky-700"
+                    >
+                      {e.name}
+                    </Link>
+                  ))}
+                </Disclosure.Panel>
+              </Transition>
             </div>
-          </div>
+          </Disclosure>
         </div>
       </div>
     </MainLayout>