1// Global error boundary page. Rendered by React Router when a route throws
 2// or when navigation results in a 404. Replaces the default "Unexpected
 3// Application Error!" screen.
 4
 5import { AlertTriangle } from "lucide-react";
 6import { useRouteError, isRouteErrorResponse, Link } from "react-router-dom";
 7
 8import { Button } from "@/components/ui/button";
 9
10export function ErrorPage() {
11  const error = useRouteError();
12
13  let status: number | undefined;
14  let message: string;
15
16  if (isRouteErrorResponse(error)) {
17    status = error.status;
18    message = error.statusText || error.data;
19  } else if (error instanceof Error) {
20    message = error.message;
21  } else {
22    message = "An unexpected error occurred.";
23  }
24
25  return (
26    <div className="flex min-h-screen flex-col items-center justify-center gap-4 text-center">
27      <AlertTriangle className="size-10 text-muted-foreground" />
28      {status && <p className="text-5xl font-bold tracking-tight">{status}</p>}
29      <p className="text-sm text-muted-foreground">{message}</p>
30      <Button variant="outline" size="sm" asChild>
31        <Link to="/">Go home</Link>
32      </Button>
33    </div>
34  );
35}