Merge pull request #11 from netlify-templates/update-for-cms-1-0

Update for CMS 1.0

1 files changed, 5 insertions, 17 deletions

diff --git a/src/js/cms-preview-templates/products.js b/src/js/cms-preview-templates/products.js
index 547ff33..4316c7d 100644
--- a/src/js/cms-preview-templates/products.js
+++ b/src/js/cms-preview-templates/products.js
@@ -1,9 +1,11 @@
 import React from "react";
 import format from "date-fns/format";
 
+import Jumbotron from "./components/jumbotron";
+
 export default class PostPreview extends React.Component {
   render() {
-    const {entry, getAsset, widgetFor} = this.props;
+    const {entry, getAsset} = this.props;
     let image = getAsset(entry.getIn(["data", "image"]));
 
     // Bit of a nasty hack to make relative paths work as expected as a background image here
@@ -12,21 +14,7 @@ export default class PostPreview extends React.Component {
     }
 
     return <div>
-      <div className="pv5 pv6-l ph3 bg-center cover" style={{
-        backgroundImage: image && `url(${image})`
-      }}>
-        <div className="mw7 center ph3">
-          <div className="db mb3">
-            <div className="mw7 relative bg-fix-primary mb3">
-              <h1 className="f2 f1-l b di lh-title mb3 white mw6 bg-primary">
-                { entry.getIn(["data", "title"]) }
-              </h1>
-            </div>
-            <div className="mw7 relative bg-fix-primary">
-            </div>
-          </div>
-        </div>
-      </div>
+      <Jumbotron image={image} title={entry.getIn(["data", "title"])} />
 
       <div className="bg-off-white pv4">
         <div className="ph3 mw7 center">
@@ -34,7 +22,7 @@ export default class PostPreview extends React.Component {
           <p className="mb4 mw6">{entry.getIn(["data", "intro", "description"])}</p>
 
           <div className="flex-ns flex-wrap mhn2-ns mb3">
-            {(entry.getIn(["data","intro", "blurbs"]) || []).map((blurb, index) => <div className="ph2-ns w-50-ns mb4" key={index}>
+            {(entry.getIn(["data", "intro", "blurbs"]) || []).map((blurb, index) => <div className="ph2-ns w-50-ns mb4" key={index}>
               <img src={blurb.get("image") && getAsset(blurb.get("image"))} alt="" className="center db mb3" style={{width: "240px"}}/>
               <p>{blurb.get("text")}</p>
             </div>)}