import * as React from "react"; import { ArrowRight, ExternalLink, FileWarning, LifeBuoy, Mail, } from "lucide-react"; import { MaintenancePageTransparentDowntimeOne } from "@/registry/maintenance-page-transparent-downtime-one/maintenance-page-transparent-downtime-one"; 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 MaintenancePageTransparentDowntimeOne >; type RecoveryPhase = NonNullable[number]; type ImpactByTier = NonNullable[number]; type RecoveryFaqItem = NonNullable[number]; const initialTimeline: RecoveryPhase[] = [ { id: "phase-monitoring", title: "Mitigation in progress across data pipeline", summary: "Engineers have re-routed ingestion traffic and are validating queue drain rates. Customers may still experience delayed dashboards while we backfill analytics events.", etaLabel: "Next checkpoint in 25 minutes", timestampLabel: "4 minutes ago", status: "mitigating", highlights: [ "Realtime ingestion temporarily paused to preserve data integrity", "Restoring historical queries with elevated cache TTLs", ], tooltip: "Rerouted traffic includes EU-West and APAC shards. Throughput is currently at 68% of baseline while the mitigation completes.", actions: [ { id: "status-feed", label: "Open live status feed", href: "https://status.nextbase.dev", icon: , target: "_blank", rel: "noreferrer", }, ], dismissible: true, }, { id: "phase-investigating", title: "Identified fault within stream processing layer", summary: "A configuration drift in our analytics stream triggered unbounded retries for high-volume tenants. We have isolated the regression and are deploying a patched release.", etaLabel: "Patch rollout at 09:20 UTC", timestampLabel: "14 minutes ago", status: "investigating", highlights: [ "Impact limited to analytics dashboards and scheduled exports", "API write traffic, authentication, and billing remain operational", ], tooltip: ( <> The faulty configuration was introduced during yesterday's shard expansion. Rate limiting failed to clamp retry bursts, causing cascading slowdowns across the topic. ), dismissible: true, }, { id: "phase-history", title: "Transparent retrospective will publish post-recovery", summary: "Once stability is confirmed, we will post a detailed incident review that documents contributing factors and the safeguards being added to prevent recurrence.", status: "monitoring", timestampLabel: "32 minutes ago", highlights: [ "Retrospective will include actionable next steps for enterprise runbooks", "We invite customers to join the follow-up AMA with our product team", ], actions: [ { id: "register-ama", label: "Register for AMA", href: "https://nextbase.dev/events/ama", icon: , target: "_blank", rel: "noreferrer", }, ], }, ]; const impactByTier: ImpactByTier[] = [ { id: "tier-enterprise", tier: "Enterprise workspaces", impact: "Dashboards loading with stale data. Automated compliance exports paused until backfill completes.", etaLabel: "Refresh in ~45 minutes", tone: "critical", }, { id: "tier-growth", tier: "Growth plans", impact: "Realtime charts delayed by up to 15 minutes; webhooks continue delivering payloads with accurate timestamps.", tone: "warning", }, { id: "tier-starter", tier: "Starter and sandbox", impact: "No material impact detected. Monitoring telemetry for regressions.", tone: "positive", }, ]; const faqItems: RecoveryFaqItem[] = [ { id: "faq-data-integrity", question: "Will my historical analytics remain accurate?", answer: "Yes. Once the mitigation finishes, we reprocess affected partitions to ensure every event is accounted for. Exports and reporting APIs will reflect the corrected data automatically.", audienceLabel: "Analytics leads", }, { id: "faq-notifications", question: "How will I know when the incident is fully resolved?", answer: "Subscribe to notifications above or follow the public status feed. We'll also send a post-incident report to all workspace owners once stability is confirmed.", audienceLabel: "Workspace owners", }, { id: "faq-compensation", question: "Does this qualify for SLA credits?", answer: "Enterprise contracts with analytics uptime commitments are eligible for review. Contact your account team using the support escalation option to start the process.", }, ]; export function MaintenancePageTransparentDowntimeOneDemo() { const [timeline, setTimeline] = React.useState(initialTimeline); const [liveLabel, setLiveLabel] = React.useState( "Live incident updates from our status team", ); React.useEffect(() => { const timeout = window.setTimeout(() => { setTimeline((prev) => { if (prev.some((phase) => phase.id === "phase-resolution")) { return prev; } return [ { id: "phase-resolution", title: "Services stabilizing as recovery completes", summary: "All analytics shards are back online and caches are warming. Customers should see dashboards updating within the next 10 minutes while we validate long-tail exports.", status: "resolved", timestampLabel: "moments ago", etaLabel: "Verification concludes in 10 minutes", highlights: [ "Processing throughput restored to 102% of baseline", "Final validation runs executing against customer audit datasets", ], actions: [ { id: "share-retrospective", label: "Preview retrospective outline", href: "https://nextbase.dev/incident/retrospective", icon: , target: "_blank", rel: "noreferrer", }, ], dismissible: true, }, ...prev, ]; }); setLiveLabel("New recovery milestone posted moments ago"); }, 9_000); return () => window.clearTimeout(timeout); }, []); const handleDismissPhase = React.useCallback((phaseId: string) => { setTimeline((prev) => prev.filter((phase) => phase.id !== phaseId)); }, []); const primaryAction = React.useMemo( () => ({ label: "Get notified", onClick: () => { console.log("Subscribed to outage notifications"); }, icon:

Simple