From 6c28fd3a94f406f5fcc17de041b67b967a36ddf9 Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Fri, 26 Sep 2025 14:21:15 +0800
Subject: [PATCH] update edit dan detail

---
 components/details/details-content.tsx | 47 +++++++++++++++++++++-----
 service/article.ts                     | 19 +++++++----
 2 files changed, 52 insertions(+), 14 deletions(-)

diff --git a/components/details/details-content.tsx b/components/details/details-content.tsx
index dbb183b..1d61f9f 100644
--- a/components/details/details-content.tsx
+++ b/components/details/details-content.tsx
@@ -56,6 +56,7 @@ export default function DetailContent() {
   const [selectedMainImage, setSelectedMainImage] = useState<number | null>(
     null
   );
+  const [selectedIndex, setSelectedIndex] = useState(0);
 
   const [tabArticles, setTabArticles] = useState<Article[]>([]);
 
@@ -193,6 +194,14 @@ 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>
+    );
+  }
+
   return (
     <>
       <div className="flex items-center bg-[#F2F4F3] w-full overflow-hidden mb-4 py-6 px-8">
@@ -253,19 +262,41 @@ export default function DetailContent() {
           </div>
 
           <div className="w-full h-auto mb-6">
-            {articleDetail?.files?.[0]?.fileUrl ? (
+            {/* Gambar utama */}
+            <div className="w-full">
               <Image
-                src={articleDetail.files[0].fileUrl}
-                alt="Berita"
+                src={articleDetail.files[selectedIndex].fileUrl}
+                alt={articleDetail.files[selectedIndex].fileAlt || "Berita"}
                 width={800}
                 height={400}
                 className="rounded-lg w-full object-cover"
               />
-            ) : (
-              <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>
-            )}
+            </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>
+
+            {/* Slug */}
             <p className="text-sm text-gray-500 mt-2 text-end">
               {articleDetail?.slug}
             </p>
diff --git a/service/article.ts b/service/article.ts
index 8faddf4..d5da725 100644
--- a/service/article.ts
+++ b/service/article.ts
@@ -1,6 +1,11 @@
 import { PaginationRequest } from "@/types/globals";
 import { httpGet } from "./http-config/http-base-services";
-import { httpDeleteInterceptor, httpGetInterceptor, httpPostInterceptor, httpPutInterceptor } from "./http-config/http-interceptor-services";
+import {
+  httpDeleteInterceptor,
+  httpGetInterceptor,
+  httpPostInterceptor,
+  httpPutInterceptor,
+} from "./http-config/http-interceptor-services";
 
 export async function getListArticle(props: PaginationRequest) {
   const {
@@ -42,11 +47,13 @@ export async function getArticlePagination(props: PaginationRequest) {
     isBanner,
   } = props;
   return await httpGetInterceptor(
-    `/articles?limit=${limit}&page=${page}&title=${search}&startDate=${startDate || ""}&endDate=${
-      endDate || ""
-    }&categoryId=${category || ""}&sortBy=${sortBy || "created_at"}&sort=${
-      sort || "asc"
-    }&category=${categorySlug || ""}&isBanner=${isBanner || ""}`
+    `/articles?limit=${limit}&page=${page}&title=${search}&startDate=${
+      startDate || ""
+    }&endDate=${endDate || ""}&categoryId=${category || ""}&sortBy=${
+      sortBy || "created_at"
+    }&sort=${sort || "asc"}&category=${categorySlug || ""}&isBanner=${
+      isBanner || ""
+    }`
   );
 }