Add Ceremony page with google map

Add nav bar to public pages

src/components/CeremonyMap/CeremonyMap.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
+
+class CeremonyMap extends React.Component {
+  render() {
+    const CeremonyGoogleMap = withGoogleMap(() => (
+      <GoogleMap
+        defaultZoom={14}
+        defaultCenter={{ lat: 51.7109, lng: -0.4479 }}
+      >
+        <Marker
+          title="All Saints' Church"
+          position={{ lat: 51.7109, lng: -0.4479 }}
+          key="0"
+        />
+      </GoogleMap>
+    ));
+    return (
+      <CeremonyGoogleMap
+        containerElement={
+          <div style={{ height: '360px', width: '360px' }} />
+        }
+        mapElement={
+          <div style={{ height: '360px', width: '360px' }} />
+        }
+      />
+    );
+  }
+}
+
+export default CeremonyMap;

src/components/CeremonyMap/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "CeremonyMap",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./CeremonyMap.js"
+}

src/components/Html.js

@@ -23,6 +23,7 @@ class Html extends React.Component {
           <link rel="apple-touch-icon" href="apple-touch-icon.png" />
           <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Palanquin+Dark|Niconne" />
           {style && <style id="css" dangerouslySetInnerHTML={{ __html: style }} />}
+          <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAY-RO-FaBZyAh8FDJneMc6NjMdK2D8WtQ" />
         </head>
         <body>
           <div id="app" dangerouslySetInnerHTML={{ __html: children }} />

src/components/Layout/Layout.js

@@ -1,15 +1,18 @@
 import React, { PropTypes } from 'react';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './Layout.css';
+import Navigation from '../Navigation';
 
 class Layout extends React.Component {
   static propTypes = {
     children: PropTypes.node.isRequired,
+    current: PropTypes.string,
   };
 
   render() {
     return (
       <div>
+        <Navigation current={this.props.current} />
         {this.props.children}
       </div>
     );

src/components/Navigation/Navigation.css

@@ -0,0 +1,32 @@
+.root {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.link {
+  display: inline-block;
+  padding: 8px 8px 6px;
+  text-decoration: none;
+  font-size: 1.125em;
+  border-bottom: 2px solid transparent;
+  transition: color 0.3s ease-in, border-color 0.3s ease-in;
+}
+
+.link,
+.link:active,
+.link:visited {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.link:hover {
+  color: rgba(255, 255, 255, 1);
+  border-color: #fff;
+}
+
+.active {
+  display: none;
+}

src/components/Navigation/Navigation.js

@@ -0,0 +1,24 @@
+import React, { PropTypes } from 'react';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import s from './Navigation.css';
+import Link from '../Link';
+
+class Navigation extends React.Component {
+  static propTypes = {
+    current: PropTypes.string,
+  };
+
+  render() {
+    if (!this.props.current) {
+      return null;
+    }
+    return (
+      <div className={s.root} role="navigation">
+        <Link className={[s.link, this.props.current === 'home' ? s.active : null].join(' ')} to="/">RSVP</Link>
+        <Link className={[s.link, this.props.current === 'ceremony' ? s.active : null].join(' ')} to="/ceremony">Church</Link>
+      </div>
+    );
+  }
+}
+
+export default withStyles(s)(Navigation);

src/components/Navigation/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "Navigation",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Navigation.js"
+}