Record pager | Arbol UI

Language

Appearance

Between pages

Each arrow is a link; the first record has no previous one.

import { RecordPager } from '@arbol-ai/ui';

<RecordPager label="Move between conversations" nextHref="#/record-pager" position={1} total={128} />

In place

Press K or J (outside a field) to move through the recipients.

Laura Gómez

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

const RECIPIENTS = ['Laura Gómez', 'Andrés Ruiz', 'Marta Díaz', 'Jorge Peña'];

const RecipientPager = () => {
  const [index, setIndex] = useState(0);
  return (
    <div className="flex items-center gap-3">
      <RecordPager
        label="Move between the campaign’s recipients"
        onNext={
          index < RECIPIENTS.length - 1
            ? () => {
                setIndex(index + 1);
              }
            : undefined
        }
        onPrevious={
          index > 0
            ? () => {
                setIndex(index - 1);
              }
            : undefined
        }
        position={index + 1}
        total={RECIPIENTS.length}
      />
      <p className="text-sm font-medium">{RECIPIENTS[index]}</p>
    </div>
  );
};

<RecipientPager />

Source

The examples above are src/blocks/record-pager/record-pager.examples.tsx, which the library’s tests render too.