69 lines
1.8 KiB
JavaScript
69 lines
1.8 KiB
JavaScript
import React from "react";
|
|
import styled from "@emotion/styled";
|
|
import { css } from "@emotion/react";
|
|
import { Grid, IconWithContent, Icon, Link, Text } from ".";
|
|
import Envelope from "../icons/envelope.svg";
|
|
import Phone from "../icons/phone.svg";
|
|
|
|
const Container = styled.footer`
|
|
background-color: var(--color-white);
|
|
border-top: 1px solid var(--color-dark-grey);
|
|
`;
|
|
|
|
const Content = styled.div`
|
|
max-width: var(--page-max-width);
|
|
margin: 0 auto;
|
|
padding: var(--spacing-y-lg) var(--spacing-x-sm);
|
|
font-size: var(--font-size-sm);
|
|
text-align: center;
|
|
`;
|
|
|
|
const Cell = styled.div`
|
|
display: flex;
|
|
${props =>
|
|
props.flexEnd &&
|
|
css`
|
|
@media (min-width: ${props.flexEnd}) {
|
|
justify-content: flex-end;
|
|
}
|
|
`}
|
|
`;
|
|
|
|
export default function Footer() {
|
|
const year = new Date().getFullYear();
|
|
return (
|
|
<Container>
|
|
<Content>
|
|
<Grid columns={[1, 2]} breakpoints={["45em"]}>
|
|
<Cell>
|
|
<IconWithContent>
|
|
<Icon color="dark" size="lg">
|
|
<Phone />
|
|
</Icon>
|
|
<Link color="dark" size="lg" to="tel:+447539051512" noDecoration>
|
|
07539 051512
|
|
</Link>
|
|
</IconWithContent>
|
|
</Cell>
|
|
<Cell flexEnd={"45em"}>
|
|
<IconWithContent>
|
|
<Icon color="dark" size="lg">
|
|
<Envelope />
|
|
</Icon>
|
|
<Link
|
|
color="dark"
|
|
size="md"
|
|
to="mailto:quotations@abcprojectdesign.com"
|
|
noDecoration
|
|
>
|
|
quotations@abcprojectdesign.com
|
|
</Link>
|
|
</IconWithContent>
|
|
</Cell>
|
|
</Grid>
|
|
<Text size="xs">© {year} Abc Project Ltd</Text>
|
|
</Content>
|
|
</Container>
|
|
);
|
|
}
|