"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
interface PaginationProps {
currentPage: number
totalPages: number
onPageChange: (page: number) => void
siblingCount?: number
showPrevNext?: boolean
showFirstLast?: boolean
className?: string
dir?: "ltr" | "rtl" | "auto"
}
function generatePages(current: number, total: number, siblingCount: number): (number | "ellipsis")[] {
const totalNumbers = siblingCount * 2 + 5
if (total <= totalNumbers) {
return Array.from({ length: total }, (_, i) => i + 1)
}
const leftSiblingIndex = Math.max(current - siblingCount, 1)
const rightSiblingIndex = Math.min(current + siblingCount, total)
const showLeftEllipsis = leftSiblingIndex > 2
const showRightEllipsis = rightSiblingIndex < total - 1
if (!showLeftEllipsis && showRightEllipsis) {
const leftItemCount = 3 + 2 * siblingCount
const leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1)
return [...leftRange, "ellipsis", total]
}
if (showLeftEllipsis && !showRightEllipsis) {
const rightItemCount = 3 + 2 * siblingCount
const rightRange = Array.from({ length: rightItemCount }, (_, i) => total - rightItemCount + i + 1)
return [1, "ellipsis", ...rightRange]
}
const middleRange = Array.from(
{ length: rightSiblingIndex - leftSiblingIndex + 1 },
(_, i) => leftSiblingIndex + i
)
return [1, "ellipsis", ...middleRange, "ellipsis", total]
}
function Pagination({
currentPage,
totalPages,
onPageChange,
siblingCount = 1,
showPrevNext = true,
showFirstLast = false,
className,
dir = "ltr",
}: PaginationProps) {
const isRtl = dir === "rtl"
const pages = generatePages(currentPage, totalPages, siblingCount)
const ChevronLeft = (
)
const ChevronRight = (
)
return (
)
}
interface PaginationInfoProps {
totalItems: number
currentPage: number
itemsPerPage: number
className?: string
}
function PaginationInfo({ totalItems, currentPage, itemsPerPage, className }: PaginationInfoProps) {
const start = (currentPage - 1) * itemsPerPage + 1
const end = Math.min(currentPage * itemsPerPage, totalItems)
return (
Showing {start}–{end} of {totalItems}
)
}
export { Pagination, PaginationInfo }
export type { PaginationProps, PaginationInfoProps }