fix

app/category/citizen-news/page.tsx

@@ -1,4 +1,5 @@
 import Author from "@/components/landing-page/author";
+import CitizenNews from "@/components/landing-page/citizen-news/citizen-news";
 import HeaderCitizen from "@/components/landing-page/citizen-news/header-citizen";
 import Footer from "@/components/landing-page/footer";
 import Header from "@/components/landing-page/header";
@@ -26,6 +27,7 @@ export default function Development() {
         <Navbar />
         <div className="flex-1">
           <HeaderCitizen />
+          <CitizenNews />
         </div>
         <Footer />
       </div>

app/category/health/page.tsx

@@ -1,6 +1,8 @@
 import Author from "@/components/landing-page/author";
+import DevelopmentNews from "@/components/landing-page/development/development-news";
 import Footer from "@/components/landing-page/footer";
 import Header from "@/components/landing-page/header";
+import HealthNews from "@/components/landing-page/health/health-news";
 import HeaderHealth from "@/components/landing-page/health/header-health";
 import Latest from "@/components/landing-page/latest";
 import LatestandPopular from "@/components/landing-page/latest-and-popular";
@@ -26,6 +28,7 @@ export default function Development() {
         <Navbar />
         <div className="flex-1">
           <HeaderHealth />
+          <HealthNews />
         </div>
         <Footer />
       </div>

components/form/article/edit-article-form.tsx

@@ -954,10 +954,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
               Simpan
             </Button>
           )}
-          {isDetail &&
+          {detailData?.isPublish === false && (
-            detailData?.isPublish === false &&
-            detailData?.statusId !== 1 &&
-            Number(userId) === detailData?.createdById && (
             <Button type="button" color="primary" onClick={doPublish}>
               Publish
             </Button>

components/landing-page/citizen-news/citizen-news.tsx

@@ -0,0 +1,389 @@
+"use client";
+import { getListArticle } from "@/service/article";
+import Image from "next/image";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+import news from "../news";
+import Link from "next/link";
+
+type Article = {
+  id: number;
+  title: string;
+  description: string;
+  categoryName: string;
+  createdAt: string;
+  createdByName: string;
+  thumbnailUrl: string;
+  categories: {
+    title: string;
+  }[];
+  files: {
+    file_url: string;
+    file_alt: string;
+  }[];
+};
+
+const slugToLabel = (slug: string) => {
+  const mapping: Record<string, string> = {
+    development: "Pembangunan",
+    health: "Kesehatan",
+    "citizen-news": "Berita Warga",
+  };
+  return mapping[slug] || slug.charAt(0).toUpperCase() + slug.slice(1);
+};
+
+export default function CitizenNews() {
+  const [activeTab, setActiveTab] = useState("comments");
+  const [page, setPage] = useState(1);
+  const [totalPage, setTotalPage] = useState(1);
+  const [articles, setArticles] = useState<Article[]>([]);
+  const [showData, setShowData] = useState("100");
+  const [search, setSearch] = useState("");
+  const [selectedCategories, setSelectedCategories] = useState<any>("");
+  const [startDateValue, setStartDateValue] = useState({
+    startDate: null,
+    endDate: null,
+  });
+
+  const pathname = usePathname();
+  const pathSegments = pathname.split("/").filter(Boolean);
+
+  const categorySlug = pathSegments[1];
+  const categoryLabel = slugToLabel(categorySlug);
+
+  useEffect(() => {
+    initState();
+  }, [page, showData, startDateValue, selectedCategories, activeTab]);
+
+  async function initState() {
+    let sortBy = "created_at";
+    if (activeTab === "comments") sortBy = "comment_count";
+    if (activeTab === "trending") sortBy = "view_count";
+
+    // loading();
+    const req = {
+      limit: showData,
+      page: 1,
+      search,
+      categorySlug: Array.from(selectedCategories).join(","),
+      sort: "desc",
+      isPublish: true,
+      sortBy: "created_at",
+    };
+
+    try {
+      const res = await getListArticle(req);
+      setArticles(res?.data?.data || []);
+      setTotalPage(res?.data?.meta?.totalPage || 1);
+    } finally {
+      // close();
+    }
+  }
+
+  const citizenArticles = articles.filter((article) =>
+    article.categories?.some(
+      (category) => category.title.toLowerCase() === "berita warga"
+    )
+  );
+
+  // Pagination manually (front-end)
+  const itemsPerPage = 2;
+  const calculatedTotalPage = Math.ceil(citizenArticles.length / itemsPerPage);
+
+  const paginatedArticles = citizenArticles.slice(
+    (page - 1) * itemsPerPage,
+    page * itemsPerPage
+  );
+
+  function truncateText(text: string, wordLimit: number) {
+    const words = text.split(" ");
+    if (words.length <= wordLimit) return text;
+    return words.slice(0, wordLimit).join(" ") + "...";
+  }
+
+  return (
+    <div className="bg-white grid grid-cols-1 lg:grid-cols-3 gap-6 py-10 px-8">
+      {/* Left Content */}
+      <div className="lg:col-span-2 space-y-10">
+        {paginatedArticles.map((item) => (
+          <div key={item.id}>
+            <Link
+              className="flex flex-col md:flex-row gap-6"
+              href={`/detail/${item?.id}`}
+            >
+              {/* Image + Category */}
+              <div className="relative w-full md:w-1/2 h-64">
+                <Image
+                  src={item.thumbnailUrl || "/placeholder.png"}
+                  alt={item.title}
+                  fill
+                  className="object-cover rounded"
+                />
+                <span className="absolute top-3 left-3 bg-yellow-400 text-black px-3 py-1 text-xs font-bold">
+                  {item.categories[0]?.title || "Pembangunan"}
+                </span>
+              </div>
+
+              {/* Content */}
+              <div className="flex-1">
+                <h2 className="text-xl font-bold text-[#16324F] hover:text-green-600 cursor-pointer">
+                  {item.title}
+                </h2>
+                <div className="text-sm text-gray-600 mt-2">
+                  BY{" "}
+                  <span className="text-green-600 font-semibold">
+                    {item.createdByName || "Admin"}
+                  </span>{" "}
+                  • {new Date(item.createdAt).toLocaleDateString("id-ID")}
+                </div>
+                <p className="mt-3 text-gray-700">
+                  {truncateText(item.description, 20)}
+                </p>
+                <button className="mt-4 px-4 py-2 border border-gray-400 text-gray-700 hover:bg-black hover:text-white transition">
+                  READ MORE
+                </button>
+              </div>
+            </Link>
+          </div>
+        ))}
+
+        {/* Pagination */}
+        <div className="flex items-center justify-center gap-2 mt-6">
+          {/* Previous Button */}
+          <button
+            onClick={() => setPage((prev) => Math.max(prev - 1, 1))}
+            disabled={page === 1}
+            className="px-3 py-1 border"
+          >
+            &lt;
+          </button>
+
+          {/* Page Numbers */}
+          {Array.from({ length: calculatedTotalPage }, (_, i) => i + 1)
+            .filter((p) => {
+              // Always show first, last, current, and pages around current
+              return (
+                p === 1 ||
+                p === calculatedTotalPage ||
+                (p >= page - 1 && p <= page + 1)
+              );
+            })
+            .map((p, idx, arr) => {
+              const prev = arr[idx - 1];
+              const showEllipsis = prev && p - prev > 1;
+
+              return (
+                <span key={p} className="flex items-center">
+                  {showEllipsis && <span className="px-2">...</span>}
+                  <button
+                    onClick={() => setPage(p)}
+                    className={`px-3 py-1 ${
+                      page === p ? "bg-green-600 text-white" : "border"
+                    }`}
+                  >
+                    {p}
+                  </button>
+                </span>
+              );
+            })}
+
+          {/* Next Button */}
+          <button
+            onClick={() =>
+              setPage((prev) => Math.min(prev + 1, calculatedTotalPage))
+            }
+            disabled={page === calculatedTotalPage}
+            className="px-3 py-1 border"
+          >
+            &gt;
+          </button>
+        </div>
+      </div>
+
+      {/* Sidebar */}
+      <div className="space-y-6">
+        {/* Advertisement */}
+        <div className="w-full h-[400px] relative">
+          <Image
+            src="/advertisiment.png"
+            alt="Advertisement"
+            fill
+            className="object-cover rounded"
+          />
+        </div>
+
+        {/* Connect with us */}
+        <div>
+          <h3 className="text-lg font-semibold mb-2">Connect with us</h3>
+          <div className="h-1 w-20 bg-green-600 mb-4"></div>
+          <div className="grid grid-cols-3 gap-2">
+            <div className="bg-blue-500 text-white text-center p-3">
+              <p className="text-xl font-bold">138</p>
+              <p className="text-sm">Followers</p>
+            </div>
+            <div className="bg-red-600 text-white text-center p-3">
+              <p className="text-xl font-bold">205k</p>
+              <p className="text-sm">Subscribers</p>
+            </div>
+            <div className="bg-yellow-400 text-black text-center p-3">
+              <p className="text-xl font-bold">23.9k</p>
+              <p className="text-sm">Followers</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Tabs */}
+        <div>
+          <div className="flex gap-4 border-b">
+            {["trending", "comments", "latest"].map((tab) => (
+              <button
+                key={tab}
+                className={`pb-2 capitalize ${
+                  activeTab === tab
+                    ? "border-b-2 border-green-600 text-green-600"
+                    : "text-gray-600"
+                }`}
+                onClick={() => {
+                  setPage(1); // reset page setiap ganti tab
+                  setActiveTab(tab);
+                }}
+              >
+                {tab}
+              </button>
+            ))}
+          </div>
+
+          <div className="mt-4 space-y-4">
+            {articles.slice(0, 5).map((item) => (
+              <div key={item.id} className="flex gap-3 items-center">
+                <Link
+                  className="flex gap-3 items-center"
+                  href={`/detail/${item?.id}`}
+                >
+                  <Image
+                    src={item.thumbnailUrl || "/no-image.jpg"}
+                    alt={item.title}
+                    width={80}
+                    height={60}
+                    className="object-cover rounded"
+                  />
+                  <div>
+                    <h3 className="font-semibold text-sm">{item.title}</h3>
+                    <p className="text-xs text-gray-500">
+                      {new Date(item.createdAt).toLocaleDateString()}
+                    </p>
+                  </div>
+                </Link>
+              </div>
+            ))}
+          </div>
+          <div className="">
+            <h2 className="text-sm border-b-2 border-gray-300 font-bold mb-4">
+              Recommended
+            </h2>
+            <div className=" w-full">
+              <div className="relative w-full aspect-video mb-5">
+                <Link href={`/detail/${articles[0]?.id}`}>
+                  <Image
+                    src={
+                      articles[0]?.thumbnailUrl ||
+                      articles[0]?.files?.[0]?.file_url ||
+                      "/default-image.jpg"
+                    }
+                    alt={"articles[0]?.title"}
+                    fill
+                    sizes="(max-width: 1024px) 100vw, 33vw"
+                    className="object-cover"
+                  />
+                  <div className="absolute inset-0 bg-black/30" />
+                  <div className="absolute bottom-0.5 left-2 text-white">
+                    <h3 className=" font-semibold text-base mb-1">
+                      {articles[0]?.title}
+                    </h3>
+                    <p className=" text-xs  mb-2 flex items-center gap-2">
+                      <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",
+                        {
+                          day: "numeric",
+                          month: "long",
+                          year: "numeric",
+                        }
+                      )}
+                    </p>
+                  </div>
+                </Link>
+              </div>
+
+              <div className="space-y-5">
+                {articles?.slice(1, 4).map((article, index) => (
+                  <div key={index}>
+                    <Link
+                      className="flex gap-3"
+                      href={`/detail/${article?.id}`}
+                    >
+                      <div className="relative w-[120px] h-[86px] shrink-0">
+                        <Image
+                          src={
+                            article?.thumbnailUrl ||
+                            article?.files?.[0]?.file_url ||
+                            "/default-image.jpg"
+                          }
+                          alt={"article?.title"}
+                          fill
+                          className="object-cover"
+                        />
+                      </div>
+                      <div>
+                        <h4 className="text-sm font-semibold mb-3">
+                          {article?.title}
+                        </h4>
+                        <p className="text-xs text-gray-500 flex gap-2 items-center">
+                          <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",
+                            {
+                              day: "numeric",
+                              month: "long",
+                              year: "numeric",
+                            }
+                          )}
+                        </p>
+                      </div>
+                    </Link>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/landing-page/citizen-news/header-citizen.tsx

@@ -36,7 +36,7 @@ export default function HeaderCitizen() {
   const [page, setPage] = useState(1);
   const [totalPage, setTotalPage] = useState(1);
   const [articles, setArticles] = useState<Article[]>([]);
-  const [showData, setShowData] = useState("5");
+  const [showData, setShowData] = useState("100");
   const [search, setSearch] = useState("");
   const [selectedCategories, setSelectedCategories] = useState<any>("");
   const [startDateValue, setStartDateValue] = useState({
@@ -75,6 +75,15 @@ export default function HeaderCitizen() {
     }
   }
 
+  const citizenArticles = articles.filter((article) =>
+    article.categories?.some(
+      (category) => category.title.toLowerCase() === "berita warga"
+    )
+  );
+
+  const mainArticle = citizenArticles[0];
+  const otherArticles = citizenArticles.slice(1, 3);
+
   return (
     <section className="max-w-7xl mx-auto bg-white">
       <div className="flex flex-col items-start bg-[#F2F4F3] w-full overflow-hidden  py-6 px-8 gap-3">
@@ -97,30 +106,26 @@ export default function HeaderCitizen() {
 
       <div className="pb-5">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
-          {articles.length > 0 && (
+          {mainArticle && (
             <div className="md:col-span-2 relative">
-              <Link href={`/detail/${articles[0]?.id}`}>
+              <Link href={`/detail/${mainArticle.id}`}>
                 <Image
-                  src={
+                  src={mainArticle.files?.[0]?.file_url || "/default-image.jpg"}
-                    articles[0]?.files?.[0]?.file_url ||
+                  alt={mainArticle.title}
-                    articles[0]?.files?.[0]?.file_url ||
-                    "/default-image.jpg"
-                  }
-                  alt={articles[0].title}
                   width={800}
                   height={500}
                   className="w-full h-full max-h-[460px] object-cover"
                 />
                 <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/50 to-transparent p-6 flex flex-col justify-end">
                   <span className="text-xs bg-yellow-400 text-black px-2 py-0.5 inline-block mb-2 uppercase w-[130px]">
-                    {articles[0].categories?.[0]?.title || "TANPA KATEGORI"}
+                    {mainArticle.categories?.[0]?.title || "TANPA KATEGORI"}
                   </span>
                   <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}
+                    {mainArticle.title}
                   </h2>
                   <p className="text-white text-xs">
-                    {articles[0].createdByName} -{" "}
+                    {mainArticle.createdByName} -{" "}
-                    {new Date(articles[0].createdAt).toLocaleDateString(
+                    {new Date(mainArticle.createdAt).toLocaleDateString(
                       "id-ID",
                       {
                         day: "numeric",
@@ -135,13 +140,13 @@ export default function HeaderCitizen() {
           )}
 
           <div className="grid grid-rows-2 gap-2">
-            {articles.slice(1, 3).map((article, index) => (
+            {otherArticles.map((article, index) => (
               <div key={index} className="relative">
-                <Link href={`/detail/${article?.id}`}>
+                <Link href={`/detail/${article.id}`}>
                   <Image
                     src={
                       article.thumbnailUrl ||
-                      article?.files?.[0]?.file_url ||
+                      article.files?.[0]?.file_url ||
                       "/default-image.jpg"
                     }
                     alt={article.title}
@@ -151,7 +156,7 @@ export default function HeaderCitizen() {
                   />
                   <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent p-4 flex flex-col justify-end">
                     <span className="text-xs bg-yellow-400 text-black px-2 py-0.5 inline-block uppercase w-[130px]">
-                      {article.categoryName || "TANPA KATEGORI"}
+                      {article.categories?.[0]?.title || "TANPA KATEGORI"}
                     </span>
                     <h3 className="text-sm font-semibold text-white leading-snug mb-1">
                       {article.title}
@@ -162,15 +167,6 @@ export default function HeaderCitizen() {
             ))}
           </div>
         </div>
-
-        <div className="relative mt-10 mb-2 h-[188px] overflow-hidden flex items-center mx-8 border my-8">
-          <Image
-            src="/image-kolom.png"
-            alt="Berita Utama"
-            fill
-            className="object-contain"
-          />
-        </div>
       </div>
     </section>
   );

components/landing-page/development/development-news.tsx

@@ -37,7 +37,7 @@ export default function DevelopmentNews() {
   const [page, setPage] = useState(1);
   const [totalPage, setTotalPage] = useState(1);
   const [articles, setArticles] = useState<Article[]>([]);
-  const [showData, setShowData] = useState("2");
+  const [showData, setShowData] = useState("100");
   const [search, setSearch] = useState("");
   const [selectedCategories, setSelectedCategories] = useState<any>("");
   const [startDateValue, setStartDateValue] = useState({
@@ -63,7 +63,7 @@ export default function DevelopmentNews() {
     // loading();
     const req = {
       limit: showData,
-      page,
+      page: 1,
       search,
       categorySlug: Array.from(selectedCategories).join(","),
       sort: "desc",
@@ -80,6 +80,23 @@ export default function DevelopmentNews() {
     }
   }
 
+  const pembangunanArticles = articles.filter((article) =>
+    article.categories?.some(
+      (category) => category.title.toLowerCase() === "pembangunan"
+    )
+  );
+
+  // Pagination manually (front-end)
+  const itemsPerPage = 2;
+  const calculatedTotalPage = Math.ceil(
+    pembangunanArticles.length / itemsPerPage
+  );
+
+  const paginatedArticles = pembangunanArticles.slice(
+    (page - 1) * itemsPerPage,
+    page * itemsPerPage
+  );
+
   function truncateText(text: string, wordLimit: number) {
     const words = text.split(" ");
     if (words.length <= wordLimit) return text;
@@ -87,10 +104,10 @@ export default function DevelopmentNews() {
   }
 
   return (
-    <div className="bg-white grid grid-cols-1 lg:grid-cols-3 gap-6 py-10 px-4">
+    <div className="bg-white grid grid-cols-1 lg:grid-cols-3 gap-6 py-10 px-8">
       {/* Left Content */}
       <div className="lg:col-span-2 space-y-10">
-        {articles.map((item) => (
+        {paginatedArticles.map((item) => (
           <div key={item.id}>
             <Link
               className="flex flex-col md:flex-row gap-6"
@@ -105,7 +122,7 @@ export default function DevelopmentNews() {
                   className="object-cover rounded"
                 />
                 <span className="absolute top-3 left-3 bg-yellow-400 text-black px-3 py-1 text-xs font-bold">
-                  {item.categories[0]?.title || categoryLabel}
+                  {item.categories[0]?.title || "Pembangunan"}
                 </span>
               </div>
 
@@ -134,17 +151,51 @@ export default function DevelopmentNews() {
 
         {/* Pagination */}
         <div className="flex items-center justify-center gap-2 mt-6">
-          {Array.from({ length: totalPage }, (_, i) => (
+          {/* Previous Button */}
           <button
-              key={i}
+            onClick={() => setPage((prev) => Math.max(prev - 1, 1))}
-              onClick={() => setPage(i + 1)}
+            disabled={page === 1}
+            className="px-3 py-1 border"
+          >
+            &lt;
+          </button>
+
+          {Array.from({ length: calculatedTotalPage }, (_, i) => i + 1)
+            .filter((p) => {
+              return (
+                p === 1 ||
+                p === calculatedTotalPage ||
+                (p >= page - 1 && p <= page + 1)
+              );
+            })
+            .map((p, idx, arr) => {
+              const prev = arr[idx - 1];
+              const showEllipsis = prev && p - prev > 1;
+
+              return (
+                <span key={p} className="flex items-center">
+                  {showEllipsis && <span className="px-2">...</span>}
+                  <button
+                    onClick={() => setPage(p)}
                     className={`px-3 py-1 ${
-                page === i + 1 ? "bg-green-600 text-white" : "border"
+                      page === p ? "bg-green-600 text-white" : "border"
                     }`}
                   >
-              {i + 1}
+                    {p}
+                  </button>
+                </span>
+              );
+            })}
+
+          <button
+            onClick={() =>
+              setPage((prev) => Math.min(prev + 1, calculatedTotalPage))
+            }
+            disabled={page === calculatedTotalPage}
+            className="px-3 py-1 border"
+          >
+            &gt;
           </button>
-          ))}
         </div>
       </div>
 
@@ -202,7 +253,7 @@ export default function DevelopmentNews() {
           </div>
 
           <div className="mt-4 space-y-4">
-            {articles.map((item) => (
+            {articles.slice(0, 5).map((item) => (
               <div key={item.id} className="flex gap-3 items-center">
                 <Link
                   className="flex gap-3 items-center"

components/landing-page/development/header-development.tsx

@@ -36,7 +36,7 @@ export default function HeaderDevelopment() {
   const [page, setPage] = useState(1);
   const [totalPage, setTotalPage] = useState(1);
   const [articles, setArticles] = useState<Article[]>([]);
-  const [showData, setShowData] = useState("5");
+  const [showData, setShowData] = useState("100");
   const [search, setSearch] = useState("");
   const [selectedCategories, setSelectedCategories] = useState<any>("");
   const [startDateValue, setStartDateValue] = useState({
@@ -44,10 +44,10 @@ export default function HeaderDevelopment() {
     endDate: null,
   });
 
-  const pathname = usePathname(); // e.g., "/category/development"
+  const pathname = usePathname();
-  const pathSegments = pathname.split("/").filter(Boolean); // ["category", "development"]
+  const pathSegments = pathname.split("/").filter(Boolean);
 
-  const categorySlug = pathSegments[1]; // "development"
+  const categorySlug = pathSegments[1];
   const categoryLabel = slugToLabel(categorySlug);
 
   useEffect(() => {
@@ -75,6 +75,15 @@ export default function HeaderDevelopment() {
     }
   }
 
+  const pembangunanArticles = articles.filter((article) =>
+    article.categories?.some(
+      (category) => category.title.toLowerCase() === "pembangunan"
+    )
+  );
+
+  const mainArticle = pembangunanArticles[0];
+  const otherArticles = pembangunanArticles.slice(1, 3);
+
   return (
     <section className="max-w-7xl mx-auto bg-white">
       <div className="flex flex-col jus items-start bg-[#F2F4F3] w-full overflow-hidden py-6 px-8 gap-3">
@@ -101,30 +110,26 @@ export default function HeaderDevelopment() {
 
       <div className="pb-5">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
-          {articles.length > 0 && (
+          {mainArticle && (
             <div className="md:col-span-2 relative">
-              <Link href={`/detail/${articles[0]?.id}`}>
+              <Link href={`/detail/${mainArticle.id}`}>
                 <Image
-                  src={
+                  src={mainArticle.files?.[0]?.file_url || "/default-image.jpg"}
-                    articles[0]?.files?.[0]?.file_url ||
+                  alt={mainArticle.title}
-                    articles[0]?.files?.[0]?.file_url ||
-                    "/default-image.jpg"
-                  }
-                  alt={articles[0].title}
                   width={800}
                   height={500}
                   className="w-full h-full max-h-[460px] object-cover"
                 />
                 <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/50 to-transparent p-6 flex flex-col justify-end">
                   <span className="text-xs bg-yellow-400 text-black px-2 py-0.5 inline-block mb-2 uppercase w-[130px]">
-                    {articles[0].categories?.[0]?.title || "TANPA KATEGORI"}
+                    {mainArticle.categories?.[0]?.title || "TANPA KATEGORI"}
                   </span>
                   <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}
+                    {mainArticle.title}
                   </h2>
                   <p className="text-white text-xs">
-                    {articles[0].createdByName} -{" "}
+                    {mainArticle.createdByName} -{" "}
-                    {new Date(articles[0].createdAt).toLocaleDateString(
+                    {new Date(mainArticle.createdAt).toLocaleDateString(
                       "id-ID",
                       {
                         day: "numeric",
@@ -139,13 +144,13 @@ export default function HeaderDevelopment() {
           )}
 
           <div className="grid grid-rows-2 gap-2">
-            {articles.slice(1, 3).map((article, index) => (
+            {otherArticles.map((article, index) => (
               <div key={index} className="relative">
-                <Link href={`/detail/${article?.id}`}>
+                <Link href={`/detail/${article.id}`}>
                   <Image
                     src={
                       article.thumbnailUrl ||
-                      article?.files?.[0]?.file_url ||
+                      article.files?.[0]?.file_url ||
                       "/default-image.jpg"
                     }
                     alt={article.title}
@@ -155,7 +160,7 @@ export default function HeaderDevelopment() {
                   />
                   <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent p-4 flex flex-col justify-end">
                     <span className="text-xs bg-yellow-400 text-black px-2 py-0.5 inline-block uppercase w-[130px]">
-                      {article?.categories?.[0]?.title || "TANPA KATEGORI"}
+                      {article.categories?.[0]?.title || "TANPA KATEGORI"}
                     </span>
                     <h3 className="text-sm font-semibold text-white leading-snug mb-1">
                       {article.title}

components/landing-page/health/header-health.tsx

@@ -36,7 +36,7 @@ export default function HeaderHealth() {
   const [page, setPage] = useState(1);
   const [totalPage, setTotalPage] = useState(1);
   const [articles, setArticles] = useState<Article[]>([]);
-  const [showData, setShowData] = useState("5");
+  const [showData, setShowData] = useState("100");
   const [search, setSearch] = useState("");
   const [selectedCategories, setSelectedCategories] = useState<any>("");
   const [startDateValue, setStartDateValue] = useState({
@@ -75,6 +75,15 @@ export default function HeaderHealth() {
     }
   }
 
+  const healthArticles = articles.filter((article) =>
+    article.categories?.some(
+      (category) => category.title.toLowerCase() === "kesehatan"
+    )
+  );
+
+  const mainArticle = healthArticles[0];
+  const otherArticles = healthArticles.slice(1, 3);
+
   return (
     <section className="max-w-7xl mx-auto bg-white">
       <div className="flex flex-col items-start bg-[#F2F4F3] w-full overflow-hidden  py-6 px-8 gap-3">
@@ -97,30 +106,26 @@ export default function HeaderHealth() {
 
       <div className="pb-5">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
-          {articles.length > 0 && (
+          {mainArticle && (
             <div className="md:col-span-2 relative">
-              <Link href={`/detail/${articles[0]?.id}`}>
+              <Link href={`/detail/${mainArticle.id}`}>
                 <Image
-                  src={
+                  src={mainArticle.files?.[0]?.file_url || "/default-image.jpg"}
-                    articles[0]?.files?.[0]?.file_url ||
+                  alt={mainArticle.title}
-                    articles[0]?.files?.[0]?.file_url ||
-                    "/default-image.jpg"
-                  }
-                  alt={articles[0].title}
                   width={800}
                   height={500}
                   className="w-full h-full max-h-[460px] object-cover"
                 />
                 <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/50 to-transparent p-6 flex flex-col justify-end">
                   <span className="text-xs bg-yellow-400 text-black px-2 py-0.5 inline-block mb-2 uppercase w-[130px]">
-                    {articles[0].categories?.[0]?.title || "TANPA KATEGORI"}
+                    {mainArticle.categories?.[0]?.title || "TANPA KATEGORI"}
                   </span>
                   <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}
+                    {mainArticle.title}
                   </h2>
                   <p className="text-white text-xs">
-                    {articles[0].createdByName} -{" "}
+                    {mainArticle.createdByName} -{" "}
-                    {new Date(articles[0].createdAt).toLocaleDateString(
+                    {new Date(mainArticle.createdAt).toLocaleDateString(
                       "id-ID",
                       {
                         day: "numeric",
@@ -135,13 +140,13 @@ export default function HeaderHealth() {
           )}
 
           <div className="grid grid-rows-2 gap-2">
-            {articles.slice(1, 3).map((article, index) => (
+            {otherArticles.map((article, index) => (
               <div key={index} className="relative">
-                <Link href={`/detail/${article?.id}`}>
+                <Link href={`/detail/${article.id}`}>
                   <Image
                     src={
                       article.thumbnailUrl ||
-                      article?.files?.[0]?.file_url ||
+                      article.files?.[0]?.file_url ||
                       "/default-image.jpg"
                     }
                     alt={article.title}
@@ -151,7 +156,7 @@ export default function HeaderHealth() {
                   />
                   <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent p-4 flex flex-col justify-end">
                     <span className="text-xs bg-yellow-400 text-black px-2 py-0.5 inline-block uppercase w-[130px]">
-                      {article.categoryName || "TANPA KATEGORI"}
+                      {article.categories?.[0]?.title || "TANPA KATEGORI"}
                     </span>
                     <h3 className="text-sm font-semibold text-white leading-snug mb-1">
                       {article.title}
@@ -162,15 +167,6 @@ export default function HeaderHealth() {
             ))}
           </div>
         </div>
-
-        <div className="relative mt-10 mb-2 h-[188px] overflow-hidden flex items-center mx-8 border my-8">
-          <Image
-            src="/image-kolom.png"
-            alt="Berita Utama"
-            fill
-            className="object-contain"
-          />
-        </div>
       </div>
     </section>
   );

components/landing-page/health/health-news.tsx

@@ -0,0 +1,380 @@
+"use client";
+import { getListArticle } from "@/service/article";
+import Image from "next/image";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+import news from "../news";
+import Link from "next/link";
+
+type Article = {
+  id: number;
+  title: string;
+  description: string;
+  categoryName: string;
+  createdAt: string;
+  createdByName: string;
+  thumbnailUrl: string;
+  categories: {
+    title: string;
+  }[];
+  files: {
+    file_url: string;
+    file_alt: string;
+  }[];
+};
+
+const slugToLabel = (slug: string) => {
+  const mapping: Record<string, string> = {
+    development: "Pembangunan",
+    health: "Kesehatan",
+    "citizen-news": "Berita Warga",
+  };
+  return mapping[slug] || slug.charAt(0).toUpperCase() + slug.slice(1);
+};
+
+export default function HealthNews() {
+  const [activeTab, setActiveTab] = useState("comments");
+  const [page, setPage] = useState(1);
+  const [totalPage, setTotalPage] = useState(1);
+  const [articles, setArticles] = useState<Article[]>([]);
+  const [showData, setShowData] = useState("100");
+  const [search, setSearch] = useState("");
+  const [selectedCategories, setSelectedCategories] = useState<any>("");
+  const [startDateValue, setStartDateValue] = useState({
+    startDate: null,
+    endDate: null,
+  });
+
+  const pathname = usePathname();
+  const pathSegments = pathname.split("/").filter(Boolean);
+
+  const categorySlug = pathSegments[1];
+  const categoryLabel = slugToLabel(categorySlug);
+
+  useEffect(() => {
+    initState();
+  }, [page, showData, startDateValue, selectedCategories, activeTab]);
+
+  async function initState() {
+    let sortBy = "created_at";
+    if (activeTab === "comments") sortBy = "comment_count";
+    if (activeTab === "trending") sortBy = "view_count";
+
+    // loading();
+    const req = {
+      limit: showData,
+      page: 1,
+      search,
+      categorySlug: Array.from(selectedCategories).join(","),
+      sort: "desc",
+      isPublish: true,
+      sortBy: "created_at",
+    };
+
+    try {
+      const res = await getListArticle(req);
+      setArticles(res?.data?.data || []);
+      setTotalPage(res?.data?.meta?.totalPage || 1);
+    } finally {
+      // close();
+    }
+  }
+
+  const kesehatanArticles = articles.filter((article) =>
+    article.categories?.some(
+      (category) => category.title.toLowerCase() === "kesehatan"
+    )
+  );
+
+  const itemsPerPage = 2;
+  const calculatedTotalPage = Math.ceil(
+    kesehatanArticles.length / itemsPerPage
+  );
+
+  const paginatedArticles = kesehatanArticles.slice(
+    (page - 1) * itemsPerPage,
+    page * itemsPerPage
+  );
+
+  function truncateText(text: string, wordLimit: number) {
+    const words = text.split(" ");
+    if (words.length <= wordLimit) return text;
+    return words.slice(0, wordLimit).join(" ") + "...";
+  }
+
+  return (
+    <div className="bg-white grid grid-cols-1 lg:grid-cols-3 gap-6 py-10 px-8">
+      <div className="lg:col-span-2 space-y-10">
+        {paginatedArticles.map((item) => (
+          <div key={item.id}>
+            <Link
+              className="flex flex-col md:flex-row gap-6"
+              href={`/detail/${item?.id}`}
+            >
+              <div className="relative w-full md:w-1/2 h-64">
+                <Image
+                  src={item.thumbnailUrl || "/placeholder.png"}
+                  alt={item.title}
+                  fill
+                  className="object-cover rounded"
+                />
+                <span className="absolute top-3 left-3 bg-yellow-400 text-black px-3 py-1 text-xs font-bold">
+                  {item.categories[0]?.title || "Pembangunan"}
+                </span>
+              </div>
+
+              {/* Content */}
+              <div className="flex-1">
+                <h2 className="text-xl font-bold text-[#16324F] hover:text-green-600 cursor-pointer">
+                  {item.title}
+                </h2>
+                <div className="text-sm text-gray-600 mt-2">
+                  BY{" "}
+                  <span className="text-green-600 font-semibold">
+                    {item.createdByName || "Admin"}
+                  </span>{" "}
+                  • {new Date(item.createdAt).toLocaleDateString("id-ID")}
+                </div>
+                <p className="mt-3 text-gray-700">
+                  {truncateText(item.description, 20)}
+                </p>
+                <button className="mt-4 px-4 py-2 border border-gray-400 text-gray-700 hover:bg-black hover:text-white transition">
+                  READ MORE
+                </button>
+              </div>
+            </Link>
+          </div>
+        ))}
+
+        {/* Pagination */}
+        <div className="flex items-center justify-center gap-2 mt-6">
+          <button
+            onClick={() => setPage((prev) => Math.max(prev - 1, 1))}
+            disabled={page === 1}
+            className="px-3 py-1 border"
+          >
+            &lt;
+          </button>
+
+          {Array.from({ length: calculatedTotalPage }, (_, i) => i + 1)
+            .filter((p) => {
+              return (
+                p === 1 ||
+                p === calculatedTotalPage ||
+                (p >= page - 1 && p <= page + 1)
+              );
+            })
+            .map((p, idx, arr) => {
+              const prev = arr[idx - 1];
+              const showEllipsis = prev && p - prev > 1;
+
+              return (
+                <span key={p} className="flex items-center">
+                  {showEllipsis && <span className="px-2">...</span>}
+                  <button
+                    onClick={() => setPage(p)}
+                    className={`px-3 py-1 ${
+                      page === p ? "bg-green-600 text-white" : "border"
+                    }`}
+                  >
+                    {p}
+                  </button>
+                </span>
+              );
+            })}
+
+          <button
+            onClick={() =>
+              setPage((prev) => Math.min(prev + 1, calculatedTotalPage))
+            }
+            disabled={page === calculatedTotalPage}
+            className="px-3 py-1 border"
+          >
+            &gt;
+          </button>
+        </div>
+      </div>
+
+      <div className="space-y-6">
+        <div className="w-full h-[400px] relative">
+          <Image
+            src="/advertisiment.png"
+            alt="Advertisement"
+            fill
+            className="object-cover rounded"
+          />
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-2">Connect with us</h3>
+          <div className="h-1 w-20 bg-green-600 mb-4"></div>
+          <div className="grid grid-cols-3 gap-2">
+            <div className="bg-blue-500 text-white text-center p-3">
+              <p className="text-xl font-bold">138</p>
+              <p className="text-sm">Followers</p>
+            </div>
+            <div className="bg-red-600 text-white text-center p-3">
+              <p className="text-xl font-bold">205k</p>
+              <p className="text-sm">Subscribers</p>
+            </div>
+            <div className="bg-yellow-400 text-black text-center p-3">
+              <p className="text-xl font-bold">23.9k</p>
+              <p className="text-sm">Followers</p>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <div className="flex gap-4 border-b">
+            {["trending", "comments", "latest"].map((tab) => (
+              <button
+                key={tab}
+                className={`pb-2 capitalize ${
+                  activeTab === tab
+                    ? "border-b-2 border-green-600 text-green-600"
+                    : "text-gray-600"
+                }`}
+                onClick={() => {
+                  setPage(1);
+                  setActiveTab(tab);
+                }}
+              >
+                {tab}
+              </button>
+            ))}
+          </div>
+
+          <div className="mt-4 space-y-4">
+            {articles.slice(0, 5).map((item) => (
+              <div key={item.id} className="flex gap-3 items-center">
+                <Link
+                  className="flex gap-3 items-center"
+                  href={`/detail/${item?.id}`}
+                >
+                  <Image
+                    src={item.thumbnailUrl || "/no-image.jpg"}
+                    alt={item.title}
+                    width={80}
+                    height={60}
+                    className="object-cover rounded"
+                  />
+                  <div>
+                    <h3 className="font-semibold text-sm">{item.title}</h3>
+                    <p className="text-xs text-gray-500">
+                      {new Date(item.createdAt).toLocaleDateString()}
+                    </p>
+                  </div>
+                </Link>
+              </div>
+            ))}
+          </div>
+          <div className="">
+            <h2 className="text-sm border-b-2 border-gray-300 font-bold mb-4">
+              Recommended
+            </h2>
+            <div className=" w-full">
+              <div className="relative w-full aspect-video mb-5">
+                <Link href={`/detail/${articles[0]?.id}`}>
+                  <Image
+                    src={
+                      articles[0]?.thumbnailUrl ||
+                      articles[0]?.files?.[0]?.file_url ||
+                      "/default-image.jpg"
+                    }
+                    alt={"articles[0]?.title"}
+                    fill
+                    sizes="(max-width: 1024px) 100vw, 33vw"
+                    className="object-cover"
+                  />
+                  <div className="absolute inset-0 bg-black/30" />
+                  <div className="absolute bottom-0.5 left-2 text-white">
+                    <h3 className=" font-semibold text-base mb-1">
+                      {articles[0]?.title}
+                    </h3>
+                    <p className=" text-xs  mb-2 flex items-center gap-2">
+                      <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",
+                        {
+                          day: "numeric",
+                          month: "long",
+                          year: "numeric",
+                        }
+                      )}
+                    </p>
+                  </div>
+                </Link>
+              </div>
+
+              <div className="space-y-5">
+                {articles?.slice(1, 4).map((article, index) => (
+                  <div key={index}>
+                    <Link
+                      className="flex gap-3"
+                      href={`/detail/${article?.id}`}
+                    >
+                      <div className="relative w-[120px] h-[86px] shrink-0">
+                        <Image
+                          src={
+                            article?.thumbnailUrl ||
+                            article?.files?.[0]?.file_url ||
+                            "/default-image.jpg"
+                          }
+                          alt={"article?.title"}
+                          fill
+                          className="object-cover"
+                        />
+                      </div>
+                      <div>
+                        <h4 className="text-sm font-semibold mb-3">
+                          {article?.title}
+                        </h4>
+                        <p className="text-xs text-gray-500 flex gap-2 items-center">
+                          <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",
+                            {
+                              day: "numeric",
+                              month: "long",
+                              year: "numeric",
+                            }
+                          )}
+                        </p>
+                      </div>
+                    </Link>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/landing-page/news.tsx

@@ -26,7 +26,7 @@ export default function Beranda() {
   const [page, setPage] = useState(1);
   const [totalPage, setTotalPage] = useState(1);
   const [posts, setPosts] = useState<postsData[]>([]);
-  const [showData, setShowData] = useState("5");
+  const [showData, setShowData] = useState("100");
   const [search, setSearch] = useState("");
   const [selectedCategories, setSelectedCategories] = useState<any>("");
   const [startDateValue, setStartDateValue] = useState({
@@ -63,41 +63,121 @@ export default function Beranda() {
       <div className="flex flex-col md:flex-row md:items-center md:justify-between  mb-8 pb-1 gap-2 bg-white border-b-2  pt-2 ">
         <h2 className="text-sm  font-bold">Pembangunan</h2>
         <div className="flex flex-wrap gap-2 text-xs text-gray-600">
+          <Link href={"/category/development"}>
             <button className="hover:text-green-500">ALL</button>
-          <button className="hover:text-green-500">Pembangunan</button>
+          </Link>
+          <button className="hover:text-green-500 text-green-500">
+            Pembangunan
+          </button>
         </div>
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10 pt-4 ">
-        {posts.slice(1, 5).map((posts, index) => (
+        {posts
+          .filter((post) =>
+            post.categories?.some(
+              (category) => category.title.toLowerCase() === "pembangunan"
+            )
+          )
+          .slice(0, 6) // Ambil 4 artikel pertama setelah difilter
+          .map((post, index) => (
             <div key={index} className="bg-white overflow-hidden">
-            <Link href={`/detail/${posts?.id}`}>
+              <Link href={`/detail/${post?.id}`}>
                 <div className="relative">
                   <Image
                     src={
-                    posts.thumbnailUrl ||
+                      post.thumbnailUrl ||
-                    posts?.files?.[0]?.file_url ||
+                      post?.files?.[0]?.file_url ||
                       "/default-image.jpg"
                     }
-                  alt={posts.title}
+                    alt={post.title}
                     width={500}
                     height={300}
                     className="w-full h-52 md:h-56 object-cover"
                   />
                   <div className="absolute inset-0 bg-black/20" />
                   <span className="absolute top-1 left-1 bg-[#FFC600] text-black text-[11px] px-2 py-1 uppercase">
-                  {posts.categories?.[0]?.title}
+                    {post.categories?.[0]?.title}
                   </span>
                   <div className="p-3 md:p-2 absolute bottom-1 left-1 text-white">
                     <h3 className="font-bold text-sm md:text-base leading-snug mb-1">
-                    {posts.title}
+                      {post.title}
                     </h3>
 
                     <div className="text-xs flex items-center gap-2">
                       <Clock className="w-3 h-3" />
-                    <span className="  ">
+                      <span>
-                      {posts.createdByName} -{" "}
+                        {post.createdByName} -{" "}
-                      {new Date(posts.createdAt).toLocaleDateString("id-ID", {
+                        {new Date(post.createdAt).toLocaleDateString("id-ID", {
+                          day: "numeric",
+                          month: "long",
+                          year: "numeric",
+                        })}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </Link>
+            </div>
+          ))}
+      </div>
+      <div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
+        <Image
+          src="/image-kolom.png"
+          alt="Berita Utama"
+          fill
+          className="object-cover"
+        />
+      </div>
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between  mb-8 pb-1 gap-2 bg-white border-b-2  pt-2 ">
+        <h2 className="text-sm  font-bold">Kesehatan</h2>
+        <div className="flex flex-wrap gap-2 text-xs text-gray-600">
+          <Link href={"/category/health"}>
+            <button className="hover:text-green-500">ALL</button>
+          </Link>
+          <button className="hover:text-green-500 text-green-500">
+            Kesehatan
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10 pt-4 ">
+        {posts
+          .filter((post) =>
+            post.categories?.some(
+              (category) => category.title.toLowerCase() === "kesehatan"
+            )
+          )
+          .slice(0, 6) // Ambil 4 artikel pertama setelah difilter
+          .map((post, index) => (
+            <div key={index} className="bg-white overflow-hidden">
+              <Link href={`/detail/${post?.id}`}>
+                <div className="relative">
+                  <Image
+                    src={
+                      post.thumbnailUrl ||
+                      post?.files?.[0]?.file_url ||
+                      "/default-image.jpg"
+                    }
+                    alt={post.title}
+                    width={500}
+                    height={300}
+                    className="w-full h-52 md:h-56 object-cover"
+                  />
+                  <div className="absolute inset-0 bg-black/20" />
+                  <span className="absolute top-1 left-1 bg-[#FFC600] text-black text-[11px] px-2 py-1 uppercase">
+                    {post.categories?.[0]?.title}
+                  </span>
+                  <div className="p-3 md:p-2 absolute bottom-1 left-1 text-white">
+                    <h3 className="font-bold text-sm md:text-base leading-snug mb-1">
+                      {post.title}
+                    </h3>
+
+                    <div className="text-xs flex items-center gap-2">
+                      <Clock className="w-3 h-3" />
+                      <span>
+                        {post.createdByName} -{" "}
+                        {new Date(post.createdAt).toLocaleDateString("id-ID", {
                           day: "numeric",
                           month: "long",
                           year: "numeric",