"use client"; import { getListArticle } from "@/service/article"; import Image from "next/image"; import Link from "next/link"; import { useEffect, useState } from "react"; const data1 = { main: { image: "/jumbo.png", category: "BERANDA", title: "Industri Animasi Indonesia Melesat: “Jumbo” Masuk Daftar Film Terlaris Sepanjang Masa", author: "christine natalia", date: "10 MARET 2025", comments: 0, excerpt: "Mikulnews.com - Industri film animasi Indonesia menunjukkan kemajuan signifikan dalam beberapa tahun terakhir. Tak hanya sukses dari sisi kreativitas dan produksi,...", }, left: [ { image: "/jumbo.png", category: "BERANDA", title: "Industri Animasi Indonesia Melesat: “Jumbo” Masuk Daftar Film Terlaris Sepanjang Masa", author: "christine natalia", date: "10 MARET 2025", comments: 0, excerpt: "Mikulnews.com - Industri film animasi Indonesia menunjukkan kemajuan signifikan dalam beberapa tahun terakhir. Tak hanya sukses dari sisi kreativitas dan produksi,...", }, ], topRight: [ { image: "/bimantoro.png", category: "BERANDA", title: "Bimantoro Wiyono Apresiasi Keberhasilan Atur Mudik dan Arus Balik Lebaran 2025", author: "SALMA HN", date: "10 MARET 2025", comments: 0, excerpt: "Jakarta - Rekrutmen Bersama BUMN (RBB BUMN) 2025 kini resmi dibuka mulai hari ini, Senin, 10 Maret 2025. Pelamar yang...", }, ], topRightMain: [ { image: "/bimantoro.png", category: "BERANDA", title: "Bimantoro Wiyono Apresiasi Keberhasilan Atur Mudik dan Arus Balik Lebaran 2025", author: "SALMA HN", date: "10 MARET 2025", comments: 0, excerpt: "Jakarta - Rekrutmen Bersama BUMN (RBB BUMN) 2025 kini resmi dibuka mulai hari ini, Senin, 10 Maret 2025. Pelamar yang...", }, { image: "/cpns.jpg", category: "BERANDA", title: "Polri Dapat Meningkatkan Transparansi: Paparan Fathul Ulum tentang Keterbukaan Informasi", author: "SALMA HN", date: "7 MARET 2025", comments: 0, excerpt: "JAKARTA - Program Rekrutmen Bersama BUMN (RBB) 2025 resmi dibuka pada Jumat...", }, { image: "/bpnt.jpg", category: "BERANDA", title: "Tutorial Cek Status Penerima BPNT 2025 Melalui HP", author: "SALMA HN", date: "7 MARET 2025", comments: 0, excerpt: "JAKARTA - Program Rekrutmen Bersama BUMN (RBB) 2025 resmi dibuka pada Jumat...", }, ], bottomMid: [ { image: "/vvip.jpg", title: "Pembangunan Bandara VVIP IKN Berjalan Lancar, Ditargetkan Rampung Maret 2025", date: "6 MARET 2025", }, { image: "/pmk.png", title: "PMK 11/2025 Ubah Ketentuan PPN Besaran Tertentu, Ini Rinciannya", date: "11 FEBRUARI 2025", }, { image: "/cpns.jpg", title: "Hasil Kelulusan CPNS 2024 Diumumkan, Simak Arti Kode dan Cara Mengecek Hasilnya", date: "17 FEBRUARI 2025", }, ], bottomRightData: [ { image: "/iums.png", category: "INTERNASIONAL", title: "IUMS Serukan Boikot Produk Pendukung Israel, PMII Rilis Daftar Merek Terkait", author: "christine natalia", date: "10 MARET 2025", comments: 0, excerpt: "Mikulnews.com - Persatuan Cendekiawan Muslim Internasional atau International Union of Muslim Scholars (IUMS) yang berbasis di Qatar mengeluarkan fatwa terkait konflik...", }, { image: "/jateng.png", category: "INTERNASIONAL", title: "Tiga Polisi Jaga Tahanan di Polda Jateng Ditahan Akibat Dugaan Pungli", author: "christine natalia", date: "10 MARET 2025", comments: 0, excerpt: "Mikulnews.com - Persatuan Cendekiawan Muslim Internasional atau International Union of Muslim Scholars (IUMS) yang berbasis di Qatar mengeluarkan fatwa terkait konflik...", }, { image: "/perang.png", category: "INTERNASIONAL", title: "Perang Dagang AS-China Meningkat, Indonesia Terancam Tekanan Ekonomi Ganda", author: "christine natalia", date: "10 MARET 2025", comments: 0, excerpt: "Mikulnews.com - Persatuan Cendekiawan Muslim Internasional atau International Union of Muslim Scholars (IUMS) yang berbasis di Qatar mengeluarkan fatwa terkait konflik...", }, { image: "/gaza.png", category: "INTERNASIONAL", title: "Fatwa Ulama Dunia Serukan Blokade Total Terhadap Israel Demi Bela Gaza", author: "christine natalia", date: "10 MARET 2025", comments: 0, excerpt: "Mikulnews.com - Persatuan Cendekiawan Muslim Internasional atau International Union of Muslim Scholars (IUMS) yang berbasis di Qatar mengeluarkan fatwa terkait konflik...", }, ], bottomRight: [ { image: "/iums.png", category: "INTERNASIONAL", title: "IUMS Serukan Boikot Produk Pendukung Israel, PMII Rilis Daftar Merek Terkait", author: "christine natalia", date: "10 MARET 2025", comments: 0, excerpt: "Mikulnews.com - Persatuan Cendekiawan Muslim Internasional atau International Union of Muslim Scholars (IUMS) yang berbasis di Qatar mengeluarkan fatwa terkait konflik...", }, ], }; const data = { leftMain: data1.main, leftList: data1.left, bottomRightList: data1.bottomRightData, centerMain: data1.topRight[0], centerList: data1.bottomMid.slice(0, 3), rightMain: data1.topRightMain[0], rightList: data1.bottomRight.slice(0, 3), }; type Article = { id: number; title: string; description: string; categoryName: string; publishedAt: string; createdAt: string; createdByName: string; slug: string; customCreatorName: string; thumbnailUrl: string; categories: { title: string; }[]; files: { fileUrl: string; file_alt: string; }[]; }; const ITEMS_PER_PAGE = 2; export default function LatestandPopular() { const [page, setPage] = useState(1); const [totalPage, setTotalPage] = useState(1); const [articles, setArticles] = useState([]); const [popularPosts, setPopularPosts] = useState([]); const [showData, setShowData] = useState("5"); const [search, setSearch] = useState(""); const [selectedCategories, setSelectedCategories] = useState(""); const [startDateValue, setStartDateValue] = useState({ startDate: null, endDate: null, }); const [currentPage, setCurrentPage] = useState(1); // useEffect(() => { // const fetchData = async () => { // const res = await getListArticle(); // ganti dengan fungsi fetch-mu // setArticles(res.data || []); // }; // fetchData(); // }, []); 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); setArticles(res?.data?.data || []); setTotalPage(res?.data?.meta?.totalPage || 1); setPopularPosts(res?.data?.data || []); } finally { // close(); } } const totalPages = Math.ceil(articles.length / ITEMS_PER_PAGE); const startIndex = (currentPage - 1) * ITEMS_PER_PAGE; const currentArticles = articles.slice( startIndex, startIndex + ITEMS_PER_PAGE, ); return (

Latest Post

{currentArticles.map((article, index) => (
{article?.title
{article?.categories?.map((cat) => cat.title).join(", ")}

{article.title}

{article.description.length > 100 ? `${article.description.slice(0, 100)}...` : article.description}

by{" "} {article?.customCreatorName || article.createdByName} {" "} |{" "}
{/* Clock Icon + Date */} {" "} {new Date(article?.publishedAt) .toLocaleString("id-ID", { day: "numeric", month: "long", year: "numeric", hour: "2-digit", minute: "2-digit", hour12: false, timeZone: "Asia/Jakarta", }) .replace("pukul ", "")}{" "} WIB {" "} 0
))}
Berita Utama
{currentPage} / {totalPages}
); }