114 lines
2.9 KiB
TypeScript
114 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { Trans } from '@kit/ui/makerkit/trans';
|
|
import { cn } from '@kit/ui/shadcn';
|
|
import { Button } from '@kit/ui/shadcn/button';
|
|
|
|
const BookingPagination = ({
|
|
totalPages,
|
|
setCurrentPage,
|
|
currentPage,
|
|
}: {
|
|
totalPages: number;
|
|
setCurrentPage: (page: number) => void;
|
|
currentPage: number;
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
|
|
const generatePageNumbers = () => {
|
|
const pages = [];
|
|
const maxVisiblePages = 5;
|
|
|
|
if (totalPages <= maxVisiblePages) {
|
|
for (let i = 1; i <= totalPages; i++) {
|
|
pages.push(i);
|
|
}
|
|
} else {
|
|
if (currentPage <= 3) {
|
|
for (let i = 1; i <= 4; i++) {
|
|
pages.push(i);
|
|
}
|
|
pages.push('...');
|
|
pages.push(totalPages);
|
|
} else if (currentPage >= totalPages - 2) {
|
|
pages.push(1);
|
|
pages.push('...');
|
|
for (let i = totalPages - 3; i <= totalPages; i++) {
|
|
pages.push(i);
|
|
}
|
|
} else {
|
|
pages.push(1);
|
|
pages.push('...');
|
|
for (let i = currentPage - 1; i <= currentPage + 1; i++) {
|
|
pages.push(i);
|
|
}
|
|
pages.push('...');
|
|
pages.push(totalPages);
|
|
}
|
|
}
|
|
|
|
return pages;
|
|
};
|
|
|
|
if (totalPages === 0) {
|
|
return (
|
|
<div className="wrap text-muted-foreground flex size-full content-center-safe justify-center-safe">
|
|
<p>{t('booking:noResults')}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
totalPages > 1 && (
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-muted-foreground text-sm">
|
|
{t('common:pageOfPages', {
|
|
page: currentPage,
|
|
total: totalPages,
|
|
})}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setCurrentPage(currentPage - 1)}
|
|
disabled={currentPage === 1}
|
|
>
|
|
<Trans i18nKey="common:previous" defaultValue="Previous" />
|
|
</Button>
|
|
|
|
{generatePageNumbers().map((page, index) => (
|
|
<Button
|
|
key={index}
|
|
variant={page === currentPage ? 'default' : 'outline'}
|
|
size="sm"
|
|
onClick={() => typeof page === 'number' && setCurrentPage(page)}
|
|
disabled={page === '...'}
|
|
className={cn(
|
|
'min-w-[2rem]',
|
|
page === '...' && 'cursor-default hover:bg-transparent',
|
|
)}
|
|
>
|
|
{page}
|
|
</Button>
|
|
))}
|
|
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setCurrentPage(currentPage + 1)}
|
|
disabled={currentPage === totalPages}
|
|
>
|
|
<Trans i18nKey="common:next" defaultValue="Next" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
);
|
|
};
|
|
|
|
export default BookingPagination;
|