refactor(footer): use team data

src/components/footer.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { graphql, StaticQuery } from "gatsby";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { Grid, IconWithContent, Icon, Link, Text } from ".";
@@ -36,11 +37,27 @@ const Item = styled.div`
 
 export default function Footer() {
   const year = new Date().getFullYear();
+  return (
+    <StaticQuery
+      query={graphql`
+        query {
+          allPerson(filter: { name: { eq: "Nicholas Day" } }) {
+            nodes {
+              phone
+              altPhone
+              email
+            }
+          }
+        }
+      `}
+      render={data => {
+        const { phone, altPhone, email } = data.allPerson.nodes[0];
         return (
           <Container>
             <Content>
               <Grid columns={[1, 2]} breakpoints={["45em"]}>
                 <Cell>
+                  {phone && (
                     <Item>
                       <IconWithContent>
                         <Icon color="dark" size="lg">
@@ -50,13 +67,17 @@ export default function Footer() {
                           weight="bold"
                           color="dark"
                           size="lg"
-                  to="tel:+447539051512"
+                          to={`tel:${phone
+                            .replace(/ /, "")
+                            .replace(/^0/, "+44")}`}
                           noDecoration
                         >
-                  07539 051512
+                          {phone}
                         </Link>
                       </IconWithContent>
                     </Item>
+                  )}
+                  {altPhone && (
                     <Item>
                       <IconWithContent>
                         <Icon color="dark" size="lg">
@@ -66,15 +87,19 @@ export default function Footer() {
                           weight="bold"
                           color="dark"
                           size="lg"
-                  to="tel:+447378839358"
+                          to={`tel:${altPhone
+                            .replace(/ /, "")
+                            .replace(/^0/, "+44")}`}
                           noDecoration
                         >
-                  07378 839358
+                          {altPhone}
                         </Link>
                       </IconWithContent>
                     </Item>
+                  )}
                 </Cell>
                 <Cell flexEnd={"45em"}>
+                  {email && (
                     <Item>
                       <IconWithContent>
                         <Icon color="dark" size="lg">
@@ -84,17 +109,21 @@ export default function Footer() {
                           weight="bold"
                           color="dark"
                           size="md"
-                  to="mailto:quotations@abcprojectdesign.com"
+                          to={`mailto:${email}`}
                           noDecoration
                         >
-                  quotations@abcprojectdesign.com
+                          {email}
                         </Link>
                       </IconWithContent>
                     </Item>
+                  )}
                 </Cell>
               </Grid>
               <Text size="xs">&copy; {year} Abc Project Ltd</Text>
             </Content>
           </Container>
         );
+      }}
+    />
+  );
 }