Pagination

1import {
2    Pagination,
3    PaginationContent,
4    PaginationEllipsis,
5    PaginationItem,
6    PaginationLink,
7    PaginationNext,
8    PaginationPrevious,
9} from '@/components/ui/pagination'
10
11export function PaginationDemo() {
12    return (
13        <Pagination>
14            <PaginationContent>
15                <PaginationItem>
16                    <PaginationPrevious href="#" />
17                </PaginationItem>
18                <PaginationItem>
19                    <PaginationLink href="#">1</PaginationLink>
20                </PaginationItem>
21                <PaginationItem>
22                    <PaginationLink href="#" isActive>
23                        2
24                    </PaginationLink>
25                </PaginationItem>
26                <PaginationItem>
27                    <PaginationLink href="#">3</PaginationLink>
28                </PaginationItem>
29                <PaginationItem>
30                    <PaginationEllipsis />
31                </PaginationItem>
32                <PaginationItem>
33                    <PaginationLink href="#">10</PaginationLink>
34                </PaginationItem>
35                <PaginationItem>
36                    <PaginationNext href="#" />
37                </PaginationItem>
38            </PaginationContent>
39        </Pagination>
40    )
41}
42

1'use client'
2
3import {
4    ChevronLeftIcon,
5    ChevronRightIcon,
6    ChevronsLeftIcon,
7    ChevronsRightIcon,
8} from 'lucide-react'
9
10import { ButtonGroup } from '@/components/ui/button-group'
11import {
12    Pagination,
13    PaginationContent,
14    PaginationEllipsis,
15    PaginationItem,
16    PaginationLink,
17} from '@/components/ui/pagination'
18
19export function PaginationGroupExample() {
20    return (
21        <Pagination>
22            <PaginationContent>
23                <ButtonGroup>
24                    <PaginationLink href="#" GroupVariant>
25                        <ChevronLeftIcon className="size-4" />
26                    </PaginationLink>
27
28                    <PaginationLink href="#" GroupVariant>
29                        1
30                    </PaginationLink>
31                    <PaginationLink href="#" isActive GroupVariant>
32                        2
33                    </PaginationLink>
34                    <PaginationLink href="#" GroupVariant>
35                        3
36                    </PaginationLink>
37
38                    <PaginationEllipsis />
39
40                    <PaginationLink href="#" GroupVariant>
41                        16
42                    </PaginationLink>
43
44                    <PaginationLink href="#" GroupVariant>
45                        <ChevronRightIcon className="size-4" />
46                    </PaginationLink>
47                </ButtonGroup>
48            </PaginationContent>
49        </Pagination>
50    )
51}
52