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

feat(grid): init component

Browse Source
This commit is contained in:
Dan Head
2021-01-27 00:07:25 +00:00
parent 9817e3d0e9
commit 9c84cb91c9
4 changed files with 109 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/grid.js Normal file
View File

@@ -0,0 +1,34 @@
import React from "react";
import styled from "@emotion/styled";
import { css } from "@emotion/react";
const Container = styled.div`
display: grid;
gap: var(--spacing-x-sm) var(--spacing-y-sm);
${props =>
props.columns &&
props.columns.map((column, i) =>
i === 0 && column > 1
? css`
grid-template-columns: repeat(${column}, minmax(10px, 1fr));
`
: css`
@media (min-width: ${props.breakpoints[i - 1]}) {
grid-template-columns: repeat(${column}, minmax(10px, 1fr));
${
i === 1 &&
css`
gap: var(--spacing-x-md) var(--spacing-y-md);
`
}
`
)}
`;
export default function Grid({ columns, breakpoints = ["30em"], children }) {
return (
<Container columns={columns} breakpoints={breakpoints}>
{children}
</Container>
);
}

1
src/components/index.js
View File

@@ -3,6 +3,7 @@ export { default as Card } from "./card";
export { default as Content } from "./content";
export { default as CustomSlick } from "./custom-slick";
export { default as Footer } from "./footer";
export { default as Grid } from "./grid";
export { default as HeaderLogo } from "./header-logo";
export { default as Header } from "./header";
export { default as Heading } from "./heading";

23
src/components/section.js
View File

@@ -1,6 +1,5 @@
import React from "react";
import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { Heading } from ".";
const Container = styled.div`
@@ -23,27 +22,11 @@ const Head = styled.div`
text-align: center;
`;
const Body = styled.div`
${props =>
props.grid > 0 &&
css`
display: grid;
gap: var(--spacing-x-sm) 0;
@media (min-width: ${props.breakpoint}) {
grid-template-columns: repeat(${props.grid}, 1fr);
gap: var(--spacing-x-md);
}
`}
`;
export default function Section({
heading,
headingElement = "h2",
children,
variant,
grid,
breakpoint = "30em"
variant
}) {
return (
<Container variant={variant}>
@@ -53,9 +36,7 @@ export default function Section({
<Heading el={headingElement}>{heading}</Heading>
</Head>
)}
<Body grid={grid} breakpoint={breakpoint}>
{children}
</Body>
{children}
</Content>
</Container>
);

141
src/pages/contact.js
View File

@@ -4,6 +4,7 @@ import { Marker } from "google-maps-react";
import Layout from "../layout";
import {
Button,
Grid,
Header,
Icon,
IconWithContent,
@@ -56,83 +57,85 @@ export default function Index({ data }) {
>
<h1>Get in touch</h1>
</Header>
<Section grid={2} breakpoint="40em">
<div>
<Text>Get in touch with us</Text>
<Text textStyle="italic">More info here</Text>
<IconWithContent>
<Icon color="dark" size="lg">
<Phone />
</Icon>
<Text color="dark" size="lg">
07123 456789
</Text>
</IconWithContent>
<IconWithContent>
<Icon color="dark" size="lg">
<Envelope />
</Icon>
<Link
color="dark"
size="md"
to="mailto:quotations@abcprojectdesign.com"
>
quotations@abcprojectdesign.com
</Link>
</IconWithContent>
</div>
<div>
{submitted ? (
<Section>
<Grid columns={[1, 2]} breakpoints={["40rem"]}>
<div>
<Text>Get in touch with us</Text>
<Text textStyle="italic">More info here</Text>
<IconWithContent>
<Icon color="dark" size="lg">
<CheckCircle />
<Phone />
</Icon>
<>
<Text color="dark" size="lg">
Thank you for contacting us
</Text>
<Text color="dark" size="md">
We will be in touch shortly
</Text>
</>
<Text color="dark" size="lg">
07123 456789
</Text>
</IconWithContent>
) : (
<>
<IconWithContent>
<Icon color="dark" size="lg">
<Envelope />
</Icon>
<Link
color="dark"
size="md"
to="mailto:quotations@abcprojectdesign.com"
>
quotations@abcprojectdesign.com
</Link>
</IconWithContent>
</div>
<div>
{submitted ? (
<IconWithContent>
<Icon color="dark" size="lg">
<Envelope />
<CheckCircle />
</Icon>
<Text color="dark" size="lg">
Contact us
</Text>
<>
<Text color="dark" size="lg">
Thank you for contacting us
</Text>
<Text color="dark" size="md">
We will be in touch shortly
</Text>
</>
</IconWithContent>
<form
name="contact"
method="POST"
action="/contact"
onSubmit={handleSubmit}
data-netlify="true"
data-netlify-honeypot="bot-field"
>
<input type="hidden" name="form-name" value="contact" />
<InputText id="contact-name" name="name" label="Name" />
<InputText id="contact-email" name="email" label="Email" />
<InputText
id="contact-telephone"
name="telephone"
label="Telephone"
/>
<InputText
id="contact-message"
name="message"
label="Message"
textArea
/>
<Button type="submit">Submit</Button>
</form>
</>
)}
</div>
) : (
<>
<IconWithContent>
<Icon color="dark" size="lg">
<Envelope />
</Icon>
<Text color="dark" size="lg">
Contact us
</Text>
</IconWithContent>
<form
name="contact"
method="POST"
action="/contact"
onSubmit={handleSubmit}
data-netlify="true"
data-netlify-honeypot="bot-field"
>
<input type="hidden" name="form-name" value="contact" />
<InputText id="contact-name" name="name" label="Name" />
<InputText id="contact-email" name="email" label="Email" />
<InputText
id="contact-telephone"
name="telephone"
label="Telephone"
/>
<InputText
id="contact-message"
name="message"
label="Message"
textArea
/>
<Button type="submit">Submit</Button>
</form>
</>
)}
</div>
</Grid>
</Section>
<Map
initialCenter={{