Fallback elegante de vista no encontrada

close #44:
Se creó la NotFoundPage y se utiliza en __root con el notFoundComponent.
Se agregó la lógica del loader tanto de plan de estudios como de asignaturas.
Se agregó el NotFoundComponent para el detalle de plan de estudios y el de asignaturas
This commit is contained in:
2026-01-28 12:56:08 -06:00
parent ddb3a5023c
commit 35ea4caa39
10 changed files with 136 additions and 29 deletions

View File

@@ -118,7 +118,10 @@ export function WizardControls({
}
return (
<div className="flex items-center justify-between">
<div className="flex grow items-center justify-between">
<Button variant="secondary" onClick={onPrev} disabled={disablePrev}>
Anterior
</Button>
<div className="flex-1">
{errorMessage && (
<span className="text-destructive text-sm font-medium">
@@ -126,20 +129,15 @@ export function WizardControls({
</span>
)}
</div>
<div className="flex gap-4">
<Button variant="secondary" onClick={onPrev} disabled={disablePrev}>
Anterior
{isLastStep ? (
<Button onClick={handleCreate} disabled={disableCreate}>
Crear plan
</Button>
{isLastStep ? (
<Button onClick={handleCreate} disabled={disableCreate}>
Crear plan
</Button>
) : (
<Button onClick={onNext} disabled={disableNext}>
Siguiente
</Button>
)}
</div>
) : (
<Button onClick={onNext} disabled={disableNext}>
Siguiente
</Button>
)}
</div>
)
}

View File

@@ -0,0 +1,44 @@
import { Link, useRouter } from '@tanstack/react-router'
import { FileQuestion, Home, ArrowLeft } from 'lucide-react'
import { Button } from './button'
interface NotFoundPageProps {
title?: string
message?: string
children?: React.ReactNode
}
export function NotFoundPage({
title = 'Página no encontrada',
message = 'Lo sentimos, no pudimos encontrar lo que buscabas. Es posible que la página haya sido movida o eliminada.',
children,
}: NotFoundPageProps) {
const router = useRouter()
return (
<div className="flex min-h-[60vh] flex-col items-center justify-center p-4 text-center">
<div className="bg-muted mb-6 rounded-full p-6">
<FileQuestion className="text-muted-foreground h-12 w-12" />
</div>
<h1 className="mb-2 text-3xl font-bold tracking-tight">{title}</h1>
<p className="text-muted-foreground mb-8 max-w-125">{message}</p>
<div className="flex flex-col gap-2 sm:flex-row">
<Button variant="outline" onClick={() => router.history.back()}>
<ArrowLeft className="mr-2 h-4 w-4" />
Regresar
</Button>
<Button asChild>
<Link to="/">
<Home className="mr-2 h-4 w-4" />
Ir al inicio
</Link>
</Button>
{children}
</div>
</div>
)
}