Error, maintenance · Klarhimmel UI

Install

npx shadcn add @klarhimmel/error-maintenance

Usage

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import ErrorMaintenance from '@/components/klarhimmel/blocks/error-maintenance';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <ErrorMaintenance props={{
          "status": "Scheduled maintenance",
          "title": "We are upgrading the booking system",
          "description": "Reservations are paused while we move to faster servers. Existing bookings are safe and nothing needs to be done on your side.",
          "back": "Back at 14:00 CET today",
          "updatesTitle": "Progress",
          "updates": [
            {
              "time": "12:00",
              "text": "Maintenance started. Bookings paused."
            },
            {
              "time": "12:40",
              "text": "Data copied. Running final checks."
            },
            {
              "time": "13:15",
              "text": "On track, no issues found."
            }
          ],
          "contact": {
            "label": "Need a room today? Call us",
            "href": "tel:+46000000000"
          }
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

$import Block from '@/components/klarhimmel/blocks/error-maintenance';

Also called

error/maintenance

Category: Not found, server error and maintenance pages.

Notes

When to use it

A planned-downtime page with a status pill, a back-at time and a short log of updates. For an unplanned fault use `error-status`.

Writing for it

- Status holds 40 characters and the back line 80. Write an actual time and time zone, because that is the answer the reader came for. - Updates take a time of 20 characters and a text of 140, up to 4 entries. Newest first reads best, since the list is not sorted. - The description holds 300 characters. Say what is affected and what is safe, for example that existing bookings are unchanged.

Watch out for

When updates is empty the log card and its heading are removed in the published page. The status pill and the contact link also vanish when their fields are empty.

Pairs well with

Usage

The block in a page, with its default content (long lists shortened). Every prop is in the table below.

section.tsx

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import ErrorMaintenance from '@/components/klarhimmel/blocks/error-maintenance';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <ErrorMaintenance props={{
          "status": "Scheduled maintenance",
          "title": "We are upgrading the booking system",
          "description": "Reservations are paused while we move to faster servers. Existing bookings are safe and nothing needs to be done on your side.",
          "back": "Back at 14:00 CET today",
          "updatesTitle": "Progress",
          "updates": [
            {
              "time": "12:00",
              "text": "Maintenance started. Bookings paused."
            },
            {
              "time": "12:40",
              "text": "Data copied. Running final checks."
            },
            {
              "time": "13:15",
              "text": "On track, no issues found."
            }
          ],
          "contact": {
            "label": "Need a room today? Call us",
            "href": "tel:+46000000000"
          }
        }} />
      </BlockSurface>
    </Theme>
  );
}

Props

The type, default and text limit of every prop. On a real page, over-limit text is kept and checkSections flags it (Installation, Check a page before you ship); this live preview shows the default until it fits. The panel above edits all props.

Prop	Type	Default	Description
`status`	`string`	`'Scheduled maintenance'`	Text, up to 40 characters.
`title`	`string`	`'We are upgrading the booking system'`	Text, up to 100 characters.
`description`	`string`	`'Reservations are paused while we mo…'`	Text, up to 300 characters.
`back`	`string`	`'Back at 14:00 CET today'`	Text, up to 80 characters.
`updatesTitle`	`string`	`'Progress'`	Text, up to 60 characters.
`updates`	`{ time, text }[]`	`3 items`	List of up to 4. Each item: time, text.
`contact`	`Link`	`{…}`	See the type.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.