Pagination

import { useState } from 'react';
import { PAGE_SIZE, Pagination } from '@arbol-ai/ui';

const CONTACTS = Array.from({ length: 52 }, (_, index) => `Contact ${index + 1}`);

const ContactsExample = () => {
  const [page, setPage] = useState(1);
  return (
    <div className="flex max-w-sm flex-col gap-3">
      <ul className="text-sm">
        {CONTACTS.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE).map((contact) => (
          <li key={contact}>{contact}</li>
        ))}
      </ul>
      <Pagination onPage={setPage} page={page} total={CONTACTS.length} />
    </div>
  );
};

<ContactsExample />

import { useState } from 'react';
import { CursorPagination } from '@arbol-ai/ui';

const ConversationsExample = () => {
  const [page, setPage] = useState(1);
  const [isFetching, setIsFetching] = useState(false);
  const go = (next: number) => {
    setIsFetching(true);
    setTimeout(() => {
      setPage(next);
      setIsFetching(false);
    }, 800);
  };
  return (
    <div className="max-w-sm">
      <CursorPagination
        hasNextPage={page < 4}
        hasPreviousPage={page > 1}
        isFetching={isFetching}
        onNext={() => {
          go(page + 1);
        }}
        onPrevious={() => {
          go(page - 1);
        }}
        page={page}
      />
    </div>
  );
};

<ConversationsExample />