Style errors

Author: pomber

playground/src/index.css

@@ -143,5 +143,32 @@ main {
 }
 
 .preview-error {
-  border: 1px solid red;
+  color: #be0924;
+  padding: 0.5rem 1.5rem;
+}
+
+.preview-error pre {
+  color: #111;
+}
+
+.compile-error {
+  color: #be0924;
+  position: fixed;
+  top: 3.4rem;
+  background-color: white;
+  margin: 1.5rem;
+  border: 1px solid #be0924;
+  padding: 0 0.5rem 0.5rem 0.5rem;
+  border-radius: 4px;
+  z-index: 4;
+}
+
+.compile-error pre {
+  color: #111;
+  white-space: normal;
+}
+
+.with-error {
+  opacity: 0.8;
+  filter: blur(1.5px);
 }

playground/src/preview.jsx

@@ -22,7 +22,7 @@ export function Preview(props) {
 function ErrorFallback({ error }) {
   return (
     <div className="preview-error">
-      <p>Something went wrong:</p>
+      <h3>Runtime Error:</h3>
       <pre>{String(error)}</pre>
     </div>
   );
@@ -61,10 +61,15 @@ function InnerPreview({ input }) {
   return (
     <>
       <style>{input.css}</style>
-      <div className="preview-container">
+      {error ? (
+        <div className="compile-error">
+          <h3>Compliation Error:</h3>
+          <pre>{error}</pre>
+        </div>
+      ) : null}
+      <div className={`preview-container ${error ? "with-error" : ""}`}>
         {Content ? <Content components={{ CH }} /> : null}
       </div>
-      {error ? <div className="preview-error">{error}</div> : null}
     </>
   );
 }