1
import { AlertTriangle, RefreshCw } from "lucide-react";
2
import { Button } from "@/client/components/ui/button";
3
 
4
export const AppConfigErrorPage = ({ message }: { message: string }) => {
5
  return (
6
    <section
7
      aria-labelledby="app-config-error-title"
8
      className="mx-auto flex min-h-[60vh] max-w-2xl animate-slide-up flex-col items-center justify-center text-center"
9
    >
10
      <div className="mb-6 inline-flex rounded-2xl border border-amber-500/30 bg-amber-500/10 p-4 text-amber-300">
11
        <AlertTriangle className="h-10 w-10" aria-hidden="true" />
12
      </div>
13
      <h1 id="app-config-error-title" className="text-2xl font-bold tracking-tight text-zinc-100">
14
        App encryption keys are not configured
15
      </h1>
16
      <p className="mt-3 max-w-xl text-sm leading-6 text-zinc-300">{message}</p>
17
      <p className="mt-4 max-w-xl text-sm leading-6 text-zinc-400">
18
        Configure{" "}
19
        <code className="rounded bg-zinc-900 px-1.5 py-0.5 text-zinc-200">APP_ENCRYPTION_KEY_CURRENT_VERSION</code> and{" "}
20
        <code className="rounded bg-zinc-900 px-1.5 py-0.5 text-zinc-200">APP_ENCRYPTION_KEYS_JSON</code>, then reload
21
        the app.
22
      </p>
23
      <Button
24
        variant="secondary"
25
        className="mt-8 inline-flex items-center gap-2"
26
        onClick={() => window.location.reload()}
27
      >
28
        <RefreshCw className="h-4 w-4" aria-hidden="true" />
29
        Retry configuration check
30
      </Button>
31
    </section>
32
  );
33
};