From 1c9d8626545085f905189d10948e3d5ade7cbf11 Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Fri, 4 Jul 2025 10:47:42 +0800
Subject: [PATCH] feat: update

---
 components/details/details-content.tsx | 66 +++++++++++++++++++++-----
 components/landing-page/header.tsx     | 16 ++++++-
 2 files changed, 68 insertions(+), 14 deletions(-)

diff --git a/components/details/details-content.tsx b/components/details/details-content.tsx
index 67c0ce4..515a5c0 100644
--- a/components/details/details-content.tsx
+++ b/components/details/details-content.tsx
@@ -71,28 +71,39 @@ export default function DetailContent() {
   }, [activeTab]);
 
   async function fetchTabArticles() {
-    const req = {
-      limit: "5",
-      page: 1,
-      search: "-",
-      categorySlug: "-",
+    const req: any = {
+      limit: showData,
+      page,
+      search,
+      categorySlug: Array.from(selectedCategories).join(","),
       sort: "desc",
       sortBy: "created_at",
     };
 
-    try {
-      if (activeTab === "trending") {
-        req.sortBy = "view_count";
-      } else if (activeTab === "comments") {
-        req.sortBy = "comment_count";
-      } else {
-        req.sortBy = "created_at";
-      }
+    // Sesuaikan sortBy berdasarkan tab
+    if (activeTab === "trending") {
+      req.sortBy = "view_count";
+    } else if (activeTab === "comments") {
+      req.sortBy = "comment_count";
+    } else {
+      req.sortBy = "created_at";
+    }
 
+    // Hanya kirimkan search jika valid
+    if (search && search !== "-" && search !== "") {
+      req.search = search;
+    }
+
+    if (selectedCategories && selectedCategories !== "-") {
+      req.categorySlug = selectedCategories;
+    }
+
+    try {
       const res = await getListArticle(req);
       setTabArticles(res?.data?.data || []);
     } catch (error) {
       console.error("Failed fetching tab articles:", error);
+      setTabArticles([]); // Optional fallback
     }
   }
 
@@ -536,6 +547,35 @@ export default function DetailContent() {
                   </div>
                 ))}
               </div>
+              {tabArticles.length === 0 ? (
+                <p className="text-sm text-gray-500">
+                  Artikel tidak ditemukan.
+                </p>
+              ) : (
+                tabArticles.map((item, idx) => (
+                  <div key={idx} className="flex space-x-3">
+                    <Image
+                      src={item.thumbnailUrl || "/default-thumb.png"}
+                      alt={item.title}
+                      width={70}
+                      height={70}
+                      className="rounded w-[70px] h-[70px] object-cover"
+                    />
+                    <div>
+                      <p className="text-sm font-semibold leading-snug">
+                        {item.title}
+                      </p>
+                      <p className="text-xs text-gray-500 mt-1">
+                        {new Date(item.createdAt).toLocaleDateString("id-ID", {
+                          day: "2-digit",
+                          month: "long",
+                          year: "numeric",
+                        })}
+                      </p>
+                    </div>
+                  </div>
+                ))
+              )}
             </div>
 
             <div className="mt-6">
diff --git a/components/landing-page/header.tsx b/components/landing-page/header.tsx
index 77bd785..cf646bf 100644
--- a/components/landing-page/header.tsx
+++ b/components/landing-page/header.tsx
@@ -94,8 +94,22 @@ export default function HeroNewsSection() {
                   <h2 className="text-sm md:text-xl lg:text-2xl font-bold text-white leading-snug mb-2 w-full md:w-9/12">
                     {articles[0].title}
                   </h2>
-                  <p className="text-white text-xs">
+                  <p className="text-white text-xs flex items-center gap-2">
                     {articles[0].createdByName} -{" "}
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                    >
+                      <g fill="none">
+                        <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
+                        <path
+                          fill="currentColor"
+                          d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16m0 2a1 1 0 0 1 .993.883L13 7v4.586l2.707 2.707a1 1 0 0 1-1.32 1.497l-.094-.083l-3-3a1 1 0 0 1-.284-.576L11 12V7a1 1 0 0 1 1-1"
+                        />
+                      </g>
+                    </svg>{" "}
                     {new Date(articles[0].createdAt).toLocaleDateString(
                       "id-ID",
                       {