modified documentation component

Author: prasanna1211

docs/client/components/PlaygroundPage/Documentation/styles.scss

@@ -1,10 +1,28 @@
 :local(.documentation) {
   position: fixed;
-  top: 55%;
-  height: 40%;
-  width: 100%;
+  right: 0%;
+  top: 78px;
+  height: 100%;
+  width: 5%;
+  box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
+  background: #ffffff;
   .header {
     font-size: 24px;
     font-weight: bold;
+    padding: 10px;
   }
+  button {
+    border-radius: 50%;
+    padding: 30px 25px;
+    position: absolute;
+    left: -45px;
+    top: 40%;
+  }
+  &.active {
+    width: 50%;
+    button {
+      left: -55px;
+    }
+  }
+  
 }

docs/client/components/PlaygroundPage/PlaygroundWithPreview/index.js

@@ -1,11 +1,45 @@
 import React from 'react';
-
+import Preview from './Preview';
+import Playground from './Playground';
 import styles from './styles.scss';
 
-const PlaygroundWithPreview = () => (
-  <div className={styles.playground}>
-    PlaygroundWithPreview
-  </div>
-);
+const defaultCode = `
+  const Example = (
+    <div>
+      Example Component
+    </div>
+  );
+`;
+
+class PlaygroundWithPreview extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    const {
+      activeComponent,
+    } = this.props;
+    
+    return (
+      <div className={styles['playground-preview']}>
+        <div className="header">
+          PlaygroundWithPreview
+        </div>
+        
+        <div>
+          <Playground
+            code={defaultCode}
+          />
+          <Preview
+            
+          />
+        </div>
+        {activeComponent}
+      </div>
+    );
+  }
+}
 
 export default PlaygroundWithPreview;