Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
4.7 kB · 140 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141"use client";
import type { ThemeKey } from "@openstatus/theme-store";import { Button } from "@openstatus/ui/components/ui/button";import { ArrowRight } from "lucide-react";import { useState } from "react";
import { CreatePageForm, type FormValues as CreatePageFormValues,} from "@/components/forms/onboarding/create-page";import { OnboardingActions, OnboardingFormColumn, OnboardingLockedSummary, OnboardingResultColumn, OnboardingResultHeading, type OnboardingStep, OnboardingStepDescription, OnboardingStepHeader, OnboardingStepTitle, OnboardingStepper,} from "@/components/layout/onboarding-layout";import { OnboardingStatusPagePreview } from "@/components/onboarding/status-page-preview";
import type { OnboardingPage } from "../client";
export function Step2({ stepperSteps, pageStatus, createdPageData, slugFallback, monitorSkipped, monitorName, isSubmitting, onSubmit, onSkip, onContinue,}: { stepperSteps: OnboardingStep[]; pageStatus: "skipped" | "completed" | null; createdPageData: OnboardingPage | undefined; slugFallback: string; monitorSkipped: boolean; monitorName: string | null; isSubmitting: boolean; onSubmit: (values: CreatePageFormValues) => Promise<void>; onSkip: () => void; onContinue: () => void;}) { const isLocked = pageStatus === "completed" && !!createdPageData;
// Live preview tracks the form values via `onValuesChange` below. Defaults // mirror the form's initial state so the preview renders something on first // paint before the user touches the inputs. const [previewValues, setPreviewValues] = useState<CreatePageFormValues>({ slug: slugFallback, theme: "default-rounded", forceTheme: "system", components: monitorSkipped ? [{ name: "Website" }] : undefined, }); // Frozen at submit time so the locked preview shows what the user // actually published, not whatever they last typed before clicking submit. const [submittedValues, setSubmittedValues] = useState<CreatePageFormValues | null>(null); const lockedPreviewValues = submittedValues ?? previewValues;
return ( <> <OnboardingFormColumn> <OnboardingStepper steps={stepperSteps} /> <OnboardingStepHeader> <OnboardingStepTitle>Publish a status page</OnboardingStepTitle> <OnboardingStepDescription> Pick a subdomain and a theme - your page goes live the moment you publish. Configure everything else later from page settings. </OnboardingStepDescription> </OnboardingStepHeader> {isLocked ? ( <OnboardingLockedSummary value={`${createdPageData?.slug}.openstatus.dev`} href={`https://${createdPageData?.slug}.openstatus.dev`} helper="Theme, components, and visibility are editable later from page settings." /> ) : ( <CreatePageForm id="onboarding-page-form" showComponents={monitorSkipped} defaultValues={{ slug: slugFallback }} onSubmit={async (values) => { await onSubmit(values); setSubmittedValues(values); }} onValuesChange={setPreviewValues} /> )} <OnboardingActions> {isLocked ? ( <Button onClick={onContinue}> Continue <ArrowRight className="size-3" /> </Button> ) : ( <> <Button form="onboarding-page-form" disabled={isSubmitting} type="submit" > {isSubmitting ? "Publishing…" : "Publish my page"} </Button> <Button variant="ghost" onClick={onSkip} type="button"> Do this later </Button> </> )} </OnboardingActions> </OnboardingFormColumn> <OnboardingResultColumn> <OnboardingResultHeading>Status Page Preview</OnboardingResultHeading> <div className="flex h-[calc(100dvh-13rem)] flex-1 overflow-hidden md:h-auto md:min-h-0"> <OnboardingStatusPagePreview slug={ isLocked ? (createdPageData?.slug ?? "") : lockedPreviewValues.slug } title={(isLocked ? (createdPageData?.title ?? "") : lockedPreviewValues.slug ).replace(/-/g, " ")} components={lockedPreviewValues.components ?? []} monitorName={monitorName} themeKey={lockedPreviewValues.theme as ThemeKey} className="h-full w-full" /> </div> </OnboardingResultColumn> </> );}