UI improvement

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

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.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>
   );