54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import type { WizardStep } from "../types";
|
|
import Dialog, { type DialogProps } from "./Dialog";
|
|
import Stepper from "./Stepper";
|
|
|
|
export type GuidedConfigDialogProps = Omit<DialogProps, "children"> & {
|
|
steps: WizardStep[];
|
|
activeStep: string;
|
|
onStepChange: (stepId: string) => void;
|
|
intro?: ReactNode;
|
|
children: ReactNode;
|
|
};
|
|
|
|
function joinClasses(...classes: Array<string | undefined | false>) {
|
|
return classes.filter(Boolean).join(" ");
|
|
}
|
|
|
|
export default function GuidedConfigDialog({
|
|
steps,
|
|
activeStep,
|
|
onStepChange,
|
|
intro,
|
|
children,
|
|
className = "",
|
|
bodyClassName = "",
|
|
...dialogProps
|
|
}: GuidedConfigDialogProps) {
|
|
const active = steps.find((step) => step.id === activeStep) ?? steps[0];
|
|
|
|
return (
|
|
<Dialog
|
|
{...dialogProps}
|
|
className={joinClasses("guided-config-dialog", className)}
|
|
bodyClassName={joinClasses("guided-config-dialog-body", bodyClassName)}
|
|
>
|
|
<div className="guided-config-shell">
|
|
<aside className="guided-config-sidebar" aria-label="Setup steps">
|
|
<Stepper steps={steps} activeStep={active?.id ?? activeStep} onSelect={onStepChange} />
|
|
</aside>
|
|
<section className="guided-config-content">
|
|
{intro && <div className="guided-config-intro">{intro}</div>}
|
|
{active && (
|
|
<header className="guided-config-step-heading">
|
|
<h3>{active.label}</h3>
|
|
{active.description && <p>{active.description}</p>}
|
|
</header>
|
|
)}
|
|
<div className="guided-config-step-body">{children}</div>
|
|
</section>
|
|
</div>
|
|
</Dialog>
|
|
);
|
|
}
|