4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T1561,type DayStatus = "operational" | "degraded" | "outage" type Day = { status: DayStatus; date: string; note: string } const DAYS = 90 const dotColor: Record = { operational: "bg-success", degraded: "bg-warning", outage: "bg-destructive", } const statusLabel: Record = { operational: "Operational", degraded: "Degraded", outage: "Outage", } const MONTHS = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ] // "Today" is anchored to a fixed date so the demo renders deterministically // (server and client agree, no hydration mismatch). const TODAY = Date.UTC(2026, 5, 26) const DAY_MS = 86_400_000 function dateLabel(i: number): string { const d = new Date(TODAY - (DAYS - 1 - i) * DAY_MS) return `${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}, ${d.getUTCFullYear()}` } function buildDays( exceptions: Record ): Day[] { return Array.from({ length: DAYS }, (_, i) => { const ex = exceptions[i] return { status: ex?.status ?? "operational", date: dateLabel(i), note: ex?.note ?? "No incidents. Service operated normally all day.", } }) } const services: { name: string; uptime: string; days: Day[] }[] = [ { name: "API", uptime: "99.98%", days: buildDays({ 51: { status: "degraded", note: "Elevated response times for 38 minutes after a slow database query. Resolved by rolling back the query plan.", }, }), }, { name: "Dashboard", uptime: "100%", days: buildDays({}) }, { name: "Webhooks", uptime: "99.91%", days: buildDays({ 68: { status: "outage", note: "Delivery outage for 1h 12m during a queue failover. All events were redelivered once service recovered.", }, 80: { status: "degraded", note: "Delayed deliveries for some workspaces over roughly 40 minutes. No events were lost.", }, }), }, { name: "CDN", uptime: "100%", days: buildDays({}) }, ] const legend: DayStatus[] = ["operational", "degraded", "outage"] export default function StatusBlock() { return (

Uptime

99.97% uptime across all services over the last 90 days.

{services.map((service) => (

{service.name} {service.uptime}

{service.days.map((day, i) => ( {day.date} {statusLabel[day.status]} {day.note} ))}

))}

90 Days Ago Today

) } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://7ovr.com/r/status-3.json","proxyUrl":"https://shadcnregistry.com/r/7ovr/status-3","itemId":"@7ovr/status-3"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"registry/blocks/status/3/status-block.tsx","content":"$51","type":"registry:component"}]}]]}],"$L52"]}]

90 Day Uptime Bars

Installation

Files

components

Styles