1// Global error boundary page. Rendered by TanStack Router when a route throws.
 2
 3import { Link, useRouter } from "@tanstack/react-router";
 4import { AlertTriangle } from "lucide-react";
 5
 6import { Button } from "@/components/ui/button";
 7
 8export function ErrorPage({ error }: { error?: Error }) {
 9  const router = useRouter();
10
11  const message = error?.message ?? "An unexpected error occurred.";
12
13  return (
14    <div className="flex min-h-screen flex-col items-center justify-center gap-4 text-center">
15      <AlertTriangle className="text-muted-foreground size-10" />
16      <p className="text-muted-foreground text-sm">{message}</p>
17      <div className="flex gap-2">
18        <Button
19          variant="outline"
20          size="sm"
21          onClick={() => {
22            void router.invalidate();
23          }}
24        >
25          Try again
26        </Button>
27        <Button variant="outline" size="sm" asChild>
28          <Link to="/">Go home</Link>
29        </Button>
30      </div>
31    </div>
32  );
33}