CursorPager

import { CursorPager } from "@nexera-ui/react";

<CursorPager
  aria-label="Activity"
  context="Showing activity from 1 to 7 Oct"
  status="first-page"
/>;

import { CursorPager } from "@nexera-ui/react";

<CursorPager aria-label="Activity" context="Showing activity from 1 to 7 Oct" status="last-page" />;

import { useState } from "react";
import { CursorPager } from "@nexera-ui/react";

const weeks = ["1 to 7 Oct", "8 to 14 Oct", "15 to 21 Oct"];

export function Interactive() {
  function Log() {
    const [index, setIndex] = useState(0);
    return (
      <CursorPager
        aria-label="Activity (interactive)"
        {...(index === 0
          ? { status: "first-page" as const }
          : index === weeks.length - 1
            ? { status: "last-page" as const }
            : {})}
        context={`Showing activity from ${weeks[index] ?? ""}`}
        onPrevious={() => {
          setIndex(index - 1);
        }}
        onNext={() => {
          setIndex(index + 1);
        }}
      />
    );
  }
  return <Log />;
}

import { CursorPager } from "@nexera-ui/react";

<CursorPager
  aria-label="Activity"
  context="Showing activity from 1 to 7 Oct"
  previousHref="#before"
  nextHref="#after"
/>;

import { CursorPager } from "@nexera-ui/react";

export function NarrowWidth() {
  return (
    <div className="max-w-xs">
      <CursorPager context="Showing activity from 1 to 7 Oct" aria-label="Activity (narrow)" />
    </div>
  );
}

import { CursorPager } from "@nexera-ui/react";

export function LongLabels() {
  return (
    <div className="max-w-sm">
      <CursorPager
        aria-label="Aktivitätsprotokoll"
        context="Aktivitäten vom 1. bis 7. Oktober aus allen Teams und Standorten"
        previousLabel="Frühere Einträge"
        nextLabel="Spätere Einträge"
      />
    </div>
  );
}

import { CursorPager } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <CursorPager
      aria-label="النشاط"
      context="عرض النشاط من ١ إلى ٧ أكتوبر"
      previousLabel="السابق"
      nextLabel="التالي"
    />
  );
}