102 lines
4.4 KiB
TypeScript
102 lines
4.4 KiB
TypeScript
|
import React from 'react';
|
|||
|
|
import clsx from 'clsx';
|
|||
|
|
import { useTranslation } from 'react-i18next';
|
|||
|
|
|
|||
|
|
export interface PaginationProps {
|
|||
|
|
currentPage: number;
|
|||
|
|
totalPages: number;
|
|||
|
|
total: number;
|
|||
|
|
pageSize: number;
|
|||
|
|
onPageChange: (page: number) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function Pagination({ currentPage, totalPages, total, pageSize, onPageChange }: PaginationProps) {
|
|||
|
|
const { t } = useTranslation();
|
|||
|
|
const start = total === 0 ? 0 : (currentPage - 1) * pageSize + 1;
|
|||
|
|
const end = Math.min(currentPage * pageSize, total);
|
|||
|
|
|
|||
|
|
const pages: number[] = [];
|
|||
|
|
const maxVisible = 5;
|
|||
|
|
const halfVisible = Math.floor(maxVisible / 2);
|
|||
|
|
let startPage = Math.max(1, currentPage - halfVisible);
|
|||
|
|
let endPage = Math.min(totalPages, startPage + maxVisible - 1);
|
|||
|
|
if (endPage - startPage < maxVisible - 1) {
|
|||
|
|
startPage = Math.max(1, endPage - maxVisible + 1);
|
|||
|
|
}
|
|||
|
|
for (let i = startPage; i <= endPage; i++) {
|
|||
|
|
pages.push(i);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (totalPages <= 1) return null;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<nav className="flex items-center justify-between px-6 py-3 border-t border-secondary-200" aria-label="Pagination">
|
|||
|
|
<div className="text-sm text-secondary-600">
|
|||
|
|
<span>{start}–{end}</span> <span>{t('table.of')}</span> <span>{total}</span> <span>{t('table.results')}</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-1">
|
|||
|
|
<button
|
|||
|
|
onClick={() => onPageChange(currentPage - 1)}
|
|||
|
|
disabled={currentPage <= 1}
|
|||
|
|
className="px-3 py-1.5 text-sm rounded-md border border-secondary-300 hover:bg-secondary-50 disabled:opacity-50 disabled:cursor-not-allowed min-h-touch min-w-touch flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
|
|||
|
|
aria-label={t('pagination.previous')}
|
|||
|
|
>
|
|||
|
|
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
|||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
{startPage > 1 && (
|
|||
|
|
<>
|
|||
|
|
<button
|
|||
|
|
onClick={() => onPageChange(1)}
|
|||
|
|
className="px-3 py-1.5 text-sm rounded-md border border-secondary-300 hover:bg-secondary-50 min-h-touch min-w-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
|
|||
|
|
aria-label={t('pagination.first')}
|
|||
|
|
>
|
|||
|
|
1
|
|||
|
|
</button>
|
|||
|
|
{startPage > 2 && <span className="px-1 text-secondary-400" aria-hidden="true">…</span>}
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
{pages.map((page) => (
|
|||
|
|
<button
|
|||
|
|
key={page}
|
|||
|
|
onClick={() => onPageChange(page)}
|
|||
|
|
className={clsx(
|
|||
|
|
'px-3 py-1.5 text-sm rounded-md border min-h-touch min-w-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
|
|||
|
|
page === currentPage
|
|||
|
|
? 'border-primary-500 bg-primary-50 text-primary-700 font-semibold'
|
|||
|
|
: 'border-secondary-300 hover:bg-secondary-50'
|
|||
|
|
)}
|
|||
|
|
aria-label={t('pagination.page', { page })}
|
|||
|
|
aria-current={page === currentPage ? 'page' : undefined}
|
|||
|
|
>
|
|||
|
|
{page}
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
{endPage < totalPages && (
|
|||
|
|
<>
|
|||
|
|
{endPage < totalPages - 1 && <span className="px-1 text-secondary-400" aria-hidden="true">…</span>}
|
|||
|
|
<button
|
|||
|
|
onClick={() => onPageChange(totalPages)}
|
|||
|
|
className="px-3 py-1.5 text-sm rounded-md border border-secondary-300 hover:bg-secondary-50 min-h-touch min-w-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
|
|||
|
|
aria-label={t('pagination.last')}
|
|||
|
|
>
|
|||
|
|
{totalPages}
|
|||
|
|
</button>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
<button
|
|||
|
|
onClick={() => onPageChange(currentPage + 1)}
|
|||
|
|
disabled={currentPage >= totalPages}
|
|||
|
|
className="px-3 py-1.5 text-sm rounded-md border border-secondary-300 hover:bg-secondary-50 disabled:opacity-50 disabled:cursor-not-allowed min-h-touch min-w-touch flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
|
|||
|
|
aria-label={t('pagination.next')}
|
|||
|
|
>
|
|||
|
|
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
|||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
);
|
|||
|
|
}
|