From 96f43dcc5998fa4b4f6d982570186827ac6d55c5 Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Wed, 19 Jul 2023 17:49:54 -0400
Subject: [PATCH] UI improvement

---
 .../InputSelect/CollectionSelection.tsx       |   2 +-
 components/NoLinksFound.tsx                   |  38 ++++++
 components/Sidebar.tsx                        | 110 +++++++++++-------
 pages/collections/[id].tsx                    |  19 +--
 pages/dashboard.tsx                           |   2 +-
 pages/links.tsx                               |  15 ++-
 6 files changed, 129 insertions(+), 57 deletions(-)
 create mode 100644 components/NoLinksFound.tsx

diff --git a/components/InputSelect/CollectionSelection.tsx b/components/InputSelect/CollectionSelection.tsx
index d7307a0..f140bbc 100644
--- a/components/InputSelect/CollectionSelection.tsx
+++ b/components/InputSelect/CollectionSelection.tsx
@@ -45,7 +45,7 @@ export default function CollectionSelection({ onChange, defaultValue }: Props) {
   return (
     <Select
       isClearable
-      placeholder="Unnamed Collection"
+      placeholder="Default: Unnamed Collection"
       onChange={onChange}
       options={options}
       styles={styles}
diff --git a/components/NoLinksFound.tsx b/components/NoLinksFound.tsx
new file mode 100644
index 0000000..39186bb
--- /dev/null
+++ b/components/NoLinksFound.tsx
@@ -0,0 +1,38 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from "react";
+import useModalStore from "@/store/modals";
+
+export default function NoLinksFound() {
+  const { setModal } = useModalStore();
+
+  return (
+    <div className="border border-solid border-sky-100 w-full p-10 rounded-2xl">
+      <p className="text-center text-3xl text-sky-500">
+        You haven't created any Links Here
+      </p>
+      <br />
+      <div className="text-center text-sky-900 text-sm flex items-baseline justify-center gap-1 w-full">
+        <p>Start by creating a</p>{" "}
+        <div
+          onClick={() => {
+            setModal({
+              modal: "LINK",
+              state: true,
+              method: "CREATE",
+            });
+          }}
+          className="inline-flex gap-1 relative w-[7.2rem] items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-full text-white bg-sky-500 hover:bg-sky-400 duration-100 group"
+        >
+          <FontAwesomeIcon
+            icon={faPlus}
+            className="w-5 h-5 group-hover:ml-9 absolute duration-100"
+          />
+          <span className="block group-hover:opacity-0 text-right w-full duration-100">
+            New Link
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index d7dc970..9866653 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -127,29 +127,41 @@ export default function Sidebar({ className }: { className?: string }) {
           leaveTo="transform opacity-0 -translate-y-3"
         >
           <Disclosure.Panel className="flex flex-col gap-1">
-            {collections
-              .sort((a, b) => a.name.localeCompare(b.name))
-              .map((e, i) => {
-                return (
-                  <Link key={i} href={`/collections/${e.id}`}>
-                    <div
-                      className={`${
-                        active === `/collections/${e.id}`
-                          ? "bg-sky-200"
-                          : "hover:bg-slate-200 bg-gray-100"
-                      } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
-                    >
-                      <FontAwesomeIcon
-                        icon={faFolder}
-                        className="w-6 h-6 drop-shadow"
-                        style={{ color: e.color }}
-                      />
+            {collections[0] ? (
+              collections
+                .sort((a, b) => a.name.localeCompare(b.name))
+                .map((e, i) => {
+                  return (
+                    <Link key={i} href={`/collections/${e.id}`}>
+                      <div
+                        className={`${
+                          active === `/collections/${e.id}`
+                            ? "bg-sky-200"
+                            : "hover:bg-slate-200 bg-gray-100"
+                        } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+                      >
+                        <FontAwesomeIcon
+                          icon={faFolder}
+                          className="w-6 h-6 drop-shadow"
+                          style={{ color: e.color }}
+                        />
 
-                      <p className="text-sky-600 truncate w-4/6">{e.name}</p>
-                    </div>
-                  </Link>
-                );
-              })}
+                        <p className="text-sky-600 truncate w-full pr-7">
+                          {e.name}
+                        </p>
+                      </div>
+                    </Link>
+                  );
+                })
+            ) : (
+              <div
+                className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+              >
+                <p className="text-gray-500 text-xs font-semibold truncate w-full pr-7">
+                  You Have No Collections...
+                </p>
+              </div>
+            )}
           </Disclosure.Panel>
         </Transition>
       </Disclosure>
@@ -175,28 +187,40 @@ export default function Sidebar({ className }: { className?: string }) {
           leaveTo="transform opacity-0 -translate-y-3"
         >
           <Disclosure.Panel className="flex flex-col gap-1">
-            {tags
-              .sort((a, b) => a.name.localeCompare(b.name))
-              .map((e, i) => {
-                return (
-                  <Link key={i} href={`/tags/${e.id}`}>
-                    <div
-                      className={`${
-                        active === `/tags/${e.id}`
-                          ? "bg-sky-200"
-                          : "hover:bg-slate-200 bg-gray-100"
-                      } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
-                    >
-                      <FontAwesomeIcon
-                        icon={faHashtag}
-                        className="w-4 h-4 text-sky-500 mt-1"
-                      />
+            {tags[0] ? (
+              tags
+                .sort((a, b) => a.name.localeCompare(b.name))
+                .map((e, i) => {
+                  return (
+                    <Link key={i} href={`/tags/${e.id}`}>
+                      <div
+                        className={`${
+                          active === `/tags/${e.id}`
+                            ? "bg-sky-200"
+                            : "hover:bg-slate-200 bg-gray-100"
+                        } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+                      >
+                        <FontAwesomeIcon
+                          icon={faHashtag}
+                          className="w-4 h-4 text-sky-500 mt-1"
+                        />
 
-                      <p className="text-sky-600 truncate w-4/6">{e.name}</p>
-                    </div>
-                  </Link>
-                );
-              })}
+                        <p className="text-sky-600 truncate w-full pr-7">
+                          {e.name}
+                        </p>
+                      </div>
+                    </Link>
+                  );
+                })
+            ) : (
+              <div
+                className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+              >
+                <p className="text-gray-500 text-xs font-semibold truncate w-full pr-7">
+                  You Have No Tags...
+                </p>
+              </div>
+            )}
           </Disclosure.Panel>
         </Transition>
       </Disclosure>
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 37baacd..93a4631 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -18,6 +18,7 @@ import SortDropdown from "@/components/SortDropdown";
 import useModalStore from "@/store/modals";
 import useLinks from "@/hooks/useLinks";
 import usePermissions from "@/hooks/usePermissions";
+import NoLinksFound from "@/components/NoLinksFound";
 
 export default function Index() {
   const { setModal } = useModalStore();
@@ -234,13 +235,17 @@ export default function Index() {
             </div>
           </div>
         </div>
-        <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
-          {links
-            .filter((e) => e.collectionId === Number(router.query.id))
-            .map((e, i) => {
-              return <LinkCard key={i} link={e} count={i} />;
-            })}
-        </div>
+        {links[0] ? (
+          <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
+            {links
+              .filter((e) => e.collectionId === Number(router.query.id))
+              .map((e, i) => {
+                return <LinkCard key={i} link={e} count={i} />;
+              })}
+          </div>
+        ) : (
+          <NoLinksFound />
+        )}
       </div>
     </MainLayout>
   );
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index c12ea0f..b7eac2e 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -167,7 +167,7 @@ export default function Dashboard() {
               </div>
             </Disclosure>
           ) : (
-            <div className="border border-solid border-sky-100 w-full mx-auto md:w-2/3 p-10 rounded-md">
+            <div className="border border-solid border-sky-100 w-full mx-auto md:w-2/3 p-10 rounded-2xl">
               <p className="text-center text-2xl text-sky-500">
                 No Pinned Links
               </p>
diff --git a/pages/links.tsx b/pages/links.tsx
index c8cae0e..349d10e 100644
--- a/pages/links.tsx
+++ b/pages/links.tsx
@@ -1,4 +1,5 @@
 import LinkCard from "@/components/LinkCard";
+import NoLinksFound from "@/components/NoLinksFound";
 import SortDropdown from "@/components/SortDropdown";
 import useLinks from "@/hooks/useLinks";
 import MainLayout from "@/layouts/MainLayout";
@@ -52,11 +53,15 @@ export default function Links() {
             ) : null}
           </div>
         </div>
-        <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
-          {links.map((e, i) => {
-            return <LinkCard key={i} link={e} count={i} />;
-          })}
-        </div>
+        {links[0] ? (
+          <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
+            {links.map((e, i) => {
+              return <LinkCard key={i} link={e} count={i} />;
+            })}
+          </div>
+        ) : (
+          <NoLinksFound />
+        )}
       </div>
     </MainLayout>
   );