142 lines
3.8 KiB
TypeScript
142 lines
3.8 KiB
TypeScript
import React from 'react';
|
|
import { useSearchParams } from 'react-router-dom';
|
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
|
|
|
interface PaginationProps {
|
|
currentPage: number;
|
|
totalPages: number;
|
|
onPageChange?: (page: number) => void;
|
|
}
|
|
|
|
const Pagination: React.FC<PaginationProps> = ({
|
|
currentPage,
|
|
totalPages,
|
|
onPageChange,
|
|
}) => {
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
|
|
const handlePageChange = (page: number) => {
|
|
if (page < 1 || page > totalPages) return;
|
|
|
|
|
|
const newParams = new URLSearchParams(searchParams);
|
|
newParams.set('page', String(page));
|
|
setSearchParams(newParams);
|
|
|
|
|
|
onPageChange?.(page);
|
|
|
|
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
};
|
|
|
|
|
|
const getPageNumbers = () => {
|
|
const pages: (number | string)[] = [];
|
|
const maxVisible = 7;
|
|
|
|
if (totalPages <= maxVisible) {
|
|
|
|
for (let i = 1; i <= totalPages; i++) {
|
|
pages.push(i);
|
|
}
|
|
} else {
|
|
|
|
pages.push(1);
|
|
|
|
if (currentPage > 3) {
|
|
pages.push('...');
|
|
}
|
|
|
|
|
|
const start = Math.max(2, currentPage - 1);
|
|
const end = Math.min(totalPages - 1, currentPage + 1);
|
|
|
|
for (let i = start; i <= end; i++) {
|
|
pages.push(i);
|
|
}
|
|
|
|
if (currentPage < totalPages - 2) {
|
|
pages.push('...');
|
|
}
|
|
|
|
|
|
pages.push(totalPages);
|
|
}
|
|
|
|
return pages;
|
|
};
|
|
|
|
if (totalPages <= 1) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="flex justify-center items-center gap-2 mt-8">
|
|
{}
|
|
<button
|
|
onClick={() => handlePageChange(currentPage - 1)}
|
|
disabled={currentPage === 1}
|
|
className="px-4 py-2 border border-[var(--luxury-gold)]/30
|
|
rounded-lg bg-[#0a0a0a] text-gray-300
|
|
hover:bg-[#1a1a1a] hover:border-[var(--luxury-gold)] hover:text-[var(--luxury-gold)]
|
|
disabled:opacity-50 disabled:cursor-not-allowed
|
|
transition-all duration-300 font-medium tracking-wide"
|
|
aria-label="Previous page"
|
|
>
|
|
<ChevronLeft size={18} />
|
|
</button>
|
|
|
|
{}
|
|
{getPageNumbers().map((page, index) => {
|
|
if (page === '...') {
|
|
return (
|
|
<span
|
|
key={`ellipsis-${index}`}
|
|
className="px-4 py-2 text-gray-500 font-light"
|
|
>
|
|
...
|
|
</span>
|
|
);
|
|
}
|
|
|
|
const pageNum = page as number;
|
|
const isActive = pageNum === currentPage;
|
|
|
|
return (
|
|
<button
|
|
key={pageNum}
|
|
onClick={() => handlePageChange(pageNum)}
|
|
className={`px-5 py-2 rounded-lg transition-all duration-300
|
|
font-medium tracking-wide ${
|
|
isActive
|
|
? 'bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)] text-[#0f0f0f] shadow-lg shadow-[var(--luxury-gold)]/30'
|
|
: 'border border-[var(--luxury-gold)]/30 bg-[#0a0a0a] text-gray-300 hover:bg-[#1a1a1a] hover:border-[var(--luxury-gold)] hover:text-[var(--luxury-gold)]'
|
|
}`}
|
|
aria-label={`Page ${pageNum}`}
|
|
aria-current={isActive ? 'page' : undefined}
|
|
>
|
|
{pageNum}
|
|
</button>
|
|
);
|
|
})}
|
|
|
|
{}
|
|
<button
|
|
onClick={() => handlePageChange(currentPage + 1)}
|
|
disabled={currentPage === totalPages}
|
|
className="px-4 py-2 border border-[var(--luxury-gold)]/30
|
|
rounded-lg bg-[#0a0a0a] text-gray-300
|
|
hover:bg-[#1a1a1a] hover:border-[var(--luxury-gold)] hover:text-[var(--luxury-gold)]
|
|
disabled:opacity-50 disabled:cursor-not-allowed
|
|
transition-all duration-300 font-medium tracking-wide"
|
|
aria-label="Next page"
|
|
>
|
|
<ChevronRight size={18} />
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Pagination;
|