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,31 +77,30 @@ const langauges = [
   'YAML'
 ].map(name => ({ name }))
 
-export default class extends React.Component {
-  constructor() {
-    super()
-  }
+const Toolbar = (props) => (
+  <div id="toolbar">
+    <Dropdown list={themes} />
+    <Dropdown list={langauges} />
+    <ColorPicker />
+    <Settings />
+    <Button
+      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%;
+        height: 40px; // TODO fix
+        margin-bottom: 16px;
+        display: flex;
+        position: relative;
+        z-index: 1;
+      }
+    `}</style>
+  </div>
+)
 
-  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 title="Save Image" bg="#C3E98D" />
-        <style jsx>{`
-          #toolbar {
-            width: 100%;
-            height: 40px; // TODO fix
-            margin-bottom: 16px;
-            display: flex;
-            position: relative;
-            z-index: 1;
-          }
-        `}</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>