Add save image to toolbar callback

components/button.js

@@ -1,12 +1,13 @@
 import React from 'react'
 
 export default (props) => (
-  <div className="toolbar-btn" style={Object.assign({
+  <div onClick={props.onClick} className="toolbar-btn" style={Object.assign({
     background: props.bg
   }, props.style)}>
     <span>{props.title}</span>
     <style jsx>{`
       div {
+        cursor: pointer;
         height: 37px;
         display: flex;
         align-items: center;

components/toolbar.js

@@ -77,20 +77,19 @@ const langauges = [
   'YAML'
 ].map(name => ({ name }))
 
-export default class extends React.Component {
+const Toolbar = (props) => (
-  constructor() {
-    super()
-  }
-
-  render() {
-    return (
   <div id="toolbar">
     <Dropdown list={themes} />
     <Dropdown list={langauges} />
     <ColorPicker />
     <Settings />
-        <Button title="Copy Imgur Link" bg="#84ACFC" style={{ borderRadius: '3px 0px 0px 3px' }}/>
+    <Button
-        <Button title="Save Image" bg="#C3E98D" />
+      onClick={props.copyLink}
+      title="Copy Imgur Link"
+      bg="#84ACFC"
+      style={{ borderRadius: '3px 0px 0px 3px' }}
+    />
+    <Button onClick={props.save} title="Save Image" bg="#C3E98D" />
     <style jsx>{`
       #toolbar {
         width: 100%;
@@ -102,6 +101,6 @@ export default class extends React.Component {
       }
     `}</style>
   </div>
-    )
+)
-  }
+
-}
+export default Toolbar

pages/index.js

@@ -2,6 +2,8 @@ import React from 'react'
 import HTML5Backend from 'react-dnd-html5-backend'
 import { DragDropContext } from 'react-dnd'
 import Axios from 'axios'
+import domtoimage from 'dom-to-image'
+
 
 import Meta from '../components/meta'
 import Toolbar from '../components/toolbar'
@@ -19,13 +21,25 @@ class Index extends React.Component {
       return {}
     }
   }
+
+  save () {
+    // save
+    domtoimage.toJpeg(document.getElementById('container'))
+      .then((dataUrl) => {
+        const link = document.createElement('a')
+        link.download = 'my-image-name.jpeg'
+        link.href = dataUrl
+        link.click()
+      })
+  }
+
   render () {
     return (
         <div className="main">
           <Meta />
           <h1>Welcome to Code Image</h1>
           <div id="editor">
-            <Toolbar />
+            <Toolbar save={this.save} />
             <CodeImage>
               {this.props.content}
             </CodeImage>