import type { FunctionComponent } from "react"; import { Link } from "blitz"; import { CheckIcon } from "@heroicons/react/solid"; import clsx from "clsx"; type StepLink = { href: string; label: string; }; type Props = { currentStep: 1 | 2 | 3; previous?: StepLink; next?: StepLink; }; const steps = ["Welcome", "Twilio Credentials", "Pick a plan"] as const; const OnboardingLayout: FunctionComponent = ({ children, currentStep, previous, next }) => { return (
{/* This element is to trick the browser into centering the modal contents. */}

{steps[currentStep - 1]}

{children}
); }; export default OnboardingLayout;