import * as React from "react"; import { BookOpen, FileText, LifeBuoy } from "lucide-react"; import { MaintenancePageRollingUpdateFive } from "@/registry/maintenance-page-rolling-update-five/maintenance-page-rolling-update-five"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof MaintenancePageRollingUpdateFive >; type IncidentFeedEntry = NonNullable[number]; type FeatureAvailabilityToggle = NonNullable< ComponentProps["featureAvailability"] >[number]; type ResourceLink = NonNullable[number]; const incidents: IncidentFeedEntry[] = [ { id: "incident-update-1", timestamp: "10:04", type: "update", title: "Shard migration 60% complete", description: "Five of eight database shards have successfully migrated. Cache warm-up in progress while read replicas sync.", actions: [ { label: "View migration logs", href: "https://nextbase.dev/logs/migration", }, ], }, { id: "incident-update-2", timestamp: "09:36", type: "mitigation", title: "Temporarily pausing webhooks", description: "Webhook deliveries paused while we validate replay queue integrity. Expected to resume within 20 minutes.", }, { id: "incident-update-3", timestamp: "09:00", type: "note", title: "Background context", description: "Rolling deploy updates the analytics warehouse to Aurora 15 with failover improvements.", }, { id: "incident-update-4", timestamp: "08:15", type: "resolved", title: "Auth service hotfix deployed", description: "Authentication latency returned to baseline after redeploying the hotfix patch to EU-West.", }, ]; const resources: ResourceLink[] = [ { id: "kb-maintenance", label: "Customer-ready maintenance FAQ", description: "Templates to answer common downtime questions.", href: "https://nextbase.dev/docs/maintenance-faq", icon: , }, { id: "kb-runbook", label: "Incident response runbook", description: "Playbook for coordinating cross-team responses.", href: "https://nextbase.dev/docs/runbook", icon: , }, { id: "kb-support", label: "Support escalation matrix", description: "Match customer tier to response commitments.", href: "https://nextbase.dev/docs/support-matrix", icon: , }, ]; const featureAvailability: FeatureAvailabilityToggle[] = [ { id: "dashboards", label: "Dashboards", state: "partial", description: "Realtime widgets paused; historical charts available.", }, { id: "exports", label: "Scheduled exports", state: "offline", description: "Queued until maintenance completes.", }, { id: "api", label: "Public API", state: "available", description: "Rate-limited for high-volume tenants.", }, ]; export function MaintenancePageRollingUpdateFiveDemo() { const [toggles, setToggles] = React.useState(featureAvailability); return (

Resume webhook deliveries once replay verification passes.

Backfill analytics for EU-West tenants.

Post final incident retrospective within 24 hours.

), }, { id: "mitigation", label: "Mitigation details", content: (

We throttled ingestion to 70% of baseline while caches warm. Customers can monitor latency in the real-time telemetry dashboard.

), }, ]} smsOptIn={{ title: "Prefer SMS alerts?", description: "Receive a text whenever we publish a new incident update.", disclaimer: "Msg & data rates may apply. Reply STOP to unsubscribe.", onSubmit: (phoneNumber) => { console.log("SMS opt-in", phoneNumber); }, }} onToggleFeature={(featureId, next) => { setToggles((prev) => prev.map((feature) => feature.id === featureId ? { ...feature, state: next } : feature, ), ); console.log("Feature toggled", featureId, next); }} /> ); } export default MaintenancePageRollingUpdateFiveDemo;

Simple