83 lines
2.9 KiB
TypeScript
83 lines
2.9 KiB
TypeScript
import React from 'react';
|
||
import Image from "next/image";
|
||
|
||
interface PaginationProps {
|
||
totalItems: number;
|
||
itemsPerPage: number;
|
||
currentPage: number;
|
||
onPageChange: (page: number) => void;
|
||
}
|
||
|
||
const Pagination: React.FC<PaginationProps> = ({
|
||
totalItems,
|
||
itemsPerPage,
|
||
currentPage,
|
||
onPageChange,
|
||
}) => {
|
||
const totalPages = Math.ceil(totalItems / itemsPerPage);
|
||
|
||
const getPaginationArray = () => {
|
||
const pages: (number | string)[] = [];
|
||
|
||
if (totalPages <= 5) {
|
||
for (let i = 1; i <= totalPages; i++) {
|
||
pages.push(i);
|
||
}
|
||
} else {
|
||
pages.push(1);
|
||
|
||
if (currentPage > 3) {
|
||
pages.push('...');
|
||
}
|
||
|
||
for (let i = Math.max(2, currentPage - 1); i <= Math.min(currentPage + 1, totalPages - 1); i++) {
|
||
pages.push(i);
|
||
}
|
||
|
||
if (currentPage < totalPages - 2) {
|
||
pages.push('...');
|
||
}
|
||
|
||
pages.push(totalPages);
|
||
}
|
||
|
||
return pages;
|
||
};
|
||
|
||
const handlePageChange = (page: number) => {
|
||
if (page !== currentPage) {
|
||
onPageChange(page);
|
||
}
|
||
};
|
||
|
||
const paginationArray = getPaginationArray();
|
||
|
||
return (
|
||
<div className="flex">
|
||
<button className="mr-[30px]" onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1}>
|
||
<Image className="rotate-[90deg] relative top-[-2px]" src="/images/chevronDown.svg" alt="arrow" width={11} height={11} />
|
||
</button>
|
||
<div className="flex gap-[12px] items-center">
|
||
{paginationArray.map((page, index) => (
|
||
typeof page === 'number' ? (
|
||
<button
|
||
key={index}
|
||
onClick={() => handlePageChange(page)}
|
||
className={currentPage === page ? 'text-blue font-[700] text-[17px]' : 'text-[17px]'}
|
||
>
|
||
{page}
|
||
</button>
|
||
) : (
|
||
<span key={index}>{page}</span> // Отображаем многоточие
|
||
)
|
||
))}
|
||
</div>
|
||
<button className=" flex items-center text-[15px] font-[700] ml-auto md:ml-[26px] gap-[11px]" onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages}>
|
||
Следующая страница
|
||
<Image className="rotate-[-90deg] relative top-[-2px]" src="/images/chevronDown.svg" alt="arrow" width={11} height={11} />
|
||
</button>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Pagination; |