pagination

1import * as React from "react"
2 
3import { cn } from "@/registry/base-vega/lib/utils"
4import { Button } from "@/registry/base-vega/ui/button"
5import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
6 
7function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
8  return (
9    <nav
10      role="navigation"
11      aria-label="pagination"
12      data-slot="pagination"
13      className={cn("mx-auto flex w-full justify-center", className)}
14      {...props}
15    />
16  )
17}
18 
19function PaginationContent({
20  className,
21  ...props
22}: React.ComponentProps<"ul">) {
23  return (
24    <ul
25      data-slot="pagination-content"
26      className={cn("flex items-center gap-1", className)}
27      {...props}
28    />
29  )
30}
31 
32function PaginationItem({ ...props }: React.ComponentProps<"li">) {
33  return <li data-slot="pagination-item" {...props} />
34}
35 
36type PaginationLinkProps = {
37  isActive?: boolean
38} & Pick<React.ComponentProps<typeof Button>, "size"> &
39  React.ComponentProps<"a">
40 
41function PaginationLink({
42  className,
43  isActive,
44  size = "icon",
45  ...props
46}: PaginationLinkProps) {
47  return (
48    <Button
49      variant={isActive ? "outline" : "ghost"}
50      size={size}
51      className={cn(className)}
52      nativeButton={false}
53      render={
54        <a
55          aria-current={isActive ? "page" : undefined}
56          data-slot="pagination-link"
57          data-active={isActive}
58          {...props}
59        />
60      }
61    />
62  )
63}
64 
65function PaginationPrevious({
66  className,
67  text = "Previous",
68  ...props
69}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
70  return (
71    <PaginationLink
72      aria-label="Go to previous page"
73      size="default"
74      className={cn("pl-2!", className)}
75      {...props}
76    >
77      <IconPlaceholder
78        lucide="ChevronLeftIcon"
79        tabler="IconChevronLeft"
80        hugeicons="ArrowLeft01Icon"
81        phosphor="CaretLeftIcon"
82        remixicon="RiArrowLeftSLine"
83        data-icon="inline-start"
84        className="cn-rtl-flip"
85      />
86      <span className="hidden sm:block">{text}</span>
87    </PaginationLink>
88  )
89}
90 
91function PaginationNext({
92  className,
93  text = "Next",
94  ...props
95}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
96  return (
97    <PaginationLink
98      aria-label="Go to next page"
99      size="default"
100      className={cn("pr-2!", className)}
101      {...props}
102    >
103      <span className="hidden sm:block">{text}</span>
104      <IconPlaceholder
105        lucide="ChevronRightIcon"
106// … truncated