shellphone.app/src/components/welcome/onboarding-layout.tsx

import type { FunctionComponent } from "react";
import { CheckIcon } from "@heroicons/react/solid";
import clsx from "clsx";
import Link from "next/link";

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<Props> = ({
	children,
	currentStep,
	previous,
	next,
}) => {
	return (
		<div className="bg-gray-800 fixed z-10 inset-0 overflow-y-auto">
			<div className="min-h-screen text-center block p-0">
				{/* This element is to trick the browser into centering the modal contents. */}
				<span className="inline-block align-middle h-screen">
					&#8203;
				</span>
				<div className="inline-flex flex-col bg-white rounded-lg text-left overflow-hidden shadow transform transition-all my-8 align-middle max-w-2xl w-[90%] pb-6">
					<h3 className="text-lg leading-6 font-medium text-gray-900 px-6 py-5 border-b border-gray-100">{steps[currentStep - 1]}</h3>

					<section className="px-6 pt-6 pb-12">{children}</section>

					<nav className="grid grid-cols-1 gap-y-3 mx-auto">
						{
							next ? (
								<Link href={next.href}>
									<a className="max-w-[240px] mx-auto w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm">
										{next.label}
									</a>
								</Link>
							) : null
						}

						{
							previous ? (
								<Link href={previous.href}>
									<a className="max-w-[240px] mx-auto w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm">
										{previous.label}
									</a>
								</Link>
							) : null
						}

						<ol className="flex items-center">
							{steps.map((step, stepIdx) => {
								const isComplete = currentStep > stepIdx + 1;
								const isCurrent = stepIdx + 1 === currentStep;

								return (
									<li key={step} className={clsx(stepIdx !== steps.length - 1 ? "pr-20 sm:pr-32" : "", "relative")}>
										{isComplete ? (
											<>
												<div className="absolute inset-0 flex items-center">
													<div className="h-0.5 w-full bg-primary-600" />
												</div>
												<a className="relative w-8 h-8 flex items-center justify-center bg-primary-600 rounded-full">
													<CheckIcon className="w-5 h-5 text-white" />
													<span className="sr-only">{step}</span>
												</a>
											</>
										) : isCurrent ? (
											<>
												<div className="absolute inset-0 flex items-center">
													<div className="h-0.5 w-full bg-gray-200" />
												</div>
												<a className="relative w-8 h-8 flex items-center justify-center bg-white border-2 border-primary-600 rounded-full">
													<span className="h-2.5 w-2.5 bg-primary-600 rounded-full" />
													<span className="sr-only">{step}</span>
												</a>
											</>
										) : (
											<>
												<div className="absolute inset-0 flex items-center">
													<div className="h-0.5 w-full bg-gray-200" />
												</div>
												<a className="group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full">
													<span className="h-2.5 w-2.5 bg-transparent rounded-full" />
													<span className="sr-only">{step}</span>
												</a>
											</>
										)}
									</li>
								)
							})}
						</ol>
					</nav>
				</div>
			</div>
		</div>
	);
};

export default OnboardingLayout;