@hypothesis/frontend-shared/lib/pattern-library/components/patterns/navigation/PaginationPage.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/navigation/PaginationPage.tsx";
import { useState } from 'preact/hooks';
import { Pagination } from '../../../../';
import Library from '../../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function PaginationPage() {
  const [currentPage, setCurrentPage] = useState(1);
  return _jsxDEV(Library.Page, {
    title: "Pagination",
    intro: _jsxDEV("p", {
      children: [_jsxDEV("code", {
        children: "Pagination"
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 14,
        columnNumber: 11
      }, this), " is a component that allows navigating between pages in a paginated set of items."]
    }, void 0, true, {
      fileName: _jsxFileName,
      lineNumber: 13,
      columnNumber: 9
    }, this),
    children: _jsxDEV(Library.Section, {
      children: [_jsxDEV(Library.SectionL2, {
        children: [_jsxDEV(Library.Usage, {
          symbolName: "Pagination"
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 21,
          columnNumber: 11
        }, this), _jsxDEV(Library.SectionL3, {
          children: _jsxDEV(Library.Demo, {
            title: "Basic usage",
            withSource: true,
            children: _jsxDEV(Pagination, {
              currentPage: currentPage,
              totalPages: 10,
              onChangePage: page => setCurrentPage(page)
            }, void 0, false, {
              fileName: _jsxFileName,
              lineNumber: 24,
              columnNumber: 15
            }, this)
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 23,
            columnNumber: 13
          }, this)
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 22,
          columnNumber: 11
        }, this)]
      }, void 0, true, {
        fileName: _jsxFileName,
        lineNumber: 20,
        columnNumber: 9
      }, this), _jsxDEV(Library.SectionL2, {
        title: "Component API",
        children: [_jsxDEV(Library.SectionL3, {
          title: "currentPage",
          children: _jsxDEV(Library.Info, {
            children: [_jsxDEV(Library.InfoItem, {
              label: "description",
              children: "The 1-based number of the currently visible page."
            }, void 0, false, {
              fileName: _jsxFileName,
              lineNumber: 36,
              columnNumber: 15
            }, this), _jsxDEV(Library.InfoItem, {
              label: "type",
              children: _jsxDEV("code", {
                children: "number"
              }, void 0, false, {
                fileName: _jsxFileName,
                lineNumber: 40,
                columnNumber: 17
              }, this)
            }, void 0, false, {
              fileName: _jsxFileName,
              lineNumber: 39,
              columnNumber: 15
            }, this)]
          }, void 0, true, {
            fileName: _jsxFileName,
            lineNumber: 35,
            columnNumber: 13
          }, this)
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 34,
          columnNumber: 11
        }, this), _jsxDEV(Library.SectionL3, {
          title: "onChangePage",
          children: _jsxDEV(Library.Info, {
            children: [_jsxDEV(Library.InfoItem, {
              label: "description",
              children: "Callback invoked with the new page number when the user clicks a navigation button."
            }, void 0, false, {
              fileName: _jsxFileName,
              lineNumber: 47,
              columnNumber: 15
            }, this), _jsxDEV(Library.InfoItem, {
              label: "type",
              children: _jsxDEV("code", {
                children: ["(newPage: number) ", '=>', " void"]
              }, void 0, true, {
                fileName: _jsxFileName,
                lineNumber: 52,
                columnNumber: 17
              }, this)
            }, void 0, false, {
              fileName: _jsxFileName,
              lineNumber: 51,
              columnNumber: 15
            }, this)]
          }, void 0, true, {
            fileName: _jsxFileName,
            lineNumber: 46,
            columnNumber: 13
          }, this)
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 45,
          columnNumber: 11
        }, this), _jsxDEV(Library.SectionL3, {
          title: "totalPages",
          children: _jsxDEV(Library.Info, {
            children: [_jsxDEV(Library.InfoItem, {
              label: "description",
              children: "The total number of pages available."
            }, void 0, false, {
              fileName: _jsxFileName,
              lineNumber: 59,
              columnNumber: 15
            }, this), _jsxDEV(Library.InfoItem, {
              label: "type",
              children: _jsxDEV("code", {
                children: "number"
              }, void 0, false, {
                fileName: _jsxFileName,
                lineNumber: 63,
                columnNumber: 17
              }, this)
            }, void 0, false, {
              fileName: _jsxFileName,
              lineNumber: 62,
              columnNumber: 15
            }, this)]
          }, void 0, true, {
            fileName: _jsxFileName,
            lineNumber: 58,
            columnNumber: 13
          }, this)
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 57,
          columnNumber: 11
        }, this)]
      }, void 0, true, {
        fileName: _jsxFileName,
        lineNumber: 33,
        columnNumber: 9
      }, this)]
    }, void 0, true, {
      fileName: _jsxFileName,
      lineNumber: 19,
      columnNumber: 7
    }, this)
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 10,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=PaginationPage.js.map