All files / app/dashboard error.tsx

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
1x
 
 
 
 
 
 
 
 
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
"use client";
 
import {AlertTriangle, RotateCcw} from "lucide-react";
import {Button} from "@/components/ui/button/button";
import {uiStyles} from "@/components/ui/style-primitives";
import {cn} from "@/lib/utils/utils";
import type {DashboardErrorProps} from "@/types/dashboard";
 
/** Error boundary fallback for the dedicated dashboard route segment. */
export default function DashboardError({error, retry}: DashboardErrorProps) {
  return (
    <main className="flex min-h-screen items-center justify-center bg-slate-100 p-6 text-slate-950 dark:bg-slate-950 dark:text-slate-50">
      <section
        aria-labelledby="dashboard-error-title"
        className={cn("w-full max-w-lg p-6", uiStyles.dangerSurface)}
        role="alert"
      >
        <div className="flex items-start gap-3">
          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-rose-50 text-rose-700 dark:bg-rose-950/30 dark:text-rose-200">
            <AlertTriangle aria-hidden="true" size={20}/>
          </div>
          <div className="min-w-0">
            <h1 className="text-xl font-semibold" id="dashboard-error-title">
              Dashboard unavailable
            </h1>
            <p className={cn("mt-2", uiStyles.bodyText)}>
              {error.message || "The dashboard could not be rendered."}
            </p>
            <Button className="mt-5" onClick={retry} variant="primary">
              <RotateCcw aria-hidden="true" size={16}/>
              Try again
            </Button>
          </div>
        </div>
      </section>
    </main>
  );
}