91 lines
3.0 KiB
TypeScript
91 lines
3.0 KiB
TypeScript
interface PaginationProps {
|
|
totalItems: number;
|
|
itemsPerPage: number;
|
|
currentPage: number;
|
|
onPageChange: (page: number) => void;
|
|
}
|
|
|
|
export default function Pagination({ totalItems, itemsPerPage, currentPage, onPageChange }: PaginationProps) {
|
|
const totalPages = Math.ceil(totalItems / itemsPerPage);
|
|
|
|
if (totalPages <= 1) return null;
|
|
|
|
const pageNumbers = [];
|
|
const maxVisiblePages = 5;
|
|
let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
|
|
const endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
|
|
|
|
if (endPage - startPage + 1 < maxVisiblePages) {
|
|
startPage = Math.max(1, endPage - maxVisiblePages + 1);
|
|
}
|
|
|
|
for (let i = startPage; i <= endPage; i++) {
|
|
pageNumbers.push(i);
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center justify-center space-x-2 mt-4">
|
|
<button
|
|
onClick={() => onPageChange(currentPage - 1)}
|
|
disabled={currentPage === 1}
|
|
className="px-3 py-1 rounded-md bg-[var(--card-bg)] text-[var(--text-primary)] disabled:opacity-50 disabled:cursor-not-allowed hover:bg-[var(--card-border)] transition-colors"
|
|
>
|
|
Previous
|
|
</button>
|
|
|
|
{startPage > 1 && (
|
|
<>
|
|
<button
|
|
onClick={() => onPageChange(1)}
|
|
className={`px-3 py-1 rounded-md ${
|
|
currentPage === 1
|
|
? 'bg-[var(--accent)] text-white'
|
|
: 'bg-[var(--card-bg)] text-[var(--text-primary)] hover:bg-[var(--card-border)]'
|
|
} transition-colors`}
|
|
>
|
|
1
|
|
</button>
|
|
{startPage > 2 && <span className="px-2 text-[var(--text-secondary)]">...</span>}
|
|
</>
|
|
)}
|
|
|
|
{pageNumbers.map((number) => (
|
|
<button
|
|
key={number}
|
|
onClick={() => onPageChange(number)}
|
|
className={`px-3 py-1 rounded-md ${
|
|
currentPage === number
|
|
? 'bg-[var(--accent)] text-white'
|
|
: 'bg-[var(--card-bg)] text-[var(--text-primary)] hover:bg-[var(--card-border)]'
|
|
} transition-colors`}
|
|
>
|
|
{number}
|
|
</button>
|
|
))}
|
|
|
|
{endPage < totalPages && (
|
|
<>
|
|
{endPage < totalPages - 1 && <span className="px-2 text-[var(--text-secondary)]">...</span>}
|
|
<button
|
|
onClick={() => onPageChange(totalPages)}
|
|
className={`px-3 py-1 rounded-md ${
|
|
currentPage === totalPages
|
|
? 'bg-[var(--accent)] text-white'
|
|
: 'bg-[var(--card-bg)] text-[var(--text-primary)] hover:bg-[var(--card-border)]'
|
|
} transition-colors`}
|
|
>
|
|
{totalPages}
|
|
</button>
|
|
</>
|
|
)}
|
|
|
|
<button
|
|
onClick={() => onPageChange(currentPage + 1)}
|
|
disabled={currentPage === totalPages}
|
|
className="px-3 py-1 rounded-md bg-[var(--card-bg)] text-[var(--text-primary)] disabled:opacity-50 disabled:cursor-not-allowed hover:bg-[var(--card-border)] transition-colors"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|