37 lines
1.4 KiB
TypeScript
37 lines
1.4 KiB
TypeScript
import { t as i18nT } from "i18next";
|
|
import { StepperHorizontal } from "~/ui/components/StepperHorizontal";
|
|
import { StepDto } from "./StepDto";
|
|
|
|
// Subframe migration (strangler shim):
|
|
// Keeps the original `{ steps: StepDto[] }` API but renders the Subframe design-system
|
|
// `StepperHorizontal`. The progress <nav> wrapper is preserved so the i18n aria-label
|
|
// (`shared.progress`) and the accessible navigation landmark remain intact.
|
|
//
|
|
// StepDto.status -> Subframe Step variant:
|
|
// "completed" -> "completed", "current" -> "active", "pending" -> "default".
|
|
const STEP_VARIANT = {
|
|
completed: "completed",
|
|
current: "active",
|
|
pending: "default",
|
|
} as const;
|
|
|
|
export default function ProgressBar({ steps }: { steps: StepDto[] }) {
|
|
return (
|
|
<nav aria-label={i18nT("shared.progress")} className="border-border bg-background rounded-t-md border">
|
|
<StepperHorizontal className="w-full max-w-none px-6 py-4">
|
|
{steps.map((step, stepIdx) => (
|
|
<StepperHorizontal.Step
|
|
key={step.name}
|
|
variant={STEP_VARIANT[step.status]}
|
|
firstStep={stepIdx === 0}
|
|
lastStep={stepIdx === steps.length - 1}
|
|
stepNumber={stepIdx + 1}
|
|
label={step.title}
|
|
{...(step.status === "current" ? { "aria-current": "step" as const } : {})}
|
|
/>
|
|
))}
|
|
</StepperHorizontal>
|
|
</nav>
|
|
);
|
|
}
|