Stepper de ejemplo integrado

src/routes/planes/$planId/route.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/planes/$planId')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const { planId } = Route.useParams()
+  return <div>Hello "/planes/{planId}"!</div>
+}

src/routes/planes/_lista/nuevo.tsx

@@ -0,0 +1,29 @@
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+
+import CheckoutStepper from '@/components/planes/stepper'
+import { Dialog, DialogContent } from '@/components/ui/dialog'
+
+export const Route = createFileRoute('/planes/_lista/nuevo')({
+  component: NuevoPlanModal,
+})
+
+function NuevoPlanModal() {
+  const navigate = useNavigate()
+
+  const handleClose = () => {
+    // Navegamos de regreso a la lista manteniendo el scroll donde estaba
+    navigate({ to: '/planes', resetScroll: false })
+  }
+
+  return (
+    <Dialog open={true} onOpenChange={(open) => !open && handleClose()}>
+      {/* DialogContent es la "caja" blanca del modal. 
+         Le damos un ancho máximo un poco mayor a tu stepper (que mide 450px)
+         para que quepa cómodamente.
+      */}
+      <DialogContent className="p-6 sm:max-w-[500px]">
+        <CheckoutStepper />
+      </DialogContent>
+    </Dialog>
+  )
+}

src/routes/planes/_lista/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, Outlet, Link } from '@tanstack/react-router'
 import * as Icons from 'lucide-react'
 import { useMemo, useState } from 'react'
 
@@ -8,7 +8,7 @@ import BarraBusqueda from '@/components/planes/BarraBusqueda'
 import Filtro from '@/components/planes/Filtro'
 import PlanEstudiosCard from '@/components/planes/PlanEstudiosCard'
 
-export const Route = createFileRoute('/planes')({
+export const Route = createFileRoute('/planes/_lista')({
   component: RouteComponent,
 })
 
@@ -313,6 +313,10 @@ function RouteComponent() {
             })}
           </div>
         </div>
+        <Link to="/planes/nuevo" className="text-blue-500" resetScroll={false}>
+          Nuevo plan de estudios
+        </Link>
+        <Outlet />
       </div>
     </main>
   )

src/routes/planes/index.tsx

@@ -1,15 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { AppLayout } from '@/components/layout/AppLayout'
-import { PlanGrid } from '@/components/plans/PlanGrid'
-
-export const Route = createFileRoute('/planes/')({
-  component: PlanesPage,
-})
-
-function PlanesPage() {
-  return (
-    <AppLayout>
-      <PlanGrid />
-    </AppLayout>
-  )
-}