84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
'use client';
|
||
|
||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||
|
||
interface RacePaginationProps {
|
||
currentPage: number;
|
||
totalPages: number;
|
||
totalItems: number;
|
||
itemsPerPage: number;
|
||
onPageChange: (page: number) => void;
|
||
}
|
||
|
||
export function RacePagination({
|
||
currentPage,
|
||
totalPages,
|
||
totalItems,
|
||
itemsPerPage,
|
||
onPageChange,
|
||
}: RacePaginationProps) {
|
||
if (totalPages <= 1) return null;
|
||
|
||
const startItem = ((currentPage - 1) * itemsPerPage) + 1;
|
||
const endItem = Math.min(currentPage * itemsPerPage, totalItems);
|
||
|
||
const getPageNumbers = () => {
|
||
const pages: number[] = [];
|
||
|
||
if (totalPages <= 5) {
|
||
return Array.from({ length: totalPages }, (_, i) => i + 1);
|
||
}
|
||
|
||
if (currentPage <= 3) {
|
||
return [1, 2, 3, 4, 5];
|
||
}
|
||
|
||
if (currentPage >= totalPages - 2) {
|
||
return [totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages];
|
||
}
|
||
|
||
return [currentPage - 2, currentPage - 1, currentPage, currentPage + 1, currentPage + 2];
|
||
};
|
||
|
||
return (
|
||
<div className="flex items-center justify-between pt-4">
|
||
<p className="text-sm text-gray-500">
|
||
Showing {startItem}–{endItem} of {totalItems}
|
||
</p>
|
||
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
onClick={() => onPageChange(Math.max(1, currentPage - 1))}
|
||
disabled={currentPage === 1}
|
||
className="p-2 rounded-lg border border-charcoal-outline text-gray-400 hover:text-white hover:border-primary-blue disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||
>
|
||
<ChevronLeft className="w-5 h-5" />
|
||
</button>
|
||
|
||
<div className="flex items-center gap-1">
|
||
{getPageNumbers().map(pageNum => (
|
||
<button
|
||
key={pageNum}
|
||
onClick={() => onPageChange(pageNum)}
|
||
className={`w-10 h-10 rounded-lg text-sm font-medium transition-colors ${
|
||
currentPage === pageNum
|
||
? 'bg-primary-blue text-white'
|
||
: 'text-gray-400 hover:text-white hover:bg-iron-gray'
|
||
}`}
|
||
>
|
||
{pageNum}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
|
||
disabled={currentPage === totalPages}
|
||
className="p-2 rounded-lg border border-charcoal-outline text-gray-400 hover:text-white hover:border-primary-blue disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||
>
|
||
<ChevronRight className="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
} |