f4ce1595d6
Migrate all 84 frontend files from the old themed/colored design to a monochrome glass-morphism design system. Pure black backgrounds, white text with opacity levels, glass-card components with backdrop-blur, and functional color reserved for status indicators only. Foundation: remap CSS variables to monochrome, simplify Tailwind config, remove theme toggle, convert brand logo/wordmark to white. Pages: all 14 pages updated. Components: all common, library, session, step-library, tree-editor, tree-preview, admin, and subscription components converted. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import { useRouteError, isRouteErrorResponse, useNavigate } from 'react-router-dom'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
export function RouteError() {
|
|
const error = useRouteError()
|
|
const navigate = useNavigate()
|
|
|
|
let errorMessage = 'An unexpected error occurred'
|
|
let errorDetails = ''
|
|
|
|
if (isRouteErrorResponse(error)) {
|
|
errorMessage = error.status === 404 ? 'Page not found' : `Error ${error.status}`
|
|
errorDetails = error.statusText || ''
|
|
} else if (error instanceof Error) {
|
|
errorMessage = 'Something went wrong'
|
|
errorDetails = error.message
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col items-center justify-center bg-black p-8">
|
|
<div className="max-w-md text-center">
|
|
<h1 className="mb-2 text-4xl font-bold text-white">Oops!</h1>
|
|
<h2 className="mb-2 text-xl font-semibold text-red-400">{errorMessage}</h2>
|
|
{errorDetails && (
|
|
<p className="mb-4 text-white/70">{errorDetails}</p>
|
|
)}
|
|
<div className="flex justify-center gap-4">
|
|
<button
|
|
onClick={() => navigate(-1)}
|
|
className={cn(
|
|
'rounded-xl border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
|
|
'hover:bg-white/10 hover:text-white'
|
|
)}
|
|
>
|
|
Go Back
|
|
</button>
|
|
<button
|
|
onClick={() => navigate('/trees')}
|
|
className={cn(
|
|
'rounded-xl bg-white px-4 py-2 text-sm font-medium text-black',
|
|
'hover:bg-white/90'
|
|
)}
|
|
>
|
|
Go Home
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default RouteError
|