Search
Copy Code
Previous: Breadcrumb
Next: Menubar
Close Terminal
Light Mode
pagination-demo.tsx
pagination.tsx
Collapse
Reset
Copy Code
Download
Run
1
"use client"
2
3
import * as React from "react"
4
import {
5
Pagination,
6
PaginationContent,
7
PaginationEllipsis,
8
PaginationItem,
9
PaginationLink,
10
PaginationNext,
11
PaginationPrevious,
12
} from "@/components/ui/pagination"
13
14
export default function PaginationDemo() {
15
const [page, setPage] = React.useState(1)
16
17
return (
18
<div className="w-full min-h-[400px] flex items-center justify-center p-8">
19
<Pagination>
20
<PaginationContent>
21
<PaginationItem>
22
<PaginationPrevious
23
href="#"
24
onClick={(e) => {
25
e.preventDefault()
26
setPage(Math.max(1, page - 1))
27
}}
28
disabled={page === 1}
29
/>
30
</PaginationItem>
31
32
<PaginationItem>
33
<PaginationLink
34
href="#"
35
isActive={page === 1}
36
onClick={(e) => {
37
e.preventDefault()
38
setPage(1)
39
}}
40
>
41
1
42
</PaginationLink>
43
</PaginationItem>
44
45
<PaginationItem>
46
<PaginationLink
47
href="#"
48
isActive={page === 2}
49
onClick={(e) => {
50
e.preventDefault()
51
setPage(2)
52
}}
53
>
54
2
55
</PaginationLink>
56
</PaginationItem>
57
58
<PaginationItem>
59
<PaginationLink
60
href="#"
61
isActive={page === 3}
62
onClick={(e) => {
63
e.preventDefault()
64
setPage(3)
65
}}
66
>
67
3
68
</PaginationLink>
69
</PaginationItem>
70
71
<PaginationItem>
72
<PaginationEllipsis />
73
</PaginationItem>
74
75
<PaginationItem>
76
<PaginationNext
77
href="#"
78
onClick={(e) => {
79
e.preventDefault()
80
setPage(Math.min(10, page + 1))
81
}}
82
disabled={page === 10}
83
/>
84
</PaginationItem>
85
</PaginationContent>
86
</Pagination>
87
</div>
88
)
89
}