import type * as React from "react"; import { type Button, buttonVariants, } from "@/components/registry/primitives/core/button"; import { ThemeIcon } from "@/components/registry/primitives/core/theme-icon"; import { Link } from "@/components/registry/primitives/editables/link"; import { cn } from "@/lib/registry/cn"; import type { HTMLLink, LinkField, LinkFieldValue, } from "@/lib/registry/sitecore"; function Pagination({ className, ...props }: React.ComponentProps<"nav">) { return (

); } function PaginationContent({ className, ...props }: React.ComponentProps<"ul">) { return (

; } type PaginationLinkBaseProps = { isActive?: boolean; field?: LinkField | LinkFieldValue | HTMLLink; styleVariant?: "default" | "minimal"; as?: "a" | "button"; } & Pick, "size"> & Omit, "type"> & React.ComponentProps<"button">; function PaginationLink({ className, isActive, size = "icon", field, styleVariant = "default", as = "a", ...props }: PaginationLinkBaseProps) { const sharedProps = { "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, className: cn( buttonVariants({ colorScheme: "neutral", size, }), styleVariant === "minimal" ? "shadow-none rounded-md border-0 bg-transparent px-2 text-neutral font-medium hover:bg-transparent active:bg-transparent" : "shadow-none rounded-md text-neutral bg-transparent disabled:text-neutral/40 font-medium hover:bg-neutral-background active:bg-primary-background", isActive ? styleVariant === "minimal" ? "bg-transparent text-foreground font-semibold" : "bg-primary-background text-neutral hover:bg-primary-background active:bg-primary-background font-medium" : undefined, className, ), } as const; if (field && as !== "button") { const { value: _value, ...anchorProps } = props as React.ComponentProps<"a"> & { value?: unknown; }; void _value; return ( ); } if (as === "button") { const buttonProps = props as React.ComponentProps<"button">; return

Pagination

Showcase

Pagination