67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
import { CircularProgress } from '@/components/CircularProgress'
|
|
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
|
|
const currentIndex = idx + 1
|
|
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">
|
|
<div className="flex items-center gap-5">
|
|
<CircularProgress current={currentIndex} total={totalSteps} />
|
|
<div className="flex flex-col justify-center">
|
|
<h2 className="text-lg font-bold text-slate-900">
|
|
<StepWithTooltip
|
|
title={resolveTitle(methods.current)}
|
|
desc={methods.current.description}
|
|
/>
|
|
</h2>
|
|
{hasNextStep && nextStep ? (
|
|
<p className="text-sm text-slate-400">
|
|
Siguiente: {resolveTitle(nextStep)}
|
|
</p>
|
|
) : (
|
|
<p className="text-sm font-medium text-green-500">
|
|
¡Último paso!
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="hidden sm:block">
|
|
<wizard.Stepper.Navigation className="border-border/60 rounded-xl border bg-slate-50 p-2">
|
|
{wizard.steps.map((step: any) => (
|
|
<wizard.Stepper.Step
|
|
key={step.id}
|
|
of={step.id}
|
|
className="whitespace-nowrap"
|
|
>
|
|
<wizard.Stepper.Title>
|
|
<StepWithTooltip
|
|
title={resolveTitle(step)}
|
|
desc={step.description}
|
|
/>
|
|
</wizard.Stepper.Title>
|
|
</wizard.Stepper.Step>
|
|
))}
|
|
</wizard.Stepper.Navigation>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|