web-mikul-news/components/landing-page/news.tsx

"use client";
import { getListArticle } from "@/service/article";
import { Clock } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";

type postsData = {
  id: number;
  title: string;
  description: string;
  categoryName: string;
  createdAt: string;
  createdByName: string;
  thumbnailUrl: string;
  categories: {
    title: string;
  }[];
  files: {
    fileUrl: string;
    file_alt: string;
  }[];
};

export default function Beranda() {
  const [page, setPage] = useState(1);
  const [totalPage, setTotalPage] = useState(1);
  const [posts, setPosts] = useState<postsData[]>([]);
  const [showData, setShowData] = useState("100");
  const [search, setSearch] = useState("");
  const [selectedCategories, setSelectedCategories] = useState<any>("");
  const [startDateValue, setStartDateValue] = useState({
    startDate: null,
    endDate: null,
  });

  useEffect(() => {
    initState();
  }, [page, showData, startDateValue, selectedCategories]);

  async function initState() {
    // loading();
    const req = {
      limit: showData,
      page,
      search,
      categorySlug: Array.from(selectedCategories).join(","),
      sort: "desc",
      isPublish: true,
      sortBy: "created_at",
    };

    try {
      const res = await getListArticle(req);
      setPosts(res?.data?.data || []);
      setTotalPage(res?.data?.meta?.totalPage || 1);
    } finally {
      // close();
    }
  }
  return (
    <section className="max-w-7xl mx-auto px-10 py-5 bg-white">
      <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>
          </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
          .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/${post?.id}`}>
                <div className="relative">
                  <Image
                    src={
                      post.thumbnailUrl ||
                      post?.files?.[0]?.fileUrl ||
                      "/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",
                        })}
                      </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]?.fileUrl ||
                      "/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",
                        })}
                      </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>
    </section>
  );
}