import * as React from "react"; import { MultiStepFormEducationalCourseEnrollmentTrackSelectorFour } from "@/registry/multi-step-form-educational-course-enrollment-track-selector-four/multi-step-form-educational-course-enrollment-track-selector-four"; 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 MultiStepFormEducationalCourseEnrollmentTrackSelectorFour >; type CourseTrack = NonNullable[number]; type CourseModule = NonNullable[number]; type CourseScheduleOption = NonNullable[number]; type EnrollmentFormValues = Parameters< NonNullable >[0]; const MODULES_FOUNDATION: CourseModule[] = [ { id: "intro-analytics", title: "Introduction to Analytics", description: "Grounding in SQL, data exploration, and data storytelling basics.", credits: 2, }, { id: "behavioral-data", title: "Behavioral Data Fundamentals", description: "Segment events, funnels, and retention cohorts for product teams.", credits: 3, requiresPrerequisite: true, }, { id: "dashboards", title: "Dashboard Design Studio", description: "Build stakeholder-ready dashboards with accessibility best practices.", credits: 2, }, ]; const MODULES_ADVANCED: CourseModule[] = [ { id: "experimentation", title: "Experimentation Design", description: "Design A/B tests, calculate sample sizes, and interpret results.", credits: 3, }, { id: "causal-inference", title: "Causal Inference Bootcamp", description: "Propensity scoring, difference-in-differences, and uplift modeling.", credits: 4, requiresPrerequisite: true, }, { id: "ml-ops", title: "ML Ops for Analysts", description: "Deploy lightweight models and monitor drift with your data team.", credits: 3, }, ]; const SCHEDULES_FOUNDATION: CourseScheduleOption[] = [ { id: "evening", label: "Evening cohort", description: "Tues & Thurs · 6–8pm PT · Remote live sessions.", cadence: "8 weeks · Instructor-led", }, { id: "weekend", label: "Weekend intensive", description: "Sat · 9am–2pm PT · Includes peer labs.", cadence: "4 weeks · Blended", }, ]; const SCHEDULES_ADVANCED: CourseScheduleOption[] = [ { id: "executive", label: "Executive fast track", description: "Fri · 1–4pm ET · Capstone coaching.", cadence: "6 weeks · Hybrid", }, { id: "global", label: "Global asynchronous", description: "Self-paced modules with weekly mentor office hours.", cadence: "10 weeks · Async + live", }, ]; const TRACKS: CourseTrack[] = [ { id: "foundation", label: "Foundation", description: "Ideal for analysts onboarding into growth or marketing teams.", heroSummary: "Hands-on curriculum covering analysis fundamentals and stakeholder storytelling.", maxCredits: 6, recommendedHoursPerWeek: "5-7 hrs", modules: MODULES_FOUNDATION, scheduleOptions: SCHEDULES_FOUNDATION, }, { id: "advanced", label: "Advanced", description: "For experienced analysts expanding into experimentation and ML.", heroSummary: "Deep dives into causal inference, experimentation design, and ML operations.", maxCredits: 8, recommendedHoursPerWeek: "8-10 hrs", modules: MODULES_ADVANCED, scheduleOptions: SCHEDULES_ADVANCED, }, ]; const INITIAL_VALUES: Partial = { learnerName: "Jordan Lee", learnerEmail: "jordan@example.edu", selectedTrackId: "foundation", selectedModuleIds: ["intro-analytics"], }; export function MultiStepFormEducationalCourseEnrollmentTrackSelectorFourDemo() { const [lastSubmission, setLastSubmission] = React.useState(null); return (

{ await new Promise((resolve) => setTimeout(resolve, 700)); setLastSubmission(values); }} /> {lastSubmission ? (

          {JSON.stringify(lastSubmission, null, 2)}

) : null}

); } export default MultiStepFormEducationalCourseEnrollmentTrackSelectorFourDemo;

Simple