1 files changed, 52 insertions, 0 deletions
diff --git a/extension/react-app/src/components/ErrorStepContainer.tsx b/extension/react-app/src/components/ErrorStepContainer.tsx
new file mode 100644
index 00000000..e8ab7950
--- /dev/null
+++ b/extension/react-app/src/components/ErrorStepContainer.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import styled from "styled-components";
+import { HistoryNode } from "../../../schema/HistoryNode";
+import { defaultBorderRadius, vscBackground } from ".";
+import HeaderButtonWithText from "./HeaderButtonWithText";
+import {
+  MinusCircleIcon,
+  MinusIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
+
+const Div = styled.div`
+  padding: 8px;
+  background-color: #ff000011;
+  border-radius: ${defaultBorderRadius};
+  border: 1px solid #cc0000;
+`;
+
+interface ErrorStepContainerProps {
+  historyNode: HistoryNode;
+  onClose: () => void;
+  onDelete: () => void;
+}
+
+function ErrorStepContainer(props: ErrorStepContainerProps) {
+  return (
+    <div style={{ backgroundColor: vscBackground, position: "relative" }}>
+      <div
+        style={{
+          position: "absolute",
+          right: "4px",
+          top: "4px",
+          display: "flex",
+        }}
+      >
+        <HeaderButtonWithText text="Collapse" onClick={() => props.onClose()}>
+          <MinusCircleIcon width="1.3em" height="1.3em" />
+        </HeaderButtonWithText>
+        <HeaderButtonWithText text="Collapse" onClick={() => props.onDelete()}>
+          <XMarkIcon width="1.3em" height="1.3em" />
+        </HeaderButtonWithText>
+      </div>
+      <Div>
+        <pre className="overflow-x-scroll">
+          {props.historyNode.observation?.error as string}
+        </pre>
+      </Div>
+    </div>
+  );
+}
+
+export default ErrorStepContainer;