1import { createRootRouteWithContext, useRouter } from "@tanstack/react-router";
 2import { AlertTriangle } from "lucide-react";
 3
 4import { Shell } from "@/components/layout/Shell";
 5import { Button } from "@/components/ui/button";
 6import { ButtonLink } from "@/components/ui/button-link";
 7import type { preloadQuery } from "@/lib/apollo";
 8
 9export interface RouterContext {
10  preloadQuery: typeof preloadQuery;
11}
12
13export const Route = createRootRouteWithContext<RouterContext>()({
14  component: Shell,
15  errorComponent: ErrorPage,
16});
17
18function ErrorPage({ error }: { error?: Error }) {
19  const router = useRouter();
20
21  const message = error?.message ?? "An unexpected error occurred.";
22
23  return (
24    <div className="flex min-h-screen flex-col items-center justify-center gap-4 text-center">
25      <AlertTriangle className="text-muted-foreground size-10" />
26      <p className="text-muted-foreground text-sm">{message}</p>
27      <div className="flex gap-2">
28        <Button
29          variant="outline"
30          size="sm"
31          onClick={() => {
32            void router.invalidate();
33          }}
34        >
35          Try again
36        </Button>
37        <ButtonLink to="/" variant="outline" size="sm">
38          Go home
39        </ButtonLink>
40      </div>
41    </div>
42  );
43}