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-wrap text-sm">{error.details?.text}</div>
</AlertDanger>
);
};