248 lines
7.3 KiB
TypeScript
248 lines
7.3 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import PublicationKlFilter from "./publication-filter";
|
||
import { Button } from "@/components/ui/button";
|
||
import { label } from "framer-motion/client";
|
||
import image from "next/image";
|
||
import { title } from "process";
|
||
import category from "../landing-page/category";
|
||
|
||
const dummyData = [
|
||
{
|
||
id: 1,
|
||
image: "/edy.png",
|
||
label: "MPR",
|
||
category: "GIAT PIMPINAN",
|
||
date: "06 Juli 2025 14:00 WIB",
|
||
title:
|
||
"Harapan Eddy Soeparno untuk Calon Dubes: Menjadi Jubir EBT dan Ekonomi",
|
||
description:
|
||
"Komisi I DPR RI menggelar fit and proper test calon duta besar...",
|
||
},
|
||
{
|
||
id: 2,
|
||
image: "/bukit.png",
|
||
label: "POLRI",
|
||
category: "GIAT HUMANIS POLRI",
|
||
date: "02 Feb 2024 14:00 WIB",
|
||
title:
|
||
"Sedikit Demi Sedikit Lama-lama Jadi Bukit: Infaq Rutin untuk Ringankan...",
|
||
description:
|
||
"Paser - Satuan Brimob Polda Kaltim Kompi 2 Batalyon C Pelopor...",
|
||
},
|
||
{
|
||
id: 3,
|
||
image: "/orientasi.png",
|
||
label: "KEJAKSAAN AGUNG",
|
||
category: "KEGIATAN",
|
||
date: "02 Feb 2024 14:00 WIB",
|
||
title: "Penekanan Pencegahan Korupsi Dalam Kegiatan Orientasi Kepemimpinan",
|
||
description: "Jakarta - Jaksa Agung Republik Indonesia, ST Burhanuddin...",
|
||
},
|
||
{
|
||
id: 4,
|
||
image: "/ketua-dpr.png",
|
||
label: "DPR",
|
||
category: "GIAT PIMPINAN",
|
||
date: "06 Juli 2025 14:00 WIB",
|
||
title: "Ketua DPR: Semoga Danantara Bisa Gerakkan Ekonomi Nasional",
|
||
description:
|
||
"PARLEMENTARIA, Jakarta - Ketua DPR RI Puan Maharani menghadiri peluncuran Badan",
|
||
},
|
||
{
|
||
id: 5,
|
||
image: "/orientasi.png",
|
||
label: "KPK",
|
||
category: "GIAT HUMANIS POLRI",
|
||
date: "02 Feb 2024 14:00 WIB",
|
||
title:
|
||
"Penekanan Pencegahan Korupsi Dalam Kegiatan Orientasi Kepemimpinan Kepala Daerah dan Wakil Kepala Daerah Tahun 2025",
|
||
description:
|
||
"Komisi Pemberantasan Korupsi (KPK) terus menanamkan nilai-nilai integritas sejak usia di",
|
||
},
|
||
{
|
||
id: 6,
|
||
image: "/dody.png",
|
||
label: "PUPR",
|
||
category: "KEGIATAN",
|
||
date: "02 Feb 2024 14:00 WIB",
|
||
title:
|
||
"Pastikan Kesiapan Mudik Lebaran 2025, Menteri Dody Tinjau Jalur Pantura Jateng",
|
||
description:
|
||
"Jakarta – Menteri Pekerjaan Umum Dody Hanggodo meninjau perbaikan jalan di Jalur P",
|
||
},
|
||
{
|
||
id: 7,
|
||
image: "/donor.png",
|
||
label: "MAHKAMAH AGUNG",
|
||
category: "GIAT PIMPINAN",
|
||
date: "06 Juli 2025 14:00 WIB",
|
||
title:
|
||
"KETUA MA: DONOR DARAH ADALAH KONTRIBUSI NYATA IKAHI BAGI KEHIDUPAN MANUSIA",
|
||
description:
|
||
"Jakarta – Humas: Ketua Mahkamah Agung (MA) Prof. Dr. H. Sunarto, S.H., M.H. membuk",
|
||
},
|
||
{
|
||
id: 8,
|
||
image: "/wamen.png",
|
||
label: "PUPR",
|
||
category: "GIAT HUMANIS POLRI",
|
||
date: "02 Feb 2024 14:00 WIB",
|
||
title:
|
||
"Bertemu Vice Minister for Engineering Affairs MLIT, Wamen Diana Bahas Penguatan Kerja Sama Infrastruktur dengan Jepang",
|
||
description:
|
||
"Jakarta - Wakil Menteri Pekerjaan Umum (PU) Diana Kusumastuti bertemu dengan Vice Mini",
|
||
},
|
||
{
|
||
id: 9,
|
||
image: "/korupsi.png",
|
||
label: "KPK",
|
||
category: "KEGIATAN",
|
||
date: "02 Feb 2024 14:00 WIB",
|
||
title:
|
||
"KPK-UNODC Gelar Pelatihan, Perkuat Investigasi Korupsi Lintas Negara",
|
||
description:
|
||
"Korupsi lintas negara dan pencucian uang masih menjadi tantangan besar bagi aparat penegak",
|
||
},
|
||
{
|
||
id: 10,
|
||
image: "/bansos.jpg",
|
||
label: "POLRI",
|
||
category: "LIPUTAN KEGIATAN",
|
||
date: "02 Feb 2024 14:00 WIB",
|
||
title: "Kapolri dan Panglima TNI Bagikan Ribuan Bansos Jelang Ramadan",
|
||
description:
|
||
"Jakarta. Kapolri Jenderal Polisi Drs. Listyo Sigit Prabowo memberikan bantuan sosial dal...",
|
||
},
|
||
{
|
||
id: 11,
|
||
image: "/pengecer.jpg",
|
||
label: "POLRI",
|
||
category: "GIAT PIMPINAN",
|
||
date: "02 Feb 2024 14:00 WIB",
|
||
title:
|
||
"Personel Diterjunkan Hingga ke Pengecer, Jamin Stabilnya Harga Sembako Saat Ramadan",
|
||
description:
|
||
"Jakarta – Kapolri Jenderal Listyo Sigit Prabowo menegaskan komitmen Polri dalam...",
|
||
},
|
||
{
|
||
id: 12,
|
||
image: "/odgj.jpg",
|
||
label: "POLRI",
|
||
category: "UNGKAP KASUS",
|
||
date: "02 Feb 2024 14:00 WIB",
|
||
title:
|
||
"Heroik, Petugas Patroli Selamatkan ODGJ Nyaris Terlindas di Tol Japek",
|
||
description:
|
||
"Bekasi– Anggota Patroli Jalan Raya (PJR) Cikampek, Aipda Agus Salim, berhasil menyel....",
|
||
},
|
||
{
|
||
id: 13,
|
||
image: "/madiun.jpg",
|
||
label: "POLRI",
|
||
category: "LIPUTAN KEGIATAN",
|
||
date: "02 Feb 2024 14:00 WIB",
|
||
title:
|
||
"Dukung Ketahanan Pangan, Mahasiswa Madiun Terima Penghargaan dari Kapolri",
|
||
description:
|
||
"Madiun - Dalam rangka mendukung program Ketahanan Pangan, Polri secara serentak mel..",
|
||
},
|
||
{
|
||
id: 14,
|
||
image: "/ramadhan.jpg",
|
||
label: "POLRI",
|
||
category: "GIAT HUMAS POLRI",
|
||
date: "02 Feb 2024 14:00 WIB",
|
||
title: "Harga Pangan Sesuai HET Saat Ramadan",
|
||
description:
|
||
"Jakarta – Kapolri Jenderal Polisi Listyo Sigit Prabowo menghadiri rapat koordinasi (rakor) t",
|
||
},
|
||
{
|
||
id: 15,
|
||
image: "/one-way.png",
|
||
label: "POLRI",
|
||
category: "LIPUTAN KEGIATAN",
|
||
date: "02 Feb 2024 14:00 WIB",
|
||
title:
|
||
"Korlantas Matangkan Kesiapan Rekayasa One Way di Tol Jateng untuk Mudik Lebaran 2025",
|
||
description:
|
||
"Jakarta. Kakorlantas Irjen Pol. Agus Suryo Nugroho berkoordinasi dengan Polda Jateng d...",
|
||
},
|
||
{
|
||
id: 16,
|
||
image: "/tni.jpg",
|
||
label: "POLRI",
|
||
category: "LIPUTAN KEGIATAN",
|
||
date: "02 Feb 2024 14:00 WIB",
|
||
title:
|
||
" Pasca Putusan MK, Personel Solid Bersinergi Jaga Keamanan di Puncak Jaya",
|
||
description:
|
||
"JPuncak Jaya – Personel gabungan TNI-Polri terus solid bersinergi guna menghadirkan kea",
|
||
},
|
||
{
|
||
id: 17,
|
||
image: "/kediri.jpg",
|
||
label: "POLRI",
|
||
category: "LIPUTAN KEGIATAN",
|
||
date: "02 Feb 2024 14:00 WIB",
|
||
title:
|
||
" Kediri– Kakorlantas Polri Irjen Pol Agus Suryonugroho menerima paparan dari Kasatla",
|
||
description:
|
||
"JPuncak Jaya – Personel gabungan TNI-Polri terus solid bersinergi guna menghadirkan kea",
|
||
},
|
||
];
|
||
|
||
const itemsPerPage = 9;
|
||
|
||
type PublicationCardGridProps = {
|
||
selectedCategory: string;
|
||
};
|
||
|
||
export default function PublicationCardGrid({
|
||
selectedCategory,
|
||
}: PublicationCardGridProps) {
|
||
const [currentPage, setCurrentPage] = useState(1);
|
||
|
||
const filteredData =
|
||
selectedCategory === "SEMUA"
|
||
? dummyData
|
||
: dummyData.filter((item) => item.label === selectedCategory);
|
||
|
||
const itemsPerPage = 9;
|
||
const totalPages = Math.ceil(filteredData.length / itemsPerPage);
|
||
|
||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||
const endIndex = startIndex + itemsPerPage;
|
||
const currentItems = filteredData.slice(startIndex, endIndex);
|
||
|
||
const goToPage = (page: number) => {
|
||
setCurrentPage(page);
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* Grid Card */}
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{currentItems.map((item, idx) => (
|
||
<PublicationKlFilter key={idx} {...item} />
|
||
))}
|
||
</div>
|
||
|
||
{/* Pagination */}
|
||
<div className="flex justify-center gap-2">
|
||
{Array.from({ length: totalPages }, (_, i) => (
|
||
<Button
|
||
key={i}
|
||
variant={currentPage === i + 1 ? "default" : "outline"}
|
||
size="sm"
|
||
onClick={() => goToPage(i + 1)}
|
||
>
|
||
{i + 1}
|
||
</Button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|