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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
'use client';
import { Icons } from '@/components/icons/icons';
import { buttonVariants } from '@/components/ui/button';
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
} from '@/components/ui/pagination';
import { usePagination } from '@/hooks/use-pagination';
import { cn } from '@/lib/utils';
type NumberedPaginationProps = {
currentPage: number;
totalPages: number;
paginationItemsToDisplay?: number;
onPageChange: (page: number) => void;
};
function NumberedPagination({
currentPage,
totalPages,
paginationItemsToDisplay = 5,
onPageChange,
}: NumberedPaginationProps) {
const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({
currentPage,
totalPages,
paginationItemsToDisplay,
});
const handlePageChange = (page: number) => (e: React.MouseEvent) => {
e.preventDefault();
if (page >= 1 && page <= totalPages) {
onPageChange(page);
}
};
return (
<Pagination>
<PaginationContent className='-space-x-px inline-flex w-full gap-0 rtl:space-x-reverse'>
<PaginationItem>
<PaginationLink
className={cn(
buttonVariants({
variant: 'ghost',
}),
'rounded-none shadow-none focus-visible:z-10 aria-disabled:pointer-events-none [&[aria-disabled]>svg]:opacity-50',
)}
href='#'
onClick={handlePageChange(currentPage - 1)}
aria-label='Go to previous page'
aria-disabled={currentPage === 1}
>
<Icons.chevronLeft size={16} strokeWidth={2} aria-hidden='true' />
</PaginationLink>
</PaginationItem>
<div className='inline-flex w-full justify-center '>
{showLeftEllipsis && (
<PaginationItem>
<PaginationLink
className={cn(
buttonVariants({
variant: 'ghost',
}),
'pointer-events-none rounded-none shadow-none',
)}
>
...
</PaginationLink>
</PaginationItem>
)}
{pages.map((page) => (
<PaginationItem key={page} className='w-max'>
<PaginationLink
className={cn(
buttonVariants({
variant: page === currentPage ? 'default' : 'ghost',
}),
'rounded-none border-0 shadow-none focus-visible:z-10',
page === currentPage &&
'min-w-full dark:bg-primary dark:hover:bg-primary/90',
)}
href='#'
onClick={handlePageChange(page)}
isActive={page === currentPage}
>
{page}
</PaginationLink>
</PaginationItem>
))}
{showRightEllipsis && (
<PaginationItem>
<PaginationLink
className={cn(
buttonVariants({
variant: 'ghost',
}),
'pointer-events-none rounded-none shadow-none',
)}
>
...
</PaginationLink>
</PaginationItem>
)}
</div>
<PaginationItem>
<PaginationLink
className={cn(
buttonVariants({
variant: 'ghost',
}),
'rounded-none shadow-none focus-visible:z-10 aria-disabled:pointer-events-none [&[aria-disabled]>svg]:opacity-50',
)}
href='#'
onClick={handlePageChange(currentPage + 1)}
aria-label='Go to next page'
aria-disabled={currentPage === totalPages}
>
<Icons.chevronRight size={16} strokeWidth={2} aria-hidden='true' />
</PaginationLink>
</PaginationItem>
</PaginationContent>
</Pagination>
);
}
export { NumberedPagination };
|
