42 lines
1 KiB
TypeScript
42 lines
1 KiB
TypeScript
import { BsX } from "react-icons/bs";
|
|
import { ErrorWithLabel } from "../rqbit-web";
|
|
|
|
const AlertDanger: React.FC<{
|
|
title: string;
|
|
children: React.ReactNode;
|
|
onClose?: () => void;
|
|
}> = ({ title, children, onClose }) => {
|
|
return (
|
|
<div className="bg-red-200 p-3 rounded-md mb-3 dark:bg-red-800/60">
|
|
<div className="flex justify-between mb-2">
|
|
<h2 className="text-lg font-semibold">{title}</h2>
|
|
{onClose && (
|
|
<button onClick={onClose}>
|
|
<BsX />
|
|
</button>
|
|
)}
|
|
</div>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const ErrorComponent = (props: {
|
|
error: ErrorWithLabel | null;
|
|
remove?: () => void;
|
|
}) => {
|
|
let { error, remove } = props;
|
|
|
|
if (error == null) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<AlertDanger onClose={remove} title={error.text}>
|
|
{error.details?.statusText && (
|
|
<div className="pb-2 text-md">{error.details?.statusText}</div>
|
|
)}
|
|
<div className="whitespace-pre text-sm">{error.details?.text}</div>
|
|
</AlertDanger>
|
|
);
|
|
};
|