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

105 lines
3.8 KiB
TypeScript
Raw Normal View History

import type { FunctionComponent } from "react";
2021-08-01 14:01:51 +00:00
import { Link } from "blitz";
import { IoCheckmark } from "react-icons/io5";
import clsx from "clsx";
2021-07-18 15:32:45 +00:00
type StepLink = {
href: string;
label: string;
};
2021-07-18 15:32:45 +00:00
type Props = {
currentStep: 1 | 2 | 3;
previous?: StepLink;
next?: StepLink;
};
2021-07-31 14:33:18 +00:00
const steps = ["Welcome", "Twilio Credentials", "Pick a plan"] as const;
2021-07-18 15:32:45 +00:00
2021-07-31 14:33:18 +00:00
const OnboardingLayout: FunctionComponent<Props> = ({ children, currentStep, previous, next }) => {
2021-07-18 15:32:45 +00:00
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. */}
2021-07-31 14:33:18 +00:00
<span className="inline-block align-middle h-screen">&#8203;</span>
2021-07-18 15:32:45 +00:00
<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">
2021-07-31 14:33:18 +00:00
<h3 className="text-lg leading-6 font-medium text-gray-900 px-6 py-5 border-b border-gray-100">
{steps[currentStep - 1]}
</h3>
2021-07-18 15:32:45 +00:00
<section className="px-6 pt-6 pb-12">{children}</section>
<nav className="grid grid-cols-1 gap-y-3 mx-auto">
2021-07-31 14:33:18 +00:00
{next ? (
<Link href={next.href}>
<a className="max-w-[240px] text-center 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">
2021-07-31 14:33:18 +00:00
{next.label}
</a>
</Link>
) : null}
2021-07-18 15:32:45 +00:00
2021-07-31 14:33:18 +00:00
{previous ? (
<Link href={previous.href}>
<a className="max-w-[240px] text-center 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">
2021-07-31 14:33:18 +00:00
{previous.label}
</a>
</Link>
) : null}
2021-07-18 15:32:45 +00:00
<ol className="flex items-center">
{steps.map((step, stepIdx) => {
const isComplete = currentStep > stepIdx + 1;
const isCurrent = stepIdx + 1 === currentStep;
2021-07-18 15:32:45 +00:00
return (
2021-07-31 14:33:18 +00:00
<li
key={step}
className={clsx(
stepIdx !== steps.length - 1 ? "pr-20 sm:pr-32" : "",
2021-08-01 12:04:04 +00:00
"relative",
2021-07-31 14:33:18 +00:00
)}
>
2021-07-18 15:32:45 +00:00
{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">
<IoCheckmark className="w-5 h-5 text-white" />
2021-07-18 15:32:45 +00:00
<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>
);
2021-07-18 15:32:45 +00:00
})}
</ol>
</nav>
</div>
</div>
</div>
);
};
2021-07-18 15:32:45 +00:00
export default OnboardingLayout;