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.
Pourquoi il est là. krizaka.com migrating its pages to the specialised template (TPL): /status and the "under construction" pages.
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
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 | 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, 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). |
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 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub