feat: add ErrorBox showing full error details (#4)

Author: timdeschryver

src/components/App.js

@@ -10,6 +10,7 @@ import { initialValues } from '../constants';
 import { useAppContext } from './Context';
 import HtmlPreview from './HtmlPreview';
 import state from '../lib/state';
+import ErrorBox from './ErrorBox';
 
 const savedState = state.load();
 
@@ -60,11 +61,17 @@ function App() {
             />
             <div className="output">
               <span className="text-blue-600">&gt; </span>
-              {parsed.text || parsed.error || 'undefined'}
+              {parsed.error
+                ? `Error: ${parsed.error}`
+                : parsed.text || 'undefined'}
             </div>
           </div>
 
-          <ElementInfo />
+          {parsed.error ? (
+            <ErrorBox caption={parsed.error} body={parsed.errorBody} />
+          ) : (
+            <ElementInfo />
+          )}
         </div>
       </div>
 

src/components/ErrorBox.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+function ErrorBox({ caption, body }) {
+  return (
+    <div className="bg-red-600 text-white p-4 rounded space-y-2 font-mono text-xs">
+      <div className="font-bold text-xs">Error: {caption}</div>
+
+      <div className="font-mono text-xs whitespace-pre-wrap">{body}</div>
+    </div>
+  );
+}
+
+export default ErrorBox;