104 lines
3.2 KiB
TypeScript
104 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { useState } from "react";
|
|
|
|
const allArticles = Array.from({ length: 20 }, (_, i) => ({
|
|
title: [
|
|
"Operasi Keselamatan Musi 2024: Ditlantas Polda Sumsel Himbau Keselamatan de...",
|
|
"Gelar Operasi Semeru, Kanit Lantas Gencarkan Sosialisasi Keselamatan Berken...",
|
|
"Kapolsek Sooko sambang dunia pendidikan berikan himbauan kamtibmas di MTS S...",
|
|
"PATROLI DIALOGIS POLSEK GONDANG TINGKATKAN KEWASPADAAN SEKITAR KEPADA SATPAM",
|
|
][i % 4],
|
|
date: "07-03-2024, 07:55",
|
|
image: `/images/article${(i % 4) + 1}.jpg`,
|
|
}));
|
|
|
|
const articlesPerPage = 4;
|
|
const totalPages = Math.ceil(allArticles.length / articlesPerPage);
|
|
|
|
export default function DashboardRecentArticles() {
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
|
|
const paginatedArticles = allArticles.slice(
|
|
(currentPage - 1) * articlesPerPage,
|
|
currentPage * articlesPerPage
|
|
);
|
|
|
|
return (
|
|
<div className="p-4 bg-white rounded-lg shadow-md">
|
|
{/* Header */}
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="font-semibold text-base">Recent Article</h2>
|
|
<button className="px-4 py-1 border border-blue-500 text-blue-500 rounded-full hover:bg-blue-50 text-sm">
|
|
Buat Article
|
|
</button>
|
|
</div>
|
|
|
|
{/* Article List */}
|
|
<ul className="space-y-4">
|
|
{paginatedArticles.map((article, index) => (
|
|
<li key={index} className="flex items-start space-x-3">
|
|
<Image
|
|
src={article.image}
|
|
alt={article.title}
|
|
className="w-16 h-16 rounded object-cover"
|
|
/>
|
|
<div className="flex-1">
|
|
<h3 className="text-sm font-medium leading-snug line-clamp-2">
|
|
{article.title}
|
|
</h3>
|
|
<p className="text-xs text-gray-500 mt-1">{article.date}</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{/* Pagination */}
|
|
<div className="flex items-center justify-center mt-6 space-x-1 text-sm">
|
|
<button
|
|
onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
|
|
className="px-2 py-1 rounded text-gray-600"
|
|
disabled={currentPage === 1}
|
|
>
|
|
<
|
|
</button>
|
|
|
|
{[...Array(totalPages).keys()].slice(0, 5).map((_, idx) => {
|
|
const page = idx + 1;
|
|
return (
|
|
<button
|
|
key={page}
|
|
onClick={() => setCurrentPage(page)}
|
|
className={`px-3 py-1 rounded-full ${
|
|
currentPage === page
|
|
? "bg-blue-600 text-white"
|
|
: "bg-gray-100 text-gray-700"
|
|
}`}
|
|
>
|
|
{page}
|
|
</button>
|
|
);
|
|
})}
|
|
|
|
<span className="px-2 py-1 text-gray-400">...</span>
|
|
|
|
<button
|
|
onClick={() => setCurrentPage(totalPages)}
|
|
className="px-3 py-1 bg-gray-100 text-gray-700 rounded-full"
|
|
>
|
|
{totalPages}
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setCurrentPage((p) => Math.min(p + 1, totalPages))}
|
|
className="px-2 py-1 rounded text-gray-600"
|
|
disabled={currentPage === totalPages}
|
|
>
|
|
>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|