pagination

1import * as React from "react"
2 
3import { cn } from "@/registry/radix-sera/lib/utils"
4import { Button } from "@/registry/radix-sera/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      asChild
50      variant={isActive ? "outline" : "ghost"}
51      size={size}
52      className={cn(className)}
53    >
54      <a
55        aria-current={isActive ? "page" : undefined}
56        data-slot="pagination-link"
57        data-active={isActive}
58        {...props}
59      />
60    </Button>
61  )
62}
63 
64function PaginationPrevious({
65  className,
66  text = "Previous",
67  ...props
68}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
69  return (
70    <PaginationLink
71      aria-label="Go to previous page"
72      size="default"
73      className={cn("pl-2!", className)}
74      {...props}
75    >
76      <IconPlaceholder
77        lucide="ChevronLeftIcon"
78        tabler="IconChevronLeft"
79        hugeicons="ArrowLeft01Icon"
80        phosphor="CaretLeftIcon"
81        remixicon="RiArrowLeftSLine"
82        data-icon="inline-start"
83        className="cn-rtl-flip"
84      />
85      <span className="hidden sm:block">{text}</span>
86    </PaginationLink>
87  )
88}
89 
90function PaginationNext({
91  className,
92  text = "Next",
93  ...props
94}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
95  return (
96    <PaginationLink
97      aria-label="Go to next page"
98      size="default"
99      className={cn("pr-2!", className)}
100      {...props}
101    >
102      <span className="hidden sm:block">{text}</span>
103      <IconPlaceholder
104        lucide="ChevronRightIcon"
105// … truncated