feat: render placeholder image when no markup is provided (#74)

fixes #30

Author: delca85

public/code_thinking.png

@@ -0,0 +1,18 @@
+import React from 'react';
+import icon from '../../public/code_thinking.png';
+
+function AddHtml() {
+  return (
+    <div className="flex-auto absolute overflow-hidden h-full w-full flex flex-col justify-center items-center">
+      <div className="h-48 overflow-hidden w-full flex item-center">
+        <img
+          className="flex-auto resize opacity-50 object-contain max-h-full min-h-0"
+          src={icon}
+        />
+      </div>
+      <p className="opacity-50 ml-24">Try adding some html</p>
+    </div>
+  );
+}
+
+export default AddHtml;

src/components/AddHtml.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { usePlayground } from './Context';
 import Scrollable from './Scrollable';
 import PreviewHint from './PreviewHint';
+import AddHtml from './AddHtml';
 import { getQueryAdvise } from '../lib';
 
 function selectByCssPath(rootNode, cssPath) {
@@ -86,7 +87,7 @@ function Preview() {
     setHighlighted(target);
   };
 
-  return (
+  return state.markup ? (
     <div
       className="w-full h-full flex flex-col relative overflow-hidden"
       onMouseEnter={() => setHighlighted(true)}
@@ -106,6 +107,10 @@ function Preview() {
 
       <PreviewHint roles={roles} suggestion={suggestion} />
     </div>
+  ) : (
+    <div className="w-full h-full flex flex-col relative overflow-hidden">
+      <AddHtml />
+    </div>
   );
 }
 

src/components/Preview.js

@@ -17,12 +17,30 @@ function Result() {
     );
   }
 
-  const { data, suggestion } = state.result.elements?.[0] || {};
-
-  if (!data || !suggestion) {
-    return <div />;
+  if (!state.result.expression) {
+    return (
+      <div className="space-y-4 text-sm">
+        <div className="min-h-8">
+          <p>
+            I don&apos;t know what to say. This is a playground for{' '}
+            <a
+              href="https://testing-library.com/docs/dom-testing-library/example-intro"
+              rel="noopener noreferrer"
+              target="_blank"
+              className="font-bold"
+            >
+              React Testing Library
+            </a>
+            .<br /> Please insert some html and queries to be adviced on which
+            should be used.
+          </p>
+        </div>
+      </div>
+    );
   }
 
+  const { data, suggestion } = state.result.elements?.[0] || {};
+
   return (
     <div className="flex flex-col overflow-hidden w-full h-full">
       <div className="flex-none pb-4 border-b">