43 lines
1.3 KiB
JavaScript
43 lines
1.3 KiB
JavaScript
import { useLocation, useNavigate } from 'react-router-dom';
|
|
import { Home } from 'lucide-react';
|
|
import { Button, EmptyState, Surface } from '@/components/ds';
|
|
import { useAuth } from '@/lib/AuthContext';
|
|
|
|
/**
|
|
* The 404 page.
|
|
*
|
|
* Signed-in operators get a second line naming the route table, because a
|
|
* missing route in a console is nearly always a link that was renamed rather
|
|
* than a page that never existed.
|
|
*/
|
|
export default function PageNotFound() {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const { isAuthenticated } = useAuth();
|
|
|
|
const path = location.pathname;
|
|
|
|
return (
|
|
<main className="flex min-h-screen items-center justify-center p-6">
|
|
<Surface radius="xl" padding="lg" className="w-full max-w-md">
|
|
<EmptyState
|
|
icon={Home}
|
|
title="Page not found"
|
|
description={`Nothing is registered at "${path}".`}
|
|
action={
|
|
<Button onClick={() => navigate(isAuthenticated ? '/doormile/dispatch' : '/login')}>
|
|
{isAuthenticated ? 'Back to Dispatch' : 'Sign in'}
|
|
</Button>
|
|
}
|
|
/>
|
|
|
|
{isAuthenticated && (
|
|
<p className="mt-2 text-center text-caption text-ink-4">
|
|
If this address used to work, check the route table in <code>src/App.jsx</code>.
|
|
</p>
|
|
)}
|
|
</Surface>
|
|
</main>
|
|
);
|
|
}
|