Pagination

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

const TOTAL = 128;

function rangeOf(page: number, size: number): string {
  const from = (page - 1) * size + 1;
  return `${String(from)}-${String(Math.min(page * size, TOTAL))} of ${String(TOTAL)}`;
}

function Interactive({ type = "full" }: { type?: Exclude<PaginationType, "load-more"> }) {
  const [page, setPage] = useState(2);
  const [size, setSize] = useState(10);
  const pageCount = Math.ceil(TOTAL / size);
  return (
    <Pagination
      aria-label="Employees"
      type={type}
      page={Math.min(page, pageCount)}
      pageCount={pageCount}
      onPageChange={setPage}
      range={rangeOf(Math.min(page, pageCount), size)}
      caption={`${String(TOTAL)} employees`}
      pageSize={size}
      onPageSizeChange={(next) => {
        setSize(next);
        setPage(1);
      }}
    />
  );
}

export function Types() {
  return (
    <div className="flex max-w-xl flex-col gap-6">
      <Interactive type="compact" />
      <Interactive type="simple" />
      <Interactive type="mobile" />
    </div>
  );
}

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

const TOTAL = 128;

export function LoadMore() {
  function Feed({ isLoading }: { isLoading?: boolean }) {
    const [loaded, setLoaded] = useState(20);
    return (
      <Pagination
        aria-label="Employees"
        type="load-more"
        range={`1-${String(loaded)} of ${String(TOTAL)}`}
        progress={(loaded / TOTAL) * 100}
        {...(isLoading === undefined ? {} : { isLoading })}
        onLoadMore={() => {
          setLoaded(Math.min(TOTAL, loaded + 20));
        }}
      />
    );
  }
  return (
    <div className="flex max-w-md flex-col gap-4">
      <Feed />
      <Feed isLoading />
    </div>
  );
}

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

export function Collapsing() {
  return (
    <div className="flex flex-col gap-2">
      <Pagination aria-label="Default counts" page={10} pageCount={30} />
      <Pagination aria-label="No siblings" page={10} pageCount={30} siblingCount={0} />
      <Pagination aria-label="Wide" page={10} pageCount={30} siblingCount={2} boundaryCount={2} />
    </div>
  );
}

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

export function Ends() {
  return (
    <div className="flex flex-col gap-2">
      <Pagination aria-label="First page" page={1} pageCount={13} />
      <Pagination aria-label="Last page" page={13} pageCount={13} />
    </div>
  );
}

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

export function PageLinks() {
  return (
    <Pagination
      pageCount={13}
      page={2}
      aria-label="Employees (links)"
      getPageHref={(page) => `#page-${String(page)}`}
    />
  );
}

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

export function NarrowWidth() {
  return (
    <div className="max-w-xs">
      <Pagination
        aria-label="Employees (narrow)"
        page={6}
        pageCount={13}
        siblingCount={0}
        range="51-60 of 128"
        pageSize={10}
        defaultPage={6}
      />
    </div>
  );
}

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

export function LongLabels() {
  return (
    <div className="flex max-w-sm flex-col gap-4">
      <Pagination
        aria-label="Mitarbeiterverzeichnis"
        type="simple"
        page={2}
        pageCount={13}
        range="Einträge 11 bis 20 von insgesamt 128 Mitarbeitenden"
        labels={{ previousText: "Vorherige Seite", nextText: "Nächste Seite" }}
      />
      <Pagination
        aria-label="Mitarbeiterverzeichnis (mobil)"
        type="mobile"
        page={2}
        pageCount={13}
        range="Einträge 11 bis 20 von 128"
        caption="128 Mitarbeitende in Berlin, München und Hamburg"
      />
    </div>
  );
}

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

export function RightToLeft() {
  return (
    <div className="flex flex-col gap-4">
      <Pagination
        aria-label="الموظفون"
        page={5}
        pageCount={20}
        range="١١–٢٠ من ١٢٨"
        defaultPageSize={20}
        labels={{
          previous: "الصفحة السابقة",
          next: "الصفحة التالية",
          first: "الصفحة الأولى",
          last: "الصفحة الأخيرة",
          page: (page) => `صفحة ${String(page)}`,
          rowsPerPage: "الصفوف في الصفحة",
        }}
      />
      <Pagination aria-label="الموظفون (مضغوط)" type="compact" page={2} pageCount={13} />
    </div>
  );
}