Fixes for embeded renderer (#76)

pages/embed.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import { SandpackFiles } from '@codesandbox/sandpack-react'
 import { generate } from '../utils/helper'
 import BrowserPreview from '../components/BrowserPreview'
+import { AppPage } from '../components/AppPage'
 
 const Embed = () => {
   const [files, setFiles] = useState<SandpackFiles>({})
@@ -27,16 +28,44 @@ const Embed = () => {
   }, [])
 
   return (
-    <div className="preview">
-      <BrowserPreview
-        options={{ files, displayFiles: false, theme: 'codesandbox-light' }}
-      />
-      <style jsx>{`
-        .preview {
-          height: calc(100vh - 15px);
-        }
-      `}</style>
-    </div>
+    <AppPage>
+      <div className="preview">
+        {Object.keys(files || {}).length > 0 && (
+          <BrowserPreview
+            options={{ files, displayFiles: false, theme: 'codesandbox-light' }}
+          />
+        )}
+        {Object.keys(files || {}).length === 0 && (
+          <div className="empty_state">
+            <img className="logo" src="/static/svg/logo_white.svg" alt="Teleport HQ" />
+            Listening for updates
+          </div>
+        )}
+        <style jsx>{`
+          .empty_state {
+            height: 100%;
+            display: flex;
+            align-items: center;
+            background-size: cover;
+            justify-content: center;
+            flex-direction: column;
+            color: var(--main-text-color);
+            font-family: var(--main-font-family);
+            font-size: var(--main-text-font-size);
+            background-image: url('/static/svg/hero.svg');
+          }
+
+          .logo {
+            width: 200px;
+            padding-bottom: 10px;
+          }
+
+          .preview {
+            height: 100vh;
+          }
+        `}</style>
+      </div>
+    </AppPage>
   )
 }