File size: 4,004 Bytes
a566fb0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
import { useLocation } from 'react-router-dom';
import { base44 } from '@/api/base44Client';
import { useQuery } from '@tanstack/react-query';
export default function PageNotFound({}) {
const location = useLocation();
const pageName = location.pathname.substring(1);
const { data: authData, isFetched } = useQuery({
queryKey: ['user'],
queryFn: async () => {
try {
const user = await base44.auth.me();
return { user, isAuthenticated: true };
} catch (error) {
return { user: null, isAuthenticated: false };
}
}
});
return (
<div className="min-h-screen flex items-center justify-center p-6 bg-slate-50">
<div className="max-w-md w-full">
<div className="text-center space-y-6">
{/* 404 Error Code */}
<div className="space-y-2">
<h1 className="text-7xl font-light text-slate-300">404</h1>
<div className="h-0.5 w-16 bg-slate-200 mx-auto"></div>
</div>
{/* Main Message */}
<div className="space-y-3">
<h2 className="text-2xl font-medium text-slate-800">
Page Not Found
</h2>
<p className="text-slate-600 leading-relaxed">
The page <span className="font-medium text-slate-700">"{pageName}"</span> could not be found in this application.
</p>
</div>
{/* Admin Note */}
{isFetched && authData.isAuthenticated && authData.user?.role === 'admin' && (
<div className="mt-8 p-4 bg-slate-100 rounded-lg border border-slate-200">
<div className="flex items-start space-x-3">
<div className="flex-shrink-0 w-5 h-5 rounded-full bg-orange-100 flex items-center justify-center mt-0.5">
<div className="w-2 h-2 rounded-full bg-orange-400"></div>
</div>
<div className="text-left space-y-1">
<p className="text-sm font-medium text-slate-700">Admin Note</p>
<p className="text-sm text-slate-600 leading-relaxed">
This could mean that the AI hasn't implemented this page yet. Ask it to implement it in the chat.
</p>
</div>
</div>
</div>
)}
{/* Action Button */}
<div className="pt-6">
<button
onClick={() => window.location.href = '/'}
className="inline-flex items-center px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 hover:border-slate-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500"
>
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
Go Home
</button>
</div>
</div>
</div>
</div>
)
} |