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

147
src/components/footer.js
View File

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