79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
import * as Icons from 'lucide-react'
|
|
|
|
import { StepWithTooltip } from './StepWithTooltip'
|
|
|
|
import { CircularProgress } from '@/components/CircularProgress'
|
|
import { DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
|
|
|
export function WizardHeader({
|
|
currentIndex,
|
|
totalSteps,
|
|
currentTitle,
|
|
currentDescription,
|
|
nextTitle,
|
|
onClose,
|
|
Wizard,
|
|
}: {
|
|
currentIndex: number
|
|
totalSteps: number
|
|
currentTitle: string
|
|
currentDescription: string
|
|
nextTitle?: string
|
|
onClose: () => void
|
|
Wizard: any
|
|
}) {
|
|
return (
|
|
<div className="z-10 flex-none border-b bg-white">
|
|
<div className="flex items-center justify-between p-6 pb-4">
|
|
<DialogHeader className="p-0">
|
|
<DialogTitle>Nuevo plan de estudios</DialogTitle>
|
|
</DialogHeader>
|
|
<button
|
|
onClick={onClose}
|
|
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none"
|
|
>
|
|
<Icons.X className="h-4 w-4" />
|
|
<span className="sr-only">Cerrar</span>
|
|
</button>
|
|
</div>
|
|
<div className="px-6 pb-6">
|
|
<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={currentTitle}
|
|
desc={currentDescription}
|
|
/>
|
|
</h2>
|
|
{nextTitle ? (
|
|
<p className="text-sm text-slate-400">Siguiente: {nextTitle}</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={step.title} desc={step.description} />
|
|
</Wizard.Stepper.Title>
|
|
</Wizard.Stepper.Step>
|
|
))}
|
|
</Wizard.Stepper.Navigation>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|