StatusStrip

A row of per-period bars, such as 90 days of uptime.

90 days ago99.95% uptimeToday

View code

tsx

<StatusStrip
	label="api.acme.dev uptime, last 90 days"
	summary="99.95% uptime"
	start="90 days ago"
	end="Today"
	periods={days.map((day) => ({ status: day.status, label: formatDay(day.date), value: day.uptime }))}
/>

Demo apps

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

CMSInkwellInkwell, a demo CMS built from @sdxc/ui/app: posts with count tabs and quick edit, an editor with a quiet save status and a loud Publish, media and settings./demo/apps/inkwell
Ops dashboardPulsePulse, an invented ops dashboard: Northwind's services with live filters, a peek sheet and a bulk bar, metrics that switch one chart, incidents, deploys and settings./demo/apps/pulse
Support inboxRelayRelay, an invented support inbox: mailboxes, conversations and the open conversation on one screen, with contacts, reports and settings./demo/apps/relay

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 { StatusStrip } from "@sdxc/ui/app";

Renders one bar per period as a button named by its label and value, inside a toolbar named by label, then the caption. The newest bar is the strip's one Tab stop, and StatusStripKeys moves it with the arrows; a bar's tooltip shows on hover and keyboard focus with no script.

Props

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

Prop	Type	Required	Description
`periods`	`readonly Period[]`	Yes
`label`	`string`	Yes	Accessible name of the bars' toolbar ("Uptime, last 90 days").
`summary`	`RemixNode`	No	The summary figure set in the middle of the caption ("99.95% uptime").
`start`	`RemixNode`	No	Caption under the oldest end ("90 days ago").
`end`	`RemixNode`	No	Caption under the newest end ("Today").
`parts`	`PartsProps`	No

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

Types

Name	Values	What it decides
`Status`	`"up" \| "degraded" \| "down" \| "paused" \| "no-data"`	What one period recorded: `up` is success, `degraded` warning, `down` danger, `paused` neutral, and `no-data` a hatched bar that reads as unknown rather than as zero.