From 97d18d7ac3bc6ab4f40618e74f021ee63a4cf7b6 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Thu, 15 Feb 2024 16:03:24 +0000
Subject: ui: Usage images for link cards

---
 .../dashboard/bookmarks/components/LinkCard.tsx    | 68 ++++++++++++++--------
 1 file changed, 43 insertions(+), 25 deletions(-)

(limited to 'packages/web/app/dashboard/bookmarks/components/LinkCard.tsx')

diff --git a/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx b/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
index 00e4ef26..7413c2fe 100644
--- a/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
@@ -1,7 +1,9 @@
 import { Badge } from "@/components/ui/badge";
 import {
   ImageCard,
+  ImageCardBanner,
   ImageCardBody,
+  ImageCardContent,
   ImageCardFooter,
   ImageCardTitle,
 } from "@/components/ui/imageCard";
@@ -13,40 +15,56 @@ export default function LinkCard({ bookmark }: { bookmark: ZBookmark }) {
   const link = bookmark.content;
   const parsedUrl = new URL(link.url);
 
+  // A dummy white pixel for when there's no image.
+  // TODO: Better handling for cards with no images
+  const image =
+    link.imageUrl ??
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdj+P///38ACfsD/QVDRcoAAAAASUVORK5CYII=";
+
   return (
     <ImageCard
       className={
         "border-grey-100 border bg-gray-50 duration-300 ease-in hover:border-blue-300 hover:transition-all"
       }
-      image={link?.imageUrl ?? undefined}
     >
-      <ImageCardTitle>
-        <Link className="line-clamp-2" href={link.url}>
-          {link?.title ?? parsedUrl.host}
-        </Link>
-      </ImageCardTitle>
-      <ImageCardBody className="overflow-clip py-2">
-        {bookmark.tags.map((t) => (
-          <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 href={link.url}>
+        <ImageCardBanner src={image} />
+      </Link>
+      <ImageCardContent>
+        <ImageCardTitle>
+          <Link className="line-clamp-2" href={link.url}>
+            {link?.title ?? parsedUrl.host}
           </Link>
-        ))}
-      </ImageCardBody>
-      <ImageCardFooter>
-        <div className="flex justify-between text-gray-500">
-          <div className="my-auto">
-            <Link className="line-clamp-1 hover:text-black" href={link.url}>
-              {parsedUrl.host}
+        </ImageCardTitle>
+        {/* There's a hack here. Every tag has the full hight of the container itself. That why, when we enable flex-wrap,
+        the overflowed don't show up. */}
+        <ImageCardBody className="flex h-full flex-wrap space-x-1 overflow-hidden">
+          {bookmark.tags.map((t) => (
+            <Link
+              className="flex h-full flex-col justify-end"
+              key={t.id}
+              href={`/dashboard/tags/${t.name}`}
+            >
+              <Badge
+                variant="default"
+                className="text-nowrap bg-gray-300 text-gray-500 hover:text-white"
+              >
+                #{t.name}
+              </Badge>
             </Link>
+          ))}
+        </ImageCardBody>
+        <ImageCardFooter>
+          <div className="flex justify-between text-gray-500">
+            <div className="my-auto">
+              <Link className="line-clamp-1 hover:text-black" href={link.url}>
+                {parsedUrl.host}
+              </Link>
+            </div>
+            <BookmarkOptions bookmark={bookmark} />
           </div>
-          <BookmarkOptions bookmark={bookmark} />
-        </div>
-      </ImageCardFooter>
+        </ImageCardFooter>
+      </ImageCardContent>
     </ImageCard>
   );
 }
-- 
cgit v1.2.3-70-g09d2