2 files changed, 30 insertions, 0 deletions
diff --git a/src/js/cms-preview-templates/contact.js b/src/js/cms-preview-templates/contact.js
new file mode 100644
index 0000000..dea318c
--- /dev/null
+++ b/src/js/cms-preview-templates/contact.js
@@ -0,0 +1,28 @@
+import React from "react";
+
+const ContactEntry = ({heading, text}) =>
+  <div>
+    <h4 className="f4 b lh-title mb2 primary">{ heading }</h4>
+    <p>{ text }</p>
+  </div>;
+
+const ContactEntries = ({data}) => data && data.length > 0
+    ? <div className="flex-ns mb3">
+      {data.map(({heading, text}) => <ContactEntry heading={heading} text={text} />)}
+    </div>
+    : "";
+
+export default class ContactPreview extends React.Component {
+  render() {
+    const {entry, getAsset, widgetFor} = this.props;
+    const entryContactEntries = entry.getIn(["data", "contact_entries"]);
+    const contactEntries = entryContactEntries ? entryContactEntries.toJS() : [];
+    return <div className="ph3 bg-off-white">
+      <img src={getAsset(entry.getIn(["data", "logo"]))} alt="" className="db w4 center pv4" />
+      <div className="center mw6 pv3">
+        { widgetFor("body") }
+        <ContactEntries data={contactEntries} />
+      </div>
+    </div>;
+  }
+}
diff --git a/src/js/cms.js b/src/js/cms.js
index 5bc6e65..3f018b9 100644
--- a/src/js/cms.js
+++ b/src/js/cms.js
@@ -4,6 +4,7 @@ import CMS from "netlify-cms";
 import PostPreview from "./cms-preview-templates/post";
 import ProductsPreview from "./cms-preview-templates/products";
 import ValuesPreview from "./cms-preview-templates/values";
+import ContactPreview from "./cms-preview-templates/contact";
 
 
 // Example of creating a custom color widget
@@ -22,4 +23,5 @@ CMS.registerPreviewStyle("/css/main.css");
 CMS.registerPreviewTemplate("post", PostPreview);
 CMS.registerPreviewTemplate("products", ProductsPreview);
 CMS.registerPreviewTemplate("values", ValuesPreview);
+CMS.registerPreviewTemplate("contact", ContactPreview);
 CMS.registerWidget("color", ColorControl);