Extract admin dashboard from ghabilee-frontend2 into a dedicated Next.js app for backoffice.ghabilee.ir (no SEO indexing / Clarity).
72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
'use client'
|
||
|
||
import { Pagination as HeroPagination } from '@heroui/react'
|
||
|
||
interface PaginationProps {
|
||
className?: string
|
||
color?: string
|
||
isCompact?: boolean
|
||
page: number
|
||
showControls?: boolean
|
||
showShadow?: boolean
|
||
total: number
|
||
onChange: (page: number) => void
|
||
}
|
||
|
||
function visiblePages(page: number, total: number): number[] {
|
||
const start = Math.max(1, Math.min(page - 2, total - 4))
|
||
const end = Math.min(total, start + 4)
|
||
|
||
return Array.from({ length: Math.max(0, end - start + 1) }, (_, index) => start + index)
|
||
}
|
||
|
||
export function Pagination({ className, page, showControls = true, total, onChange }: PaginationProps) {
|
||
const pages = visiblePages(page, total)
|
||
|
||
return (
|
||
<HeroPagination
|
||
aria-label="صفحهبندی"
|
||
className={className}
|
||
>
|
||
<HeroPagination.Content>
|
||
{showControls ? (
|
||
<HeroPagination.Item>
|
||
<HeroPagination.Previous
|
||
isDisabled={page <= 1}
|
||
onPress={() => {
|
||
onChange(page - 1)
|
||
}}
|
||
>
|
||
‹
|
||
</HeroPagination.Previous>
|
||
</HeroPagination.Item>
|
||
) : null}
|
||
{pages.map((item) => (
|
||
<HeroPagination.Item key={item}>
|
||
<HeroPagination.Link
|
||
isActive={item === page}
|
||
onPress={() => {
|
||
onChange(item)
|
||
}}
|
||
>
|
||
{item}
|
||
</HeroPagination.Link>
|
||
</HeroPagination.Item>
|
||
))}
|
||
{showControls ? (
|
||
<HeroPagination.Item>
|
||
<HeroPagination.Next
|
||
isDisabled={page >= total}
|
||
onPress={() => {
|
||
onChange(page + 1)
|
||
}}
|
||
>
|
||
›
|
||
</HeroPagination.Next>
|
||
</HeroPagination.Item>
|
||
) : null}
|
||
</HeroPagination.Content>
|
||
</HeroPagination>
|
||
)
|
||
}
|