Create reception page

src/components/CeremonyMap/CeremonyMap.js

@@ -1,31 +0,0 @@
-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

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

src/components/Map/Map.js

@@ -0,0 +1,44 @@
+import React, { PropTypes } from 'react';
+import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
+
+class Map extends React.Component {
+  static propTypes = {
+    defaultZoom: PropTypes.number.isRequired,
+    lat: PropTypes.number.isRequired,
+    lng: PropTypes.number.isRequired,
+    markers: PropTypes.arrayOf(PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      lat: PropTypes.number.isRequired,
+      lng: PropTypes.number.isRequired,
+    })).isRequired,
+  };
+
+  render() {
+    const CeremonyGoogleMap = withGoogleMap(() => (
+      <GoogleMap
+        defaultZoom={this.props.defaultZoom}
+        defaultCenter={{ lat: this.props.lat, lng: this.props.lng }}
+      >
+        {this.props.markers.map((props, index) => (
+          <Marker
+            title={props.title}
+            position={{ lat: props.lat, lng: props.lng }}
+            key={index}
+          />
+        ))}
+      </GoogleMap>
+    ));
+    return (
+      <CeremonyGoogleMap
+        containerElement={
+          <div style={{ height: '360px', width: '360px' }} />
+        }
+        mapElement={
+          <div style={{ height: '360px', width: '360px' }} />
+        }
+      />
+    );
+  }
+}
+
+export default Map;

src/components/Map/package.json

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

src/components/Navigation/Navigation.js

@@ -16,6 +16,7 @@ class Navigation extends React.Component {
       <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>
+        <Link className={[s.link, this.props.current === 'reception' ? s.active : null].join(' ')} to="/reception">Venue</Link>
       </div>
     );
   }

src/routes/ceremony/Ceremony.js

@@ -1,7 +1,15 @@
 import React from 'react';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './Ceremony.css';
-import CeremonyMap from '../../components/CeremonyMap';
+import Map from '../../components/Map';
+
+const markers = [
+  {
+    title: 'All Saints\' Church',
+    lat: 51.7109,
+    lng: -0.4479,
+  },
+];
 
 class Ceremony extends React.Component {
   constructor(props) {
@@ -35,7 +43,12 @@ class Ceremony extends React.Component {
               Parking is available across the road at the Rose and Crown pub
               (Dan may be there before 1pm 😉).</p>
             <div className={s.map}>
-              <CeremonyMap />
+              <Map
+                defaultZoom={14}
+                lat={markers[0].lat}
+                lng={markers[0].lng}
+                markers={markers}
+              />
             </div>
             <h3>About the church</h3>
             <p>All Saints Church is a medieval church with parts dating from the 13th century.

src/routes/index.js

@@ -10,6 +10,7 @@ export default {
     require('./home').default,
     require('./rsvp').default,
     require('./ceremony').default,
+    require('./reception').default,
     require('./login').default,
     require('./admin').default,
     require('./adminPeople').default,

src/routes/reception/Reception.css

@@ -0,0 +1,56 @@
+@import '../../components/variables.css';
+
+.root {
+  width: 100vw;
+  height: 100vh;
+}
+
+.bgImage {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  background: url('/img/offley_2560.jpg');
+  background-size: cover;
+  background-position-x: 54%;
+  background-color: #c1c1c1;
+  filter: grayscale(1) brightness(0.6);
+  z-index: -1;
+  transition: filter ease-in-out 0.5s;
+}
+
+.bgImageFocus {
+  filter: grayscale(0.4) brightness(1);
+}
+
+.container {
+  padding-top: 50px;
+  margin: 0 20px;
+}
+
+.headings {
+  max-width: 640px;
+  margin: 0 auto 40px;
+  text-align: center;
+  color: #fff;
+  text-shadow: 3px 3px 8px var(--colour-nearblack);
+  font-size: 1.3em;
+}
+
+.headings h1 {
+  margin: 0 0 10px;
+}
+
+.subheading {
+  font-family: var(--font-family-cursive);
+}
+
+.content {
+  max-width: 960px;
+  margin: 0 auto;
+  color: #fff;
+  text-shadow: 1px 1px 4px var(--colour-nearblack);
+}
+
+.map {
+  width: 360px;
+}

src/routes/reception/Reception.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import s from './Reception.css';
+import Map from '../../components/Map';
+
+const markers = [
+  {
+    title: 'Offley Place',
+    lat: 51.9282,
+    lng: -0.3332,
+  },
+];
+
+class Reception extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  focusBgImage = (focus) => {
+    this.setState({ focusBgImage: focus });
+  }
+
+  render() {
+    return (
+      <div className={s.root}>
+        <div
+          className={[
+            s.bgImage,
+            this.state.focusBgImage ? s.bgImageFocus : null,
+          ].join(' ')}
+        />
+        <div className={s.container}>
+          <div className={s.headings}>
+            <h1>Offley Place</h1>
+            <h2 className={s.subheading}>Kings Walden Road<br />
+              Great Offley<br />
+              Hitchin<br />
+              SG5 3DX</h2>
+          </div>
+          <div className={s.content}>
+            <h3>When</h3>
+            <p>The Reception will begin at 3pm, Wedding breakfast at 5pm
+              followed by music until late.</p>
+            <h3>Where</h3>
+            <p>The venue is approximately 30 minute drive from the Church.</p>
+            <div className={s.map}>
+              <Map
+                defaultZoom={12}
+                lat={markers[0].lat}
+                lng={markers[0].lng}
+                markers={markers}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withStyles(s)(Reception);

src/routes/reception/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Reception from './Reception';
+import Layout from '../../components/Layout';
+
+export default {
+
+  path: '/reception',
+
+  action() {
+    return {
+      title: 'Reception',
+      component: <Layout current="reception"><Reception /></Layout>,
+    };
+  },
+};