From e12fe024a9c837dc88569f80f3f75ead85bdfbde Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Fri, 19 Apr 2024 23:47:45 +0100
Subject: fix: Use next/image for serving bookmark images

---
 .../dashboard/preview/LinkContentSection.tsx          | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

(limited to 'apps/web/components/dashboard/preview/LinkContentSection.tsx')

diff --git a/apps/web/components/dashboard/preview/LinkContentSection.tsx b/apps/web/components/dashboard/preview/LinkContentSection.tsx
index ff08c661..6c51864f 100644
--- a/apps/web/components/dashboard/preview/LinkContentSection.tsx
+++ b/apps/web/components/dashboard/preview/LinkContentSection.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import Image from "next/image";
 import {
   Select,
   SelectContent,
@@ -12,8 +13,16 @@ import { ScrollArea } from "@radix-ui/react-scroll-area";
 import { ZBookmark, ZBookmarkedLink } from "@hoarder/shared/types/bookmarks";
 
 function ScreenshotSection({ link }: { link: ZBookmarkedLink }) {
-  // eslint-disable-next-line @next/next/no-img-element
-  return <img alt="screenshot" src={`/api/assets/${link.screenshotAssetId}`} />;
+  return (
+    <div className="relative h-full min-w-full">
+      <Image
+        fill={true}
+        alt="screenshot"
+        src={`/api/assets/${link.screenshotAssetId}`}
+        className="object-contain"
+      />
+    </div>
+  );
 }
 
 function CachedContentSection({ link }: { link: ZBookmarkedLink }) {
@@ -32,7 +41,7 @@ function CachedContentSection({ link }: { link: ZBookmarkedLink }) {
       />
     );
   }
-  return content;
+  return <ScrollArea className="h-full">{content}</ScrollArea>;
 }
 
 export default function LinkContentSection({
@@ -54,7 +63,7 @@ export default function LinkContentSection({
   }
 
   return (
-    <div className="flex flex-col items-center gap-2">
+    <div className="flex h-full flex-col items-center gap-2">
       <Select onValueChange={setSection} value={section}>
         <SelectTrigger className="w-fit">
           <SelectValue />
@@ -71,7 +80,7 @@ export default function LinkContentSection({
           </SelectGroup>
         </SelectContent>
       </Select>
-      <ScrollArea className="h-full">{content}</ScrollArea>
+      {content}
     </div>
   );
 }
-- 
cgit v1.2.3-70-g09d2