From 9817e3d0e90ce9725029a64f787bfc13539fcf56 Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Mon, 25 Jan 2021 13:36:35 +0000
Subject: [PATCH] feat(area-covered): init page

---
 gatsby-config.js          |  5 ++++
 src/components/header.js  |  9 +++++--
 src/pages/area-covered.js | 56 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/area-covered.js

diff --git a/gatsby-config.js b/gatsby-config.js
index 84b6afa..ae88bd6 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -34,10 +34,15 @@ module.exports = {
           }
         ]
       },
+      {
+        title: "Area covered",
+        to: "/area-covered"
+      },
       {
         title: "About",
         to: "/about"
       },
+
       {
         title: "Contact",
         to: "/contact"
diff --git a/src/components/header.js b/src/components/header.js
index 5b15e8e..c9c4c44 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -5,8 +5,8 @@ import { css } from "@emotion/react";
 const Container = styled.header`
   position: relative;
   height: 50vh;
-  max-height: 1200px;
   color: white;
+  ${props => props.avoidNav && `margin-top: 40px;`}
 `;
 
 const Content = styled.div`
@@ -40,15 +40,20 @@ const Content = styled.div`
   text-align: center;
 `;
 
+const Map = styled.div``;
+
 export default function Header({
   image,
+  map,
   position = "middle middle",
+  avoidNav,
   children
 }) {
   const [posY, posX] = position.split(" ");
   return (
-    <Container>
+    <Container avoidNav={avoidNav}>
       {image && <Img style={{ height: "100%" }} fluid={image} />}
+      {map && <Map>{map}</Map>}
       <Content posX={posX} posY={posY}>
         {children}
       </Content>
diff --git a/src/pages/area-covered.js b/src/pages/area-covered.js
new file mode 100644
index 0000000..0cf952a
--- /dev/null
+++ b/src/pages/area-covered.js
@@ -0,0 +1,56 @@
+import React from "react";
+import Layout from "../layout";
+import { Header, Map, Section, Text } from "../components";
+import { Polyline } from "google-maps-react";
+
+const triangleCoords = [
+  { lat: 52.253, lng: 0.109 }, // Cambridge
+  { lat: 52.095, lng: 1.144 }, // Ipswich
+  { lat: 51.975, lng: 1.379 }, // Felixtowe
+  { lat: 51.782, lng: 1.151 }, // Clacton
+  { lat: 51.755, lng: 0.975 }, // Blackwater
+  { lat: 51.612, lng: 0.987 }, // Courtsend
+  { lat: 51.453, lng: 0.733 }, // Grain
+  { lat: 51.228, lng: 0.554 }, // Maidstone
+  { lat: 51.258, lng: -0.087 }, // Caterham
+  { lat: 51.436, lng: -0.361 }, // Twickenham
+  { lat: 51.611, lng: -0.45 }, // Northwood
+  { lat: 51.737, lng: -0.399 }, // St Albans
+  { lat: 51.992, lng: -0.281 }, // Letchworth
+  { lat: 52.253, lng: 0.109 } // Cambridge
+];
+
+export default function Index() {
+  return (
+    <Layout location="/area-covered">
+      <Header
+        map={
+          <Map
+            initialCenter={{
+              lat: 51.765,
+              lng: 0.022
+            }}
+            zoom={7}
+            mapTypeContol={false}
+            scaleControl={false}
+            streetViewControl={false}
+            rotateControl={false}
+            fullscreenControl={false}
+          >
+            <Polyline
+              path={triangleCoords}
+              strokeColor="var(--theme-color-primary)"
+              fillColor="#ff0000"
+              strokeOpacity={0.8}
+              strokeWeight={2}
+            />
+          </Map>
+        }
+        avoidNav
+      ></Header>
+      <Section heading="Area covered">
+        <Text>Info about area covered here</Text>
+      </Section>
+    </Layout>
+  );
+}