File size: 2,633 Bytes
c524dfb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
import React from 'react';
type PaginationProps = {
currentPage: number;
totalPages: number;
onPageChange: (page: number) => void;
};
export default function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
return (
<div className="mt-4 flex items-center justify-between">
<button
onClick={() => onPageChange(Math.max(currentPage - 1, 1))}
disabled={currentPage === 1}
className={`px-4 py-2 rounded-md mr-2 ${
currentPage === 1
? 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-500 cursor-not-allowed'
: 'bg-blue-500 dark:bg-blue-600 text-white'
}`}
>
<
</button>
<div className="flex items-center space-x-2">
{currentPage > 1 && (
<>
<button
onClick={() => onPageChange(1)}
className="px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md"
>
1
</button>
{currentPage > 2 && <span className="text-gray-500">...</span>}
</>
)}
{[...Array(5)].map((_, i) => {
const page = currentPage + i - 2;
if (page >= 1 && page <= totalPages) {
return (
<button
key={page}
onClick={() => onPageChange(page)}
className={`px-2 py-1 rounded-md ${
page === currentPage
? 'bg-blue-500 dark:bg-blue-600 text-white'
: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200'
}`}
>
{page}
</button>
);
}
return null;
})}
{currentPage < totalPages && (
<>
{currentPage < totalPages - 1 && <span className="text-gray-500">...</span>}
<button
onClick={() => onPageChange(totalPages)}
className="px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md"
>
{totalPages}
</button>
</>
)}
</div>
<button
onClick={() => onPageChange(Math.min(currentPage + 1, totalPages))}
disabled={currentPage === totalPages}
className={`px-4 py-2 rounded-md ${
currentPage === totalPages
? 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-500 cursor-not-allowed'
: 'bg-blue-500 dark:bg-blue-600 text-white'
}`}
>
>
</button>
</div>
);
}
|