Separación vista/lógica de wizard de creación de asignatura

src/components/asignaturas/wizard/WizardHeader.tsx

@@ -0,0 +1,80 @@
+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({
+  title,
+  Wizard,
+  methods,
+}: {
+  title: string
+  Wizard: any
+  methods: any
+}) {
+  const currentIndex = Wizard.utils.getIndex(methods.current.id) + 1
+  const totalSteps = Wizard.steps.length
+  const nextStep = Wizard.steps[currentIndex]
+
+  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>{title}</DialogTitle>
+        </DialogHeader>
+        {methods.onClose && (
+          <button
+            onClick={methods.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={methods.current.title}
+                  desc={methods.current.description}
+                />
+              </h2>
+              {nextStep ? (
+                <p className="text-sm text-slate-400">
+                  Siguiente: {nextStep.title}
+                </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>
+  )
+}