Add "transparent" variant to Error Message

dataware-tools · Feb 7, 2022 · d422cbc · d422cbc
1 parent 966fcbc
commit d422cbc
Showing 1 changed file with 21 additions and 3 deletions.
diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
@@ -1,16 +1,20 @@
-import Alert from "@mui/material/Alert";
+import Alert, { AlertProps } from "@mui/material/Alert";
 import AlertTitle from "@mui/material/AlertTitle";
 import Box from "@mui/material/Box";
 import React from "react";
 
 export type ErrorMessageProps = {
   reason?: string;
   instruction?: string;
+  variant?: "default" | "transparent";
+  alertProps?: AlertProps;
 };
 
 export const ErrorMessage = ({
   reason,
   instruction,
+  variant,
+  alertProps,
 }: ErrorMessageProps): JSX.Element => {
   return (
     <Box
@@ -23,8 +27,22 @@ export const ErrorMessage = ({
         width: "100%",
       }}
     >
-      <Alert severity="error">
-        <AlertTitle>Error</AlertTitle>
+      <Alert
+        {...alertProps}
+        severity={alertProps?.severity ?? "error"}
+        sx={{
+          wordBreak: "break-all",
+          ...(variant === "transparent"
+            ? {
+                backgroundColor: "inherit",
+                color: "inherit",
+              }
+            : undefined),
+          ...alertProps?.sx,
+        }}
+        icon={alertProps?.icon ?? false}
+      >
+        {variant !== "transparent" ? <AlertTitle>Error</AlertTitle> : null}
         {reason ? <div>{reason}</div> : null}
         {instruction ? (
           <div>