wip

src/components/wizard/WizardResponsiveHeader.tsx

@@ -4,9 +4,11 @@ import { StepWithTooltip } from '@/components/wizard/StepWithTooltip'
 export function WizardResponsiveHeader({
   wizard,
   methods,
+  titleOverrides,
 }: {
   wizard: any
   methods: any
+  titleOverrides?: Record<string, string>
 }) {
   const idx = wizard.utils.getIndex(methods.current.id)
   const totalSteps = wizard.steps.length
@@ -14,6 +16,8 @@ export function WizardResponsiveHeader({
   const hasNextStep = idx < totalSteps - 1
   const nextStep = wizard.steps[currentIndex]
 
+  const resolveTitle = (step: any) => titleOverrides?.[step?.id] ?? step?.title
+
   return (
     <>
       <div className="block sm:hidden">
@@ -22,13 +26,13 @@ export function WizardResponsiveHeader({
           <div className="flex flex-col justify-center">
             <h2 className="text-lg font-bold text-slate-900">
               <StepWithTooltip
-                title={methods.current.title}
+                title={resolveTitle(methods.current)}
                 desc={methods.current.description}
               />
             </h2>
             {hasNextStep && nextStep ? (
               <p className="text-sm text-slate-400">
-                Siguiente: {nextStep.title}
+                Siguiente: {resolveTitle(nextStep)}
               </p>
             ) : (
               <p className="text-sm font-medium text-green-500">
@@ -48,7 +52,10 @@ export function WizardResponsiveHeader({
               className="whitespace-nowrap"
             >
               <wizard.Stepper.Title>
-                <StepWithTooltip title={step.title} desc={step.description} />
+                <StepWithTooltip
+                  title={resolveTitle(step)}
+                  desc={step.description}
+                />
               </wizard.Stepper.Title>
             </wizard.Stepper.Step>
           ))}