92 lines
2.4 KiB
TypeScript
92 lines
2.4 KiB
TypeScript
'use client'
|
||
|
||
import React from 'react'
|
||
|
||
interface PaginationProps {
|
||
currentPage: number
|
||
totalPages: number
|
||
hasNext: boolean
|
||
hasPrevious: boolean
|
||
isLoading: boolean
|
||
onPageChange: (page: number) => void
|
||
}
|
||
|
||
export default function Pagination({
|
||
currentPage,
|
||
totalPages,
|
||
isLoading,
|
||
onPageChange,
|
||
}: PaginationProps) {
|
||
if (totalPages <= 1) return null
|
||
|
||
const renderPageNumbers = () => {
|
||
const pages = []
|
||
const maxVisiblePages = 5 // максимальное количество видимых страниц
|
||
|
||
// создаем кнопки страницы
|
||
const createPageButton = (pageNum: number) => (
|
||
<button
|
||
key={pageNum}
|
||
onClick={() => onPageChange(pageNum)}
|
||
disabled={isLoading || pageNum === currentPage}
|
||
className={`h-8 w-8 rounded-full ${
|
||
pageNum === currentPage
|
||
? 'bg-orange/80 text-white'
|
||
: 'bg-white text-gray-700 hover:bg-gray-100'
|
||
} flex items-center justify-center border text-sm font-medium transition-colors`}
|
||
>
|
||
{pageNum}
|
||
</button>
|
||
)
|
||
|
||
// всегда показываем первую страницу
|
||
pages.push(createPageButton(1))
|
||
|
||
if (totalPages <= maxVisiblePages) {
|
||
// если страниц мало, показываем все
|
||
for (let i = 2; i <= totalPages; i++) {
|
||
pages.push(createPageButton(i))
|
||
}
|
||
} else {
|
||
// если страниц много, показываем с многоточием
|
||
if (currentPage > 3) {
|
||
pages.push(
|
||
<span key="start-ellipsis" className="px-2">
|
||
...
|
||
</span>
|
||
)
|
||
}
|
||
|
||
// показываем страницы вокруг текущей
|
||
for (
|
||
let i = Math.max(2, currentPage - 1);
|
||
i <= Math.min(totalPages - 1, currentPage + 1);
|
||
i++
|
||
) {
|
||
pages.push(createPageButton(i))
|
||
}
|
||
|
||
if (currentPage < totalPages - 2) {
|
||
pages.push(
|
||
<span key="end-ellipsis" className="px-2">
|
||
...
|
||
</span>
|
||
)
|
||
}
|
||
|
||
// всегда показываем последнюю страницу
|
||
if (totalPages > 1) {
|
||
pages.push(createPageButton(totalPages))
|
||
}
|
||
}
|
||
|
||
return pages
|
||
}
|
||
|
||
return (
|
||
<div className="mt-6 flex items-center justify-center">
|
||
<div className="flex space-x-2">{renderPageNumbers()}</div>
|
||
</div>
|
||
)
|
||
}
|