Pagination

1"use client";
2 
3import "./pagination.css";
4import type React from "react";
5import { cn } from "tailwind-variants";
6 
7import { PaginationContext, usePaginationContext } from "./pagination.context";
8import { paginationVariants, type PaginationVariants } from "./pagination.variants";
9 
10export type PaginationProps = PaginationVariants & React.ComponentProps<"nav">;
11 
12export const PaginationRoot = ({ children, className, size, ...props }: PaginationProps) => {
13  const slots = paginationVariants({ size });
14 
15  return (
16    <PaginationContext.Provider value={{ slots }}>
17      <nav
18        aria-label="pagination"
19        className={cn(slots.root(), className)}
20        {...props}
21      >
22        {children}
23      </nav>
24    </PaginationContext.Provider>
25  );
26};
27 
28export type PaginationContentProps = React.ComponentProps<"ul">;
29 
30export const PaginationContent = ({ className, ...props }: PaginationContentProps) => {
31  const { slots } = usePaginationContext();
32  return <ul className={cn(slots.content(), className)} {...props} />;
33};
34 
35export type PaginationItemProps = React.ComponentProps<"li">;
36 
37export const PaginationItem = ({ className, ...props }: PaginationItemProps) => {
38  const { slots } = usePaginationContext();
39  return <li className={cn(slots.item(), className)} {...props} />;
40};
41 
42export type PaginationLinkProps = {
43  isActive?: boolean;
44} & React.ComponentProps<"a">;
45 
46export const PaginationLink = ({
47  className,
48  isActive,
49  "aria-current": ariaCurrent,
50  ...props
51}: PaginationLinkProps) => {
52  const { slots } = usePaginationContext();
53  return (
54    <a
55      aria-current={isActive ? (ariaCurrent ?? "page") : undefined}
56      className={cn(
57        slots.link(),
58        isActive && "pagination__link--active",
59        className
60      )}
61      {...props}
62    />
63  );
64};
65 
66export type PaginationPreviousProps = React.ComponentProps<typeof PaginationLink>;
67 
68export const PaginationPrevious = ({
69  className,
70  children,
71  ...props
72}: PaginationPreviousProps) => (
73  <PaginationLink
74    aria-label="Go to previous page"
75    className={cn("gap-1 pl-2.5", className)}
76    {...props}
77  >
78    {children ?? (
79      <>
80        <svg className="h-4 w-4 stroke-current" fill="none" strokeWidth="2" viewBox="0 0 24 24">
81          <path d="M15 18l-6-6 6-6" />
82        </svg>
83        <span>Previous</span>
84      </>
85    )}
86  </PaginationLink>
87);
88 
89export type PaginationNextProps = React.ComponentProps<typeof PaginationLink>;
90 
91export const PaginationNext = ({
92  className,
93  children,
94// … truncated