Merge branch 'dev-1' of https://gitlab.com/hanifsalafi/new-netidhub-public

components/landing-page/header.tsx

@@ -216,6 +216,15 @@ function Card({
   const MySwal = withReactContent(Swal);
   const [isSaving, setIsSaving] = useState(false);
   const [isBookmarked, setIsBookmarked] = useState(isInitiallyBookmarked);
+  const DEFAULT_IMAGE = "/assets/logo1.png";
+
+  const [imageSrc, setImageSrc] = useState(
+    item?.smallThumbnailLink || DEFAULT_IMAGE
+  );
+
+  useEffect(() => {
+    setImageSrc(item?.smallThumbnailLink || DEFAULT_IMAGE);
+  }, [item?.smallThumbnailLink]);
 
   useEffect(() => {
     setIsBookmarked(isInitiallyBookmarked);
@@ -297,11 +306,18 @@ function Card({
           } w-full`}
         >
           <Link href={getLink()}>
-            <Image
+            {/* <Image
               src={item.smallThumbnailLink || "/contributor.png"}
               alt={item.title}
               fill
               className="object-cover"
+            /> */}
+            <Image
+              src={imageSrc}
+              alt={item.title}
+              fill
+              className="object-cover"
+              onError={() => setImageSrc(DEFAULT_IMAGE)}
             />
           </Link>
         </div>

components/landing-page/media-update.tsx

@@ -52,6 +52,8 @@ export default function MediaUpdate() {
 
   const slug = params?.slug as string;
 
+  const DEFAULT_IMAGE = "/assets/logo1.png";
+
   useEffect(() => {
     fetchData(tab);
   }, [tab, slug]);
@@ -327,6 +329,34 @@ export default function MediaUpdate() {
     }
   };
 
+  function SafeImage({
+    src,
+    alt,
+    href,
+  }: {
+    src?: string;
+    alt?: string;
+    href: string;
+  }) {
+    const [imgSrc, setImgSrc] = useState(src || DEFAULT_IMAGE);
+
+    useEffect(() => {
+      setImgSrc(src || DEFAULT_IMAGE);
+    }, [src]);
+
+    return (
+      <Link href={href}>
+        <Image
+          src={imgSrc}
+          alt={alt || "Image"}
+          fill
+          className="object-cover cursor-pointer hover:opacity-90 transition-opacity"
+          onError={() => setImgSrc(DEFAULT_IMAGE)}
+        />
+      </Link>
+    );
+  }
+
   return (
     <section className="bg-white px-4 py-10 border max-w-[1350px] mx-auto rounded-md border-[#CDD5DF] my-10">
       <div className="max-w-screen-xl mx-auto">
@@ -471,12 +501,18 @@ export default function MediaUpdate() {
                     // 🎬 FOTO / VIDEO (default)
                     <div className="w-full h-[204px] relative">
                       <Link href={getLink(item)}>
-                        <Image
+                        <SafeImage
+                          src={item.smallThumbnailLink}
+                          alt={item.title}
+                          href={getLink(item)}
+                        />
+
+                        {/* <Image
                           src={item.smallThumbnailLink || "/placeholder.png"}
                           alt={item.title || "No Title"}
                           fill
                           className="object-cover cursor-pointer hover:opacity-90 transition-opacity"
-                        />
+                        /> */}
                       </Link>
                     </div>
                   )}