detalles cambiados y ejemplo de stepper

src/routes/planes/_lista/nuevo.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
 
-import CheckoutStepper from '@/components/planes/stepper'
+import CheckoutStepper from '@/components/planes/exampleStepper'
 import { Dialog, DialogContent } from '@/components/ui/dialog'
 
 export const Route = createFileRoute('/planes/_lista/nuevo')({

src/routes/planes/_lista/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute, Outlet, Link } from '@tanstack/react-router'
+import { createFileRoute, Outlet, useNavigate } from '@tanstack/react-router'
 import * as Icons from 'lucide-react'
 import { useMemo, useState } from 'react'
 
@@ -13,6 +13,7 @@ export const Route = createFileRoute('/planes/_lista')({
 })
 
 function RouteComponent() {
+  const navigate = useNavigate()
   type Facultad = { id: string; nombre: string; color: string }
   type Carrera = { id: string; nombre: string; facultadId: string }
   type Plan = {
@@ -230,6 +231,9 @@ function RouteComponent() {
               }
               aria-label="Nuevo plan de estudios"
               title="Nuevo plan de estudios"
+              onClick={() => {
+                navigate({ to: '/planes/nuevo' })
+              }}
             >
               <Icons.Plus className="" />
               Nuevo plan de estudios
@@ -313,9 +317,6 @@ function RouteComponent() {
             })}
           </div>
         </div>
-        <Link to="/planes/nuevo" className="text-blue-500" resetScroll={false}>
-          Nuevo plan de estudios
-        </Link>
         <Outlet />
       </div>
     </main>

src/routes/stepper.tsx

@@ -0,0 +1,65 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { defineStepper } from '@/components/stepper'
+import { Button } from '@/components/ui/button'
+
+export const Route = createFileRoute('/stepper')({
+  component: MyFirstStepper,
+})
+
+const stepperInstance = defineStepper(
+  { id: 'step-1', title: 'Step 1' },
+  { id: 'step-2', title: 'Step 2' },
+  { id: 'step-3', title: 'Step 3' },
+)
+
+export function MyFirstStepper() {
+  return (
+    <stepperInstance.Stepper.Provider className="space-y-4">
+      {({ methods }) => (
+        <>
+          <stepperInstance.Stepper.Navigation>
+            {methods.all.map((step) => (
+              <stepperInstance.Stepper.Step
+                of={step.id}
+                onClick={() => methods.goTo(step.id)}
+              >
+                <stepperInstance.Stepper.Title>
+                  {step.title}
+                </stepperInstance.Stepper.Title>
+              </stepperInstance.Stepper.Step>
+            ))}
+          </stepperInstance.Stepper.Navigation>
+          {methods.switch({
+            'step-1': (step) => <Content id={step.id} />,
+            'step-2': (step) => <Content id={step.id} />,
+            'step-3': (step) => <Content id={step.id} />,
+          })}
+          <stepperInstance.Stepper.Controls>
+            {!methods.isLast && (
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={methods.prev}
+                disabled={methods.isFirst}
+              >
+                Previous
+              </Button>
+            )}
+            <Button onClick={methods.isLast ? methods.reset : methods.next}>
+              {methods.isLast ? 'Reset' : 'Next'}
+            </Button>
+          </stepperInstance.Stepper.Controls>
+        </>
+      )}
+    </stepperInstance.Stepper.Provider>
+  )
+}
+
+const Content = ({ id }: { id: string }) => {
+  return (
+    <stepperInstance.Stepper.Panel className="h-50 content-center rounded border bg-slate-50 p-8">
+      <p className="text-xl font-normal">Content for {id}</p>
+    </stepperInstance.Stepper.Panel>
+  )
+}