Pagination

import { PaginationCardDefault } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

export default function PaginationBasic() {
  const [page, setPage] = useState(1);

  return (
    <PaginationCardDefault
      page={page}
      totalPages={10}
      onPageChange={setPage}
    />
  );
}

import { PaginationCardMinimal } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

export default function PaginationMinimal() {
  const [page, setPage] = useState(1);

  return (
    <PaginationCardMinimal
      page={page}
      totalPages={10}
      onPageChange={setPage}
    />
  );
}

import { PaginationCardMinimal } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

export default function PaginationCustomLabel() {
  const [page, setPage] = useState(1);

  return (
    <PaginationCardMinimal
      page={page}
      totalPages={10}
      onPageChange={setPage}
      labelFormatter={(page, total) => `${page} / ${total}`}
    />
  );
}