Pagination

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/bases/radix/components/example"
5import { Field, FieldLabel } from "@/registry/bases/radix/ui/field"
6import {
7  Pagination,
8  PaginationContent,
9  PaginationEllipsis,
10  PaginationItem,
11  PaginationLink,
12  PaginationNext,
13  PaginationPrevious,
14} from "@/registry/bases/radix/ui/pagination"
15import {
16  Select,
17  SelectContent,
18  SelectGroup,
19  SelectItem,
20  SelectTrigger,
21  SelectValue,
22} from "@/registry/bases/radix/ui/select"
23 
24export default function PaginationExample() {
25  return (
26    <ExampleWrapper>
27      <PaginationBasic />
28      <PaginationSimple />
29      <PaginationIconsOnly />
30    </ExampleWrapper>
31  )
32}
33 
34function PaginationBasic() {
35  return (
36    <Example title="Basic">
37      <Pagination>
38        <PaginationContent>
39          <PaginationItem>
40            <PaginationPrevious href="#" />
41          </PaginationItem>
42          <PaginationItem>
43            <PaginationLink href="#">1</PaginationLink>
44          </PaginationItem>
45          <PaginationItem>
46            <PaginationLink href="#" isActive>
47              2
48            </PaginationLink>
49          </PaginationItem>
50          <PaginationItem>
51            <PaginationLink href="#">3</PaginationLink>
52          </PaginationItem>
53          <PaginationItem>
54            <PaginationEllipsis />
55          </PaginationItem>
56          <PaginationItem>
57            <PaginationNext href="#" />
58          </PaginationItem>
59        </PaginationContent>
60      </Pagination>
61    </Example>
62  )
63}
64 
65function PaginationSimple() {
66  return (
67    <Example title="Simple">
68      <Pagination>
69        <PaginationContent>
70          <PaginationItem>
71            <PaginationLink href="#">1</PaginationLink>
72          </PaginationItem>
73          <PaginationItem>
74            <PaginationLink href="#" isActive>
75              2
76            </PaginationLink>
77          </PaginationItem>
78          <PaginationItem>
79            <PaginationLink href="#">3</PaginationLink>
80          </PaginationItem>
81          <PaginationItem>
82            <PaginationLink href="#">4</PaginationLink>
83          </PaginationItem>
84          <PaginationItem>
85            <PaginationLink href="#">5</PaginationLink>
86          </PaginationItem>
87        </PaginationContent>
88      </Pagination>
89    </Example>
90  )
91}
92 
93function PaginationIconsOnly() {
94  return (
95    <Example title="With Select">
96      <div className="flex items-center justify-between gap-4">
97        <Field orientation="horizontal" className="w-fit">
98// … truncated