صفحه‌بندی (Pagination)

import { PaginationControlled } from '@parto-system-design/ui'
import { useState } from 'react'

export default function MyComponent() {
  const [currentPage, setCurrentPage] = useState(2)

  return <PaginationControlled currentPage={currentPage} totalPages={10} onPageChange={setCurrentPage} />
}

import { PaginationControlled } from '@parto-system-design/ui'

export default function MyComponent() {
  const [page, setPage] = useState(5)

  return (
    <PaginationControlled
      currentPage={page}
      totalPages={20}
      onPageChange={setPage}
      siblingCount={2} // تعداد صفحات در هر طرف صفحه فعلی
      showFirstLast={true} // نمایش دکمه‌های اول و آخر
      showPrevNext={true} // نمایش دکمه‌های قبلی و بعدی
      showEllipsis={true} // نمایش ellipsis برای صفحات مخفی
      dir="rtl" // جهت متن
    />
  )
}

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
  PaginationEllipsis,
} from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <Pagination dir="rtl">
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" isActive>
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

const [page, setPage] = useState(1)

;<PaginationControlled currentPage={page} totalPages={5} onPageChange={setPage} />

const [page, setPage] = useState(10)

;<PaginationControlled
  currentPage={page}
  totalPages={100}
  onPageChange={setPage}
  siblingCount={2}
  showEllipsis={true}
/>

const [page, setPage] = useState(5)

;<PaginationControlled
  currentPage={page}
  totalPages={20}
  onPageChange={setPage}
  showFirstLast={true}
  siblingCount={1}
/>

<PaginationControlled currentPage={page} totalPages={10} onPageChange={setPage} showPrevNext={false} />