create an encapsulated example

Author: rgbkrk

src/template/components/code-area.js

@@ -1,38 +1,59 @@
+import * as React from "react";
+
+import PresentationCell from "../components/presentation-cell";
+import CodeState from "../components/code-state";
+
 import { Kernel } from "@mybinder/host-cache";
 import { CodeArea } from "../components/code-area";
 const { WideLogo } = require("@nteract/logos");
 
-const myCode = `import pandas as pd
-import numpy as np
-df = pd.DataFrame(np.random.random((100,10)))
-df.head()
-`;
-
 const Index = () => {
   return (
     <div className="app">
-      <center>
-        <WideLogo height={80} theme="light" />
-        <br />
-        Welcome to nteract!
-        <br />
-        To get started, edit <code>pages/index.js</code>.
-      </center>
-      <hr />
+      <header>
+        <WideLogo height={40} theme="light" />
+
+        <p>
+          This <i>nteraction</i> brought to you in part by binder, jupyter, and
+          nteract.
+        </p>
+        <p>
+          A binder server is being launched in the background now. You'll see a
+          cell below when its ready.
+        </p>
+        <p>
+          To get started, edit <code>pages/index.js</code>.
+        </p>
+      </header>
+
       <Kernel repo="binder-examples/requirements" kernelName="python3">
         <Kernel.Consumer>
           {kernel =>
             kernel ? (
-              <CodeArea kernel={kernel}>{myCode}</CodeArea>
+              <CodeState kernel={kernel}>
+                <PresentationCell key={"the-cell"} />
+              </CodeState>
             ) : (
-              <pre>Loading...</pre>
+              <PresentationCell key={"the-cell"} />
             )
           }
         </Kernel.Consumer>
       </Kernel>
       <style jsx>{`
         .app {
           padding: 30px;
+          font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial,
+            sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        }
+
+        header {
+          font-size: 1em;
+          padding-bottom: 20px;
+        }
+        code {
+          font-size: 1.3em;
+          background-color: hsl(10, 0%, 90%);
+          padding: 2px;
         }
       `}</style>
     </div>