Home -> Index, styles

pages/index.js

@@ -3,10 +3,12 @@ import HTML5Backend from 'react-dnd-html5-backend'
 import { DragDropContext } from 'react-dnd'
 import Axios from 'axios'
 
+import Meta from '../components/meta'
+import Toolbar from '../components/toolbar'
 import CodeImage from '../components/codeImage'
 import api from '../lib/api'
 
-class Home extends React.Component {
+class Index extends React.Component {
   /* pathname, asPath, err, req, res */
   static async getInitialProps ({ asPath }) {
     try {
@@ -19,23 +21,36 @@ class Home extends React.Component {
   }
   render () {
     return (
-      <div>
-        <style jsx>{`
-          div {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-          }
-        `}
-        </style>
-        <h1>Welcome to Code Image</h1>
-        <CodeImage>
-          {this.props.content}
-        </CodeImage>
-      </div>
+        <div className="main">
+          <Meta />
+          <h1>Welcome to Code Image</h1>
+          <div id="editor">
+            <Toolbar />
+            <CodeImage>
+              {this.props.content}
+            </CodeImage>
+          </div>
+          <style jsx>{`
+            h1 {
+              color: #fff;
+            }
+            div {
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+            }
+
+            #editor {
+              height: 460px;
+              background: #151515;
+              padding: 16px;
+            }
+          `}
+          </style>
+        </div>
     )
   }
 }
 
-export default DragDropContext(HTML5Backend)(Home)
+export default DragDropContext(HTML5Backend)(Index)