feature: Implement a usable but ugly all tags and a single tag page

2 files changed, 16 insertions, 18 deletions

diff --git a/packages/web/app/dashboard/bookmarks/components/Bookmarks.tsx b/packages/web/app/dashboard/bookmarks/components/Bookmarks.tsx
index d7e3f1f3..bd144a67 100644
--- a/packages/web/app/dashboard/bookmarks/components/Bookmarks.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/Bookmarks.tsx
@@ -20,20 +20,17 @@ export default async function Bookmarks({
     archived,
   });
 
-  if (bookmarks.bookmarks.length == 0) {
-    // TODO: This needs to be polished
-    return (
-      <>
-        <div className="container pb-4 text-2xl">{title}</div>
-        <div className="container">No bookmarks</div>
-      </>
-    );
-  }
-
+  // TODO: This needs to be polished
   return (
     <>
       <div className="container pb-4 text-2xl">{title}</div>
-      <BookmarksGrid bookmarks={bookmarks.bookmarks} />
+      <div className="container">
+        {bookmarks.bookmarks.length == 0 ? (
+          "No bookmarks"
+        ) : (
+          <BookmarksGrid bookmarks={bookmarks.bookmarks} />
+        )}
+      </div>
     </>
   );
 }
diff --git a/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx b/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
index abd4bff7..00e4ef26 100644
--- a/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
@@ -27,13 +27,14 @@ export default function LinkCard({ bookmark }: { bookmark: ZBookmark }) {
       </ImageCardTitle>
       <ImageCardBody className="overflow-clip py-2">
         {bookmark.tags.map((t) => (
-          <Badge
-            variant="default"
-            className="bg-gray-300 text-gray-500 hover:text-white"
-            key={t.id}
-          >
-            #{t.name}
-          </Badge>
+          <Link key={t.id} href={`/dashboard/tags/${t.name}`}>
+            <Badge
+              variant="default"
+              className="bg-gray-300 text-gray-500 hover:text-white"
+            >
+              #{t.name}
+            </Badge>
+          </Link>
         ))}
       </ImageCardBody>
       <ImageCardFooter>