Pagination

1import * as React from "react";2import { CaretLeftIcon, CaretRightIcon, DotsThreeIcon } from "@phosphor-icons/react/ssr";3​4import { cn } from "@/lib/utils";5​6// The console's pagination (Figma 427:2715, under the Email and iMessage tables): 14px muted "Previous" and "Next" with7// 16px carets, the page numbers in 14px ink, and the current page a 40 by 30 white key with 8px corners and Shadow/S.8// `bar` sets it in the 42px lilac bar with 10px corners that sits 8px under a table, the pages at its right end.9function Pagination({ className, bar = false, ...props }: React.ComponentProps<"nav"> & { bar?: boolean }) {10  return (11    <nav12      role="navigation"13      aria-label="pagination"14      data-slot="pagination"15      data-bar={bar || undefined}16      className={cn("flex w-full justify-center", bar && "min-h-10.5 items-center justify-end rounded-panel bg-subtle px-2 py-1.5", className)}17      {...props}18    />19  );20}21​22function PaginationContent({ className, ...props }: React.ComponentProps<"ul">) {23  return <ul data-slot="pagination-content" className={cn("flex flex-row flex-wrap items-center gap-1", className)} {...props} />;24}25​26function PaginationItem(props: React.ComponentProps<"li">) {27  return <li data-slot="pagination-item" {...props} />;28}29​30type PaginationLinkProps = { isActive?: boolean; size?: "icon" | "default" } & React.ComponentProps<"a">;31​32const LINK =33  "inline-flex h-7.5 shrink-0 items-center justify-center gap-1 rounded-control font-sans text-body leading-tight whitespace-nowrap outline-none transition-[background-color,color,box-shadow,scale] duration-150 ease-out active:scale-97 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";34​35function PaginationLink({ className, isActive, size = "icon", ...props }: PaginationLinkProps) {36  return (37    <a38      aria-current={isActive ? "page" : undefined}39      data-slot="pagination-link"40      data-active={isActive || undefined}41      className={cn(42        LINK,43        size === "icon" ? "min-w-10 px-2" : "px-2.5",44        isActive ? "bg-surface text-fg shadow-s" : "text-fg hover:bg-subtle-hover in-data-[bar=true]:hover:bg-surface/70",45        className,46      )}47      {...props}48    />49  );50}51​52function PaginationPrevious({ className, children = "Previous", ...props }: React.ComponentProps<typeof PaginationLink>) {53  return (54    <PaginationLink aria-label="Go to previous page" size="default" className={cn("text-fg-muted hover:text-fg", className)} {...props}>55      <CaretLeftIcon aria-hidden />56      <span>{children}</span>57    </PaginationLink>58  );59}60​61function PaginationNext({ className, children = "Next", ...props }: React.ComponentProps<typeof PaginationLink>) {62  return (63    <PaginationLink aria-label="Go to next page" size="default" className={cn("text-fg-muted hover:text-fg", className)} {...props}>64      <span>{children}</span>65      <CaretRightIcon aria-hidden />66    </PaginationLink>67  );68}69​70function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">) {71  return (72    <span aria-hidden data-slot="pagination-ellipsis" className={cn("flex h-7.5 min-w-8 items-center justify-center text-fg-muted", className)} {...props}>73      <DotsThreeIcon weight="bold" className="size-4" />74      <span className="sr-only">More pages</span>75    </span>76  );77}78​79export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };