36:T909d,
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
  <nav
    role="navigation"
    aria-label="pagination"
    data-slot="pagination"
    className={cn("mx-auto flex w-full justify-center", className)}
    {...props}
  />
)

const PaginationContent = ({
  className,
  ...props
}: React.ComponentProps<"ul">) => (
  <ul
    data-slot="pagination-content"
    className={cn("flex items-center gap-4", className)}
    {...props}
  />
)

const PaginationItem = (props: React.ComponentProps<"li">) => (
  <li data-slot="pagination-item" {...props} />
)

type PaginationLinkProps = { isActive?: boolean } & Pick<
  React.ComponentProps<typeof Button>,
  "size"
> &
  React.ComponentProps<"a">

const PaginationLink = ({
  className,
  isActive,
  size = "icon",
  ...props
}: PaginationLinkProps) => (
  <Button
    variant={isActive ? "secondary" : "ghost"}
    size={size}
    className={className}
    nativeButton={false}
    render={
      <a
        aria-current={isActive ? "page" : undefined}
        data-active={isActive}
        {...props}
      />
    }
  />
)

const Chevron = ({ flip }: { flip?: boolean }) => (
  <svg
    viewBox="0 0 16 16"
    fill="none"
    className={cn("size-16", flip && "rotate-180")}
    aria-hidden="true"
  >
    <path
      d="M10 3L5 8l5 5"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
)

const PaginationPrevious = ({
  className,
  children = "Previous",
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to previous page"
    size="sm"
    className={cn("pl-8", className)}
    {...props}
  >
    <Chevron />
    <span className="hidden min-720:block">{children}</span>
  </PaginationLink>
)

const PaginationNext = ({
  className,
  children = "Next",
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to next page"
    size="sm"
    className={cn("pr-8", className)}
    {...props}
  >
    <span className="hidden min-720:block">{children}</span>
    <Chevron flip />
  </PaginationLink>
)

const PaginationEllipsis = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    aria-hidden
    data-slot="pagination-ellipsis"
    className={cn(
      "flex size-36 items-center justify-center text-text-tertiary",
      className
    )}
    {...props}
  >
    <svg viewBox="0 0 16 16" fill="currentColor" className="size-16">
      <circle cx="3" cy="8" r="1.25" />
      <circle cx="8" cy="8" r="1.25" />
      <circle cx="13" cy="8" r="1.25" />
    </svg>
    <span className="sr-only">More pages</span>
  </span>
)

export {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
}
35:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$36"}}],"$L37"]}]
Installation

Usage
