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 uniquement — React, depuis @krizaka/ui/status-page. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- A service status page.
- An « under construction » page that says honestly what is coming.
Quand ne pas l’utiliser
- For what changed over time.À la place : Changelog page
- For a page that does not exist.À la place : Error page
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { StatusPage } from "@krizaka/ui/status-page";Exemples
Status
Three services, one slower than usual.
Status
How things are running
- krizaka.comOperational
- OrochiaOperational
- Video deliverySlower than usual
Under construction
Yazakia on its way: progress and how to hear about it.
Yazakia
On its way
Meet by talking first. The first build reaches testers this winter.
Props
A status page — or an « under construction » one: the overall state, each service, then incidents or progress.
| Prop | Type | Défaut | Description |
|---|---|---|---|
staterequis | ServiceState | — | The overall state. |
stateLabelrequis | ReactNode | — | The overall state, in words (All systems operational). |
titlerequis | ReactNode | — | The page's h1 (Status, Yazakia 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). |
Accessibilité
- The overall state is a
statusregion. - Each service says its state in words beside its dot.
Bonnes pratiques
- 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).
Composants liés
Générée depuis le code de @krizaka/ui 2.10.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub
Product page
A product's overview in its brand: split hero with facts and the product alive, the traps it removes as compact argument cards, its decisions with their cost, the promise a bird keeps, the closing call.
Card
The composed chassis of every card: a media with overlays, a body with a title, a description, stats and a footer.