@amsterdam/design-system-react/dist/Pagination/Pagination.js

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ChevronBackwardIcon, ChevronForwardIcon } from '@amsterdam/design-system-react-icons';
import { clsx } from 'clsx';
import { forwardRef } from 'react';
import { Icon } from '../Icon/Icon';
import { getRange } from './getRange';
import { LinkItem } from './LinkItem';
import { Spacer } from './Spacer';
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-pagination--docs Pagination docs at Amsterdam Design System}
 */
export const Pagination = forwardRef(({ accessibleName, accessibleNameId, className, linkComponent = (props) => _jsx("a", { ...props }), linkTemplate, maxVisiblePages = 7, nextAccessibleName, nextLabel = 'volgende', nextVisuallyHiddenLabel, page = 1, previousAccessibleName, previousLabel = 'vorige', previousVisuallyHiddenLabel, totalPages, visuallyHiddenLabel, visuallyHiddenLabelId, ...restProps }, ref) => {
    // Don't show pagination if you only have one page
    if (totalPages <= 1) {
        return null;
    }
    const Link = linkComponent;
    // Get array of page numbers and / or spacers
    const range = getRange(page, totalPages, maxVisiblePages);
    return (_jsxs("nav", { ...restProps, "aria-labelledby": accessibleNameId || visuallyHiddenLabelId || 'ams-pagination-a11y-label', className: clsx('ams-pagination', className), ref: ref, children: [_jsx("span", { className: "ams-visually-hidden", id: accessibleNameId || visuallyHiddenLabelId || 'ams-pagination-a11y-label', children: accessibleName || visuallyHiddenLabel || 'Paginering' }), page !== 1 && (_jsxs(Link, { className: "ams-pagination__link", href: linkTemplate(page - 1), rel: "prev", children: [_jsx(Icon, { svg: ChevronBackwardIcon }), _jsx("span", { className: "ams-visually-hidden", children: previousAccessibleName || previousVisuallyHiddenLabel || 'Vorige pagina' }), _jsx("span", { "aria-hidden": true, children: previousLabel })] })), _jsx("ol", { className: "ams-pagination__list", children: range.map((pageNumberOrSpacer) => typeof pageNumberOrSpacer === 'number' ? (_jsx(LinkItem, { currentPage: page, linkComponent: linkComponent, linkTemplate: linkTemplate, pageNumber: pageNumberOrSpacer }, pageNumberOrSpacer)) : (_jsx(Spacer, {}, pageNumberOrSpacer))) }), page !== totalPages && (_jsxs(Link, { className: "ams-pagination__link", href: linkTemplate(page + 1), rel: "next", children: [_jsx("span", { className: "ams-visually-hidden", children: nextAccessibleName || nextVisuallyHiddenLabel || 'Volgende pagina' }), _jsx("span", { "aria-hidden": true, children: nextLabel }), _jsx(Icon, { svg: ChevronForwardIcon })] }))] }));
});
Pagination.displayName = 'Pagination';