diff options
Diffstat (limited to 'src/js/cms-preview-templates/products.js')
| -rw-r--r-- | src/js/cms-preview-templates/products.js | 22 |
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>)} |