A footer with a live status card: a pulsing system state, a 90 day uptime strip you can scrub with the pointer or arrow keys to read each day, and per service states, beside a four column sitemap.
npx shadcn@latest add https://hyperblur.dev/r/footer-sitemap-status.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/footer-sitemap-status.tsx.
import { FooterSitemapStatus } from "@/components/hyperblur/footer-sitemap-status"
<FooterSitemapStatus status="degraded" />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Ledgerline" | Brand name. |
| description | string | Short description under the brand. | |
| status | "operational" | "degraded" | "outage" | "operational" | Overall state shown with the pulsing dot. |
| statusHref | string | "#" | Link for the status headline. |
| history | { label: string; uptime: number; note?: string }[] | 90 days | One entry per bar, oldest first. Uptime is a percentage. |
| services | { name: string; state: "operational" | "degraded" | "outage" }[] | 3 services | Service rows under the strip. |
| groups | { title: string; links: { label: string; href: string }[] }[] | 4 groups | Sitemap columns. |
| copyright | string | "© 2026 Ledgerline, Inc." | Copyright line. |
| legal | { label: string; href: string }[] | 4 links | Legal links. |
| accent | string | "#22d3ee" | Logo, focus and column marker color. |
| className | string | "" | Extra classes for the root element. |
| style | CSSProperties | Inline styles merged after the accent variables. |