From b37d695091af5bb0da73f226881fc7959102d7d0 Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Tue, 18 Jul 2023 11:34:43 -0400
Subject: [PATCH] small styling improvement

---
 pages/dashboard.tsx | 92 ++++++++++++++++++++++++++-------------------
 1 file changed, 54 insertions(+), 38 deletions(-)

diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 4f0e973..9e721ff 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -107,14 +107,18 @@ export default function Dashboard() {
             <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>
+            <p className="text-sky-900 text-xl">
+              {collections.length === 1 ? "Collection" : "Collections"}
+            </p>
           </div>
 
           <div className="flex items-baseline gap-2">
             <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>
+            <p className="text-sky-900 text-xl">
+              {tags.length === 1 ? "Tag" : "Tags"}
+            </p>
           </div>
         </div>
 
@@ -122,45 +126,57 @@ export default function Dashboard() {
         <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 mx-auto md:w-2/3">
-              <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>
+          {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
+            <Disclosure defaultOpen={linkPinDisclosure}>
+              <div className="flex flex-col gap-5 p-2 w-full mx-auto md:w-2/3">
+                <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={faChevronDown}
-                    className={`w-4 h-4 text-sky-300 ${
-                      linkPinDisclosure ? "rotate-reverse" : "rotate"
-                    }`}
-                  />
-                </div>
-              </Disclosure.Button>
+                  <div className="text-sky-600 flex items-center gap-2">
+                    {linkPinDisclosure ? "Hide" : "Show"}
+                    <FontAwesomeIcon
+                      icon={faChevronDown}
+                      className={`w-4 h-4 text-sky-300 ${
+                        linkPinDisclosure ? "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="grid grid-cols-1 xl:grid-cols-2 gap-5 w-full">
-                  {links
-                    .filter((e) => e.pinnedBy && e.pinnedBy[0])
-                    .map((e, i) => (
-                      <LinkCard key={i} link={e} count={i} />
-                    ))}
-                </Disclosure.Panel>
-              </Transition>
+                <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="grid grid-cols-1 xl:grid-cols-2 gap-5 w-full">
+                    {links
+                      .filter((e) => e.pinnedBy && e.pinnedBy[0])
+                      .map((e, i) => (
+                        <LinkCard key={i} link={e} count={i} />
+                      ))}
+                  </Disclosure.Panel>
+                </Transition>
+              </div>
+            </Disclosure>
+          ) : (
+            <div className="border border-solid border-sky-100 w-full mx-auto md:w-2/3 p-10 rounded-md">
+              <p className="text-center text-2xl text-sky-500">
+                No Pinned Links
+              </p>
+              <p className="text-center text-sky-900 text-sm">
+                You can Pin Links by clicking on the three dots on each Link and
+                clicking "Pin to Dashboard."
+              </p>
             </div>
-          </Disclosure>
+          )}
 
           {/* <Disclosure defaultOpen={collectionPinDisclosure}>
             <div className="flex flex-col gap-5 p-2 w-full">