Pagination

"use client"

import * as React from "react"
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
  PaginationRange,
  pageWindow,
} from "@/components/candor/ui/pagination"

// The numbers come from the service: 312 items, 20 to a page. The component never works out a total itself.
const total = 312
const pageSize = 20
const pageCount = Math.ceil(total / pageSize)

export default function Example() {
  const [page, setPage] = React.useState(1)
  const go = (next: number) => (event: React.MouseEvent) => {
    event.preventDefault()
    setPage(next)
  }
  return (
    <div className="flex flex-col items-center gap-3">
      <PaginationRange from={(page - 1) * pageSize + 1} to={Math.min(page * pageSize, total)} total={total} />
      <Pagination>
        <PaginationContent>
          <PaginationItem>
            <PaginationPrevious href="#previous" locked={page === 1 ? "You’re on the first page." : undefined} onClick={go(page - 1)} />
          </PaginationItem>
          {pageWindow({ page, pageCount }).map((entry) => (
            <PaginationItem key={entry}>
              {typeof entry === "number" ? (
                <PaginationLink href={`#page-${entry}`} page={entry} isActive={entry === page} onClick={go(entry)}>
                  {entry}
                </PaginationLink>
              ) : (
                <PaginationEllipsis />
              )}
            </PaginationItem>
          ))}
          <PaginationItem>
            <PaginationNext href="#next" locked={page === pageCount ? "You’re on the last page." : undefined} onClick={go(page + 1)} />
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    </div>
  )
}