# All files / src/components/ui pagination.tsx

0% Statements 0/125
0% Branches 0/1
0% Functions 0/1
0% Lines 0/125

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126

     import { ComponentProps } from "react"
    import ChevronLeftIcon from "lucide-react/dist/esm/icons/chevron-left"
    import ChevronRightIcon from "lucide-react/dist/esm/icons/chevron-right"
    import MoreHorizontalIcon from "lucide-react/dist/esm/icons/more-horizontal"

    import { cn } from "@/lib/utils"
    import { Button, buttonVariants } from "@/components/ui/button"

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

    function PaginationContent({
      className,
      ...props
    }: ComponentProps<"ul">) {
      return (
        <ul
          data-slot="pagination-content"
          className={cn("flex flex-row items-center gap-1", className)}
          {...props}
        />
      )
    }

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

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

    function PaginationLink({
      className,
      isActive,
      size = "icon",
      ...props
    }: PaginationLinkProps) {
      return (
        <a
          aria-current={isActive ? "page" : undefined}
          data-slot="pagination-link"
          data-active={isActive}
          className={cn(
            buttonVariants({
              variant: isActive ? "outline" : "ghost",
              size,
            }),
            className
          )}
          {...props}
        />
      )
    }

    function PaginationPrevious({
      className,
      ...props
    }: ComponentProps<typeof PaginationLink>) {
      return (
        <PaginationLink
          aria-label="Go to previous page"
          size="default"
          className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
          {...props}
        >
          <ChevronLeftIcon />
          <span className="hidden sm:block">Previous</span>
        </PaginationLink>
      )
    }

    function PaginationNext({
      className,
      ...props
    }: ComponentProps<typeof PaginationLink>) {
      return (
        <PaginationLink
          aria-label="Go to next page"
          size="default"
          className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
          {...props}
        >
          <span className="hidden sm:block">Next</span>
          <ChevronRightIcon />
        </PaginationLink>
      )
    }

    function PaginationEllipsis({
      className,
      ...props
    }: ComponentProps<"span">) {
      return (
        <span
          aria-hidden
          data-slot="pagination-ellipsis"
          className={cn("flex size-9 items-center justify-center", className)}
          {...props}
        >
          <MoreHorizontalIcon className="size-4" />
          <span className="sr-only">More pages</span>
        </span>
      )
    }

    export {
      Pagination,
      PaginationContent,
      PaginationLink,
      PaginationItem,
      PaginationPrevious,
      PaginationNext,
      PaginationEllipsis,
    }