UI improvement

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}

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>
+  );
+}

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
+            {collections[0] ? (
-              .sort((a, b) => a.name.localeCompare(b.name))
+              collections
-              .map((e, i) => {
+                .sort((a, b) => a.name.localeCompare(b.name))
-                return (
+                .map((e, i) => {
-                  <Link key={i} href={`/collections/${e.id}`}>
+                  return (
-                    <div
+                    <Link key={i} href={`/collections/${e.id}`}>
-                      className={`${
+                      <div
-                        active === `/collections/${e.id}`
+                        className={`${
-                          ? "bg-sky-200"
+                          active === `/collections/${e.id}`
-                          : "hover:bg-slate-200 bg-gray-100"
+                            ? "bg-sky-200"
-                      } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+                            : "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}
+                        <FontAwesomeIcon
-                        className="w-6 h-6 drop-shadow"
+                          icon={faFolder}
-                        style={{ color: e.color }}
+                          className="w-6 h-6 drop-shadow"
-                      />
+                          style={{ color: e.color }}
+                        />
 
-                      <p className="text-sky-600 truncate w-4/6">{e.name}</p>
+                        <p className="text-sky-600 truncate w-full pr-7">
-                    </div>
+                          {e.name}
-                  </Link>
+                        </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
+            {tags[0] ? (
-              .sort((a, b) => a.name.localeCompare(b.name))
+              tags
-              .map((e, i) => {
+                .sort((a, b) => a.name.localeCompare(b.name))
-                return (
+                .map((e, i) => {
-                  <Link key={i} href={`/tags/${e.id}`}>
+                  return (
-                    <div
+                    <Link key={i} href={`/tags/${e.id}`}>
-                      className={`${
+                      <div
-                        active === `/tags/${e.id}`
+                        className={`${
-                          ? "bg-sky-200"
+                          active === `/tags/${e.id}`
-                          : "hover:bg-slate-200 bg-gray-100"
+                            ? "bg-sky-200"
-                      } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+                            : "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}
+                        <FontAwesomeIcon
-                        className="w-4 h-4 text-sky-500 mt-1"
+                          icon={faHashtag}
-                      />
+                          className="w-4 h-4 text-sky-500 mt-1"
+                        />
 
-                      <p className="text-sky-600 truncate w-4/6">{e.name}</p>
+                        <p className="text-sky-600 truncate w-full pr-7">
-                    </div>
+                          {e.name}
-                  </Link>
+                        </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>

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[0] ? (
-          {links
+          <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
-            .filter((e) => e.collectionId === Number(router.query.id))
+            {links
-            .map((e, i) => {
+              .filter((e) => e.collectionId === Number(router.query.id))
-              return <LinkCard key={i} link={e} count={i} />;
+              .map((e, i) => {
-            })}
+                return <LinkCard key={i} link={e} count={i} />;
-        </div>
+              })}
+          </div>
+        ) : (
+          <NoLinksFound />
+        )}
       </div>
     </MainLayout>
   );

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>

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[0] ? (
-          {links.map((e, i) => {
+          <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
-            return <LinkCard key={i} link={e} count={i} />;
+            {links.map((e, i) => {
-          })}
+              return <LinkCard key={i} link={e} count={i} />;
-        </div>
+            })}
+          </div>
+        ) : (
+          <NoLinksFound />
+        )}
       </div>
     </MainLayout>
   );