# StatusStrip

> A row of per-period bars, such as 90 days of uptime: each bar is tinted by its status, hatched where nothing was recorded, and shows its date and value on hover or focus, with a caption naming the window and the summary figure.

```ts
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.

## Examples

```tsx
<StatusStrip
	label={t("monitor.uptimeWindow")}
	summary={t("monitor.uptime", { percent: "99.95" })}
	start={t("time.daysAgo", { count: 90 })}
	end={t("time.today")}
	periods={days.map((day) => ({ status: day.status, label: formatDay(day.date), value: formatUptime(day) }))}
/>
```

## Props

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

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. |