pagination

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