Maintenance

Inform users about downtimes, updates, or scheduled maintenance

npm create webcore@latest add Maintenance

Use the Maintenance component to keep your users informed about service availability. The component helps you display a scheduled maintenance notice to your users:

---
import Maintenance from '@blocks/Maintenance.astro'
---

<Maintenance />

The Maintenance component can be used as-is, without any props, in which case, the above component will be rendered. To disable animation, set the animated prop to false:

<Maintenance animated={false} />

Custom Properties

To customize titles and the icon, you can use the img, title and subTitle props.

Maintenance

We are currently doing scheduled maintenance. Our website will be back up and running shortly.
Keep up to date about our status on our X profile.

<Maintenance
    img={{ url: '/logo.png', height: 200 }}
    title="Maintenance"
    subTitle="We are currently doing scheduled maintenance..."
/>

The img prop expects an object with a url property. You can further customize the image by specifying alt, width, and height properties. The subTitle prop also supports HTML tags.

API

type MaintenanceProps = {
    img?: {
        url: string
        alt: string
        width: number
        height: number
    }
    animated?: boolean
    title?: string
    subTitle?: string
    className?: string
}