2 files changed, 19 insertions, 0 deletions
diff --git a/src/js/cms-preview-templates/post.js b/src/js/cms-preview-templates/post.js
index 0c819fd..38ab505 100644
--- a/src/js/cms-preview-templates/post.js
+++ b/src/js/cms-preview-templates/post.js
@@ -8,6 +8,11 @@ export default class PostPreview extends React.Component {
     return <div className="mw6 center ph3 pv4">
       <h1 className="f2 lh-title b mb3">{ entry.getIn(["data", "title"])}</h1>
       <div className="flex justify-between grey-3">
+        <div style={{
+          width: "80px",
+          height: "80px",
+          backgroundColor: entry.getIn(['data', 'color'])
+        }}></div>
         <p>{ format(entry.getIn(["data", "date"]), "ddd, MMM D, YYYY") }</p>
         <p>Read in x minutes</p>
       </div>
diff --git a/src/js/cms.js b/src/js/cms.js
index 289b26a..aae6669 100644
--- a/src/js/cms.js
+++ b/src/js/cms.js
@@ -1,7 +1,21 @@
+import React from "react";
 import CMS from "netlify-cms";
+
 import PostPreview from "./cms-preview-templates/post";
 import ProductsPreview from "./cms-preview-templates/products";
 
+class ColorControl extends React.Component {
+  render() {
+    return <input
+        style={{height: "80px"}}
+        type="color"
+        value={this.props.value}
+        onInput={(e) => this.props.onChange(e.target.value)}
+    />;
+  }
+}
+
 CMS.registerPreviewStyle("/css/main.css");
 CMS.registerPreviewTemplate("post", PostPreview);
 CMS.registerPreviewTemplate("products", ProductsPreview);
+CMS.registerWidget("color", ColorControl);