import * as React from "react"; import { MaintenancePageScheduledCountdownTwo } from "@/registry/maintenance-page-scheduled-countdown-two/maintenance-page-scheduled-countdown-two"; 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 MaintenancePageScheduledCountdownTwo >; type MaintenanceWindowMeta = NonNullable; type TimezoneOption = NonNullable[number]; type MaintenanceTab = NonNullable[number]; type CountdownSegment = NonNullable[number]; const maintenanceWindow: MaintenanceWindowMeta = { title: "Planned platform maintenance for data warehouse migration", summary: "We are upgrading our analytics infrastructure to deliver faster queries and improved redundancy. Expect Reporting and Export APIs to be offline during this window.", startLabel: "March 22, 2026 — 01:00 UTC", endLabel: "March 22, 2026 — 05:00 UTC", timezoneName: "Coordinated Universal Time (UTC)", recommendation: "Switch to your local timezone so distributed teams stay aligned.", meta: [ { label: "Estimated downtime", value: "4 hours" }, { label: "Affected surfaces", value: "Analytics dashboards, scheduled exports", }, ], }; const timezoneOptions: TimezoneOption[] = [ { id: "utc", label: "Coordinated Universal Time", abbreviation: "UTC", startLabel: "March 22 — 01:00", endLabel: "March 22 — 05:00", isDefault: true, }, { id: "pst", label: "Pacific Daylight Time", abbreviation: "PDT", startLabel: "March 21 — 18:00", endLabel: "March 21 — 22:00", }, { id: "ist", label: "India Standard Time", abbreviation: "IST", startLabel: "March 22 — 06:30", endLabel: "March 22 — 10:30", }, { id: "aest", label: "Australian Eastern Time", abbreviation: "AEST", startLabel: "March 22 — 12:00", endLabel: "March 22 — 16:00", }, ]; function getCountdownSegments(target: Date): CountdownSegment[] { const now = new Date(); const delta = Math.max(0, target.getTime() - now.getTime()); const totalSeconds = Math.floor(delta / 1000); const days = Math.floor(totalSeconds / 86400); const hours = Math.floor((totalSeconds % 86400) / 3600); const minutes = Math.floor((totalSeconds % 3600) / 60); const seconds = totalSeconds % 60; return [ { id: "days", label: "Days", value: days, unit: "days" }, { id: "hours", label: "Hours", value: hours, unit: "hours" }, { id: "minutes", label: "Minutes", value: minutes, unit: "minutes", emphasis: minutes < 45 && days === 0, }, { id: "seconds", label: "Seconds", value: seconds, unit: "seconds" }, ]; } const supportActions = [ { id: "contact-support", label: "Contact support", description: "Open a new support ticket", href: "https://nextbase.dev/support", }, { id: "knowledge-base", label: "View maintenance guide", description: "Knowledge base article", href: "https://nextbase.dev/docs/maintenance", variant: "secondary" as const, }, ]; const checklist = [ { id: "export-reports", label: "Export critical dashboards", description: "Download CSV snapshots before the downtime window.", }, { id: "pause-automations", label: "Pause bulk automations", description: "Pause workflows that depend on analytics data to avoid desyncs.", }, { id: "notify-stakeholders", label: "Notify regional stakeholders", description: "Share the maintenance plan with data consumers across regions.", completed: true, muted: true, }, ]; const trustSystems = [ { id: "auth", label: "Authentication", status: "Operational" as const, tone: "success" as const, }, { id: "billing", label: "Billing", status: "Operational" as const, tone: "success" as const, }, { id: "webhooks", label: "Webhooks", status: "Available" as const, tone: "info" as const, }, { id: "api", label: "Core REST API", status: "Read-only" as const, tone: "warning" as const, }, ]; const maintenanceTabs: MaintenanceTab[] = [ { id: "overview", label: "Overview", description: "Understand the scope, impacted services, and customer promises during the maintenance window.", content: (

Analytics dashboards and scheduled exports will be offline.
All collection endpoints remain writable; data will sync once maintenance completes.
Enterprise SLAs permit up to 4 hours of downtime for this upgrade.

), }, { id: "preparation", label: "Preparation checklist", description: "Step-by-step list to help teams wrap up before the downtime window begins.", content: (

✅ Confirmed stakeholders and customer communications plan.

✅ Scheduled data export automation to rerun post maintenance.

⬜ Backups verified for query result cache.

), }, { id: "during", label: "During maintenance", description: "What to expect while the upgrade is in progress and how we provide updates.", content: (

We will post hourly updates in the status feed.
Support escalations route directly to the maintenance command channel.
Subscribe to SMS alerts if your workflows require near real-time visibility.

), }, ]; export function MaintenancePageScheduledCountdownTwoDemo() { const targetDate = React.useMemo(() => { const date = new Date(); date.setHours(date.getHours() + 6); return date; }, []); const [segments, setSegments] = React.useState(() => getCountdownSegments(targetDate), ); React.useEffect(() => { const interval = window.setInterval(() => { setSegments(getCountdownSegments(targetDate)); }, 1000); return () => window.clearInterval(interval); }, [targetDate]); return ( { console.log("Reviewing pre-maintenance checklist"); }, delayMs: 20_000, }} onTimezoneChange={(timezoneId) => { console.log("Timezone switched to", timezoneId); }} /> ); } export default MaintenancePageScheduledCountdownTwoDemo;

Simple