Pagination

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