From b8af83fe38d7eba0f19c84476984990376231995 Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Mon, 13 Oct 2025 16:42:21 +0800
Subject: [PATCH] update

---
 components/details/details-content.tsx | 86 +++++++++++++++-----------
 1 file changed, 49 insertions(+), 37 deletions(-)

diff --git a/components/details/details-content.tsx b/components/details/details-content.tsx
index a0f2979..dd18a76 100644
--- a/components/details/details-content.tsx
+++ b/components/details/details-content.tsx
@@ -305,13 +305,13 @@ export default function DetailContent() {
     close();
   }
 
-  if (!articleDetail?.files || articleDetail.files.length === 0) {
-    return (
-      <div className="w-full h-[400px] bg-gray-100 flex items-center justify-center rounded-lg">
-        <p className="text-gray-400 text-sm">Gambar tidak tersedia</p>
-      </div>
-    );
-  }
+  // if (!articleDetail?.files || articleDetail.files.length === 0) {
+  //   return (
+  //     <div className="w-full h-[400px] bg-gray-100 flex items-center justify-center rounded-lg">
+  //       <p className="text-gray-400 text-sm">Gambar tidak tersedia</p>
+  //     </div>
+  //   );
+  // }
 
   return (
     <>
@@ -364,38 +364,50 @@ export default function DetailContent() {
 
           <div className="w-full h-auto mb-6">
             {/* Gambar utama */}
-            <div className="w-full">
-              <Image
-                src={articleDetail.files[selectedIndex].fileUrl}
-                alt={articleDetail.files[selectedIndex].fileAlt || "Berita"}
-                width={800}
-                height={400}
-                className="rounded-lg w-full object-cover"
-              />
-            </div>
-
-            {/* Thumbnail */}
-            <div className="flex gap-2 mt-3 overflow-x-auto">
-              {articleDetail.files.map((file: any, index: number) => (
-                <button
-                  key={file.id || index}
-                  onClick={() => setSelectedIndex(index)}
-                  className={`border-2 rounded-lg overflow-hidden ${
-                    selectedIndex === index
-                      ? "border-red-500"
-                      : "border-transparent"
-                  }`}
-                >
+            {articleDetail?.files && articleDetail.files.length > 0 ? (
+              <>
+                {/* Gambar utama */}
+                <div className="w-full">
                   <Image
-                    src={file.fileUrl}
-                    alt={file.fileAlt || "Thumbnail"}
-                    width={100}
-                    height={80}
-                    className="object-cover"
+                    src={articleDetail.files[selectedIndex]?.fileUrl}
+                    alt={
+                      articleDetail.files[selectedIndex]?.fileAlt || "Berita"
+                    }
+                    width={800}
+                    height={400}
+                    className="rounded-lg w-full object-cover"
                   />
-                </button>
-              ))}
-            </div>
+                </div>
+
+                {/* Thumbnail */}
+                <div className="flex gap-2 mt-3 overflow-x-auto">
+                  {articleDetail.files.map((file: any, index: number) => (
+                    <button
+                      key={file?.id || index}
+                      onClick={() => setSelectedIndex(index)}
+                      className={`border-2 rounded-lg overflow-hidden ${
+                        selectedIndex === index
+                          ? "border-red-500"
+                          : "border-transparent"
+                      }`}
+                    >
+                      <Image
+                        src={file?.fileUrl}
+                        alt={file?.fileAlt || "Thumbnail"}
+                        width={100}
+                        height={80}
+                        className="object-cover"
+                      />
+                    </button>
+                  ))}
+                </div>
+              </>
+            ) : (
+              // Jika file kosong/null tapi tetap render data lainnya
+              <div className="w-full h-[400px] bg-gray-100 flex items-center justify-center rounded-lg">
+                <p className="text-gray-400 text-sm">Gambar tidak tersedia</p>
+              </div>
+            )}
 
             {/* Slug */}
             <p className="text-sm text-gray-500 mt-2 text-end">