Status page
Where things stand: the overall state in words and colour, each service on its line, the incidents — or, for what is not built yet, its progress and how to hear about it.
Web only — React, from @krizaka/ui/status-page. Beta: its API may still change in a minor version.
Why it is here. krizaka.com migrating its pages to the specialised template (TPL): /status and the "under construction" pages.
When to use
- A service status page.
- An « under construction » page that says honestly what is coming.
When not to use
- For what changed over time.Use instead: Changelog page
- For a page that does not exist.Use instead: Error page
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { StatusPage } from "@krizaka/ui/status-page";Examples
Status
Three services, one slower than usual.
Status
How things are running
- krizaka.comOperational
- OrochiaOperational
- Video deliverySlower than usual
Under construction
Yasakia on its way: progress and how to hear about it.
Yasakia
On its way
Meet by talking first. The first build reaches testers this winter.
Planned maintenance
What is paused until when, and what still works.
Maintenance
Back at 06:00
We are moving the database to a bigger machine. Nothing is lost; writes are paused.
- Watching videosWorks
- Unlocks and tipsPaused
- UploadsPaused
Props
A status page — or an « under construction » one: the overall state, each service, then incidents or progress.
| Prop | Type | Default | Description |
|---|---|---|---|
staterequired | ServiceState | — | The overall state. |
stateLabelrequired | ReactNode | — | The overall state, in words (All systems operational). |
titlerequired | ReactNode | — | The page's h1 (Status, Yasakia is on its way). |
aside | ReactNode | — | Beside the hero: a bird (the pigeon that delivers, the duck that builds). |
back | { href: string; label: string; } | — | The way back. |
checked | ReactNode | — | When it was checked (Checked 2 min ago). |
eyebrow | ReactNode | — | A mono line above the title. |
lead | ReactNode | — | One sentence under it. |
linkAs | LinkComponent | — | The app's link component (Next's Link). |
services | readonly { id: string; name: ReactNode; state: ServiceState; label: ReactNode; }[] | — | The services and their states, in words: { id, name, state, label }. |
servicesLabel | string | Services | The services list's accessible name (Services). |
Accessibility
- The overall state is a
statusregion. - Each service says its state in words beside its dot.
Best practices
- Always say the state in words; the colour only repeats it.
- Under construction: show progress and a way to follow, never a fake screen.
- Words and content arrive as props; the motion is the platform's (
[data-reveal], still under reduced motion).
Related components
Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub