DocsPager

The previous and next links closing a docs page.

View code

tsx

let { previous, next } = findNeighbours(tree, "/docs/monitors/http");

<DocsPager
	previous={previous}
	next={next}
	section="Monitors"
	labels={{ nav: "Pagination", previous: "Previous", next: "Next" }}
/>

Demo docs sites

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Content docsDriftwood DocsGuides for Driftwood, a command line that deploys static sites: a tutorial, how-to guides and concept pages./demo/docs/driftwood
Component docsLattice DocsDocs for Lattice UI, a component library: an index of components, each with live previews, props and accessibility notes./demo/docs/lattice
API referenceParcelo DocsThe HTTP API reference for Parcelo, a shipping-label API: resources, endpoints with request and response fields, and examples in three languages./demo/docs/parcelo
Utilities docsTempo DocsReference for Tempo, an invented library of CSS utilities: every spacing, colour, layout, type and effect utility drawn beside its call and the CSS it emits./demo/docs/tempo

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { DocsPager } from "@sdxc/ui/docs";

Renders the pair of neighbours, or nothing when the page has neither. A card with no partner fills the row on its own, and the pair stacks when the pager is under 36rem wide.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`previous`	`Entry \| null`	No
`next`	`Entry \| null`	No
`section`	`string`	No	Section of the page being read; a destination in another section names its own.
`labels`	`Labels`	Yes

Also accepts everything in Omit<TagProps<"nav">, "children">.