103 lines
3.6 KiB
TypeScript
103 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
interface PaginationProps {
|
|
totalPages: number;
|
|
currentPage: number;
|
|
onPageChange: (page: number) => void;
|
|
}
|
|
|
|
export default function ClientPagination({ totalPages, currentPage, onPageChange }: PaginationProps) {
|
|
if (totalPages <= 1) return null;
|
|
|
|
const getPaginationItems = () => {
|
|
const siblingCount = 2;
|
|
const totalPageNumbers = siblingCount * 2 + 3;
|
|
|
|
if (totalPages <= totalPageNumbers) {
|
|
return Array.from({ length: totalPages }, (_, i) => i + 1);
|
|
}
|
|
|
|
const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
|
|
const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
|
|
|
|
const showLeftDots = leftSiblingIndex > 2;
|
|
const showRightDots = rightSiblingIndex < totalPages - 1;
|
|
|
|
if (!showLeftDots && showRightDots) {
|
|
const leftItemCount = 3 + 2 * siblingCount;
|
|
const leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);
|
|
return [...leftRange, '...', totalPages];
|
|
}
|
|
|
|
if (showLeftDots && !showRightDots) {
|
|
const rightItemCount = 3 + 2 * siblingCount;
|
|
const rightRange = Array.from(
|
|
{ length: rightItemCount },
|
|
(_, i) => totalPages - rightItemCount + i + 1
|
|
);
|
|
return [1, '...', ...rightRange];
|
|
}
|
|
|
|
if (showLeftDots && showRightDots) {
|
|
const middleRange = Array.from(
|
|
{ length: rightSiblingIndex - leftSiblingIndex + 1 },
|
|
(_, i) => leftSiblingIndex + i
|
|
);
|
|
return [1, '...', ...middleRange, '...', totalPages];
|
|
}
|
|
|
|
return [];
|
|
};
|
|
|
|
const pages = getPaginationItems();
|
|
|
|
return (
|
|
<div className="flex justify-center items-center gap-2 mt-10 mb-6 flex-wrap" dir="rtl">
|
|
{/* دکمه قبلی */}
|
|
<button
|
|
onClick={() => onPageChange(currentPage - 1)}
|
|
disabled={currentPage <= 1}
|
|
className="px-3 cursor-pointer py-2 md:px-4 h-10 flex items-center justify-center rounded-xl disabled:opacity-40 disabled:cursor-not-allowed bg-[#1A2332] text-gray-300 hover:bg-[#1A2332]/80 hover:text-white transition-all duration-300 text-sm md:text-base font-medium"
|
|
>
|
|
قبلی
|
|
</button>
|
|
|
|
{/* شماره صفحات */}
|
|
<div className="flex items-center gap-1.5 md:gap-2">
|
|
{pages.map((page, index) => {
|
|
if (page === '...') {
|
|
return (
|
|
<span key={`dots-${index}`} className="px-1 md:px-2 py-2 text-gray-400 font-bold tracking-widest">
|
|
...
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
key={index}
|
|
onClick={() => onPageChange(page as number)}
|
|
className={`min-w-[40px] cursor-pointer h-10 flex items-center justify-center rounded-xl transition-all duration-300 text-sm md:text-base font-medium ${
|
|
currentPage === page
|
|
? 'bg-[#ffb900] text-[#1A2332] font-bold shadow-lg shadow-[#ffb900]/30 scale-105' // استایل دکمه فعال (زرد)
|
|
: 'bg-[#1A2332] text-gray-300 hover:bg-[#1A2332]/80 hover:text-white' // استایل دکمههای عادی (تیره)
|
|
}`}
|
|
>
|
|
{page}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* دکمه بعدی */}
|
|
<button
|
|
onClick={() => onPageChange(currentPage + 1)}
|
|
disabled={currentPage >= totalPages}
|
|
className="px-3 cursor-pointer py-2 md:px-4 h-10 flex items-center justify-center rounded-xl disabled:opacity-40 disabled:cursor-not-allowed bg-[#1A2332] text-gray-300 hover:bg-[#1A2332]/80 hover:text-white transition-all duration-300 text-sm md:text-base font-medium"
|
|
>
|
|
بعدی
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|