dan/abc-project-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(footer): use team data

Browse Source
This commit is contained in:
Dan Head
2021-02-07 22:59:11 +00:00
parent 0861995936
commit e6a5b57f4c
1 changed files with 88 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/footer.js
View File

@@ -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>
);
}}
/>
);
}