صفحه‌بندی (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}
/>