25 lines
909 B
TypeScript
25 lines
909 B
TypeScript
|
import { useSyncExternalStore } from "react";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
import { dismissError, getError, subscribeError } from "../lib/errorDialog";
|
||
|
|
import Modal from "./Modal";
|
||
|
|
|
||
|
|
// Renders the current app error (if any) as a modal the user must acknowledge.
|
||
|
|
export default function ErrorDialog() {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
const err = useSyncExternalStore(subscribeError, getError, getError);
|
||
|
|
if (!err) return null;
|
||
|
|
return (
|
||
|
|
<Modal title={err.title} onClose={dismissError} maxWidth="max-w-md">
|
||
|
|
<p className="text-sm leading-relaxed text-fg/90">{err.message}</p>
|
||
|
|
<div className="flex justify-end mt-5">
|
||
|
|
<button
|
||
|
|
onClick={dismissError}
|
||
|
|
className="px-4 py-2 rounded-lg bg-accent text-accent-fg text-sm font-medium hover:opacity-90 transition"
|
||
|
|
>
|
||
|
|
{t("errors.ok")}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</Modal>
|
||
|
|
);
|
||
|
|
}
|