{"version":3,"file":"component---src-pages-contact-js-952ee0d6aaf405ea2178.js","mappings":"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","sources":["webpack://wouterbles.com/./src/components/PageTitle.js","webpack://wouterbles.com/./src/components/ContactForm.js","webpack://wouterbles.com/./src/pages/contact.js"],"sourcesContent":["import React from 'react'\nimport styled from '@emotion/styled'\n\nconst Title = styled.h1`\n  font-size: ${props => (props.small ? '2em' : '3em')};\n  font-weight: 600;\n  text-align: center;\n  margin: 0 0 3rem 0;\n  margin: ${props => (props.small ? '1rem 0 4rem 0' : '0 0 3rem 0')};\n  line-height: 1.2;\n  span {\n    margin: 0 0 0 0.25em;\n  }\n  a {\n    transition: all 0.2s;\n    color: ${props => props.theme.colors.text};\n    &:hover {\n      color: ${props => props.theme.colors.highlight};\n    }\n  }\n`\n\nconst PageTitle = props => {\n  return <Title small={props.small}>{props.children}</Title>\n}\n\nexport default PageTitle\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport styled from '@emotion/styled'\n\nconst Form = styled.form`\n  max-width: ${props => props.theme.sizes.maxWidthCentered};\n  margin: 0 auto;\n  display: flex;\n  flex-flow: row wrap;\n  justify-content: space-between;\n  align-items: flex-start;\n  input,\n  textarea {\n    font-family: inherit;\n    font-size: inherit;\n    background: ${props => props.theme.colors.tertiary};\n    color: ${props => props.theme.colors.text};\n    border-radius: 2px;\n    padding: 1em;\n    &::-webkit-input-placeholder {\n      color: gray;\n    }\n    &::-moz-placeholder {\n      color: gray;\n    }\n    &:-ms-input-placeholder {\n      color: gray;\n    }\n    &:-moz-placeholder {\n      color: gray;\n    }\n    &:required {\n      box-shadow: none;\n    }\n  }\n  &::before {\n    content: '';\n    background: black;\n    height: 100%;\n    width: 100%;\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    transition: 0.2s all;\n    opacity: ${props => (props.overlay ? '.8' : '0')};\n    visibility: ${props => (props.overlay ? 'visible' : 'hidden')};\n  }\n`\n\nconst Name = styled.input`\n  margin: 0 0 1em 0;\n  width: 100%;\n  @media (min-width: ${props => props.theme.responsive.small}) {\n    width: 49%;\n  }\n`\n\nconst Email = styled.input`\n  margin: 0 0 1em 0;\n  width: 100%;\n  @media (min-width: ${props => props.theme.responsive.small}) {\n    width: 49%;\n  }\n`\n\nconst Message = styled.textarea`\n  width: 100%;\n  margin: 0 0 1em 0;\n  line-height: 1.6;\n  min-height: 250px;\n  resize: vertical;\n`\n\nconst Submit = styled.input`\n  background: ${props => props.theme.colors.text} !important;\n  color: white !important;\n  cursor: pointer;\n  transition: 0.2s;\n  &:hover {\n    background: ${props => props.theme.colors.highlight} !important;\n  }\n`\n\nconst Modal = styled.div`\n  background: white;\n  padding: 2em;\n  border-radius: 2px;\n  position: fixed;\n  min-width: 75%;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  margin: 0 auto;\n  z-index: 99;\n  display: flex;\n  flex-flow: column;\n  align-items: flex-start;\n  transition: 0.2s all;\n  opacity: ${props => (props.visible ? '1' : '0')};\n  visibility: ${props => (props.visible ? 'visible' : 'hidden')};\n  @media screen and (min-width: ${props => props.theme.responsive.small}) {\n    min-width: inherit;\n    max-width: 400px;\n  }\n  p {\n    line-height: 1.6;\n    margin: 0 0 2em 0;\n  }\n`\n\nconst Button = styled.div`\n  background: ${props => props.theme.colors.text};\n  font-size: 1em;\n  display: inline-block;\n  margin: 0 auto;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  color: white;\n  padding: 1em;\n  border-radius: 2px;\n  text-decoration: none;\n  transition: 0.2s;\n  z-index: 99;\n  &:focus {\n    outline: none;\n  }\n  &:hover {\n    background: ${props => props.theme.colors.highlight};\n  }\n`\n\nconst encode = data => {\n  return Object.keys(data)\n    .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))\n    .join('&')\n}\n\nclass ContactForm extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      name: '',\n      email: '',\n      message: '',\n      showModal: false,\n    }\n  }\n\n  handleInputChange = event => {\n    const target = event.target\n    const value = target.value\n    const name = target.name\n    this.setState({\n      [name]: value,\n    })\n  }\n\n  handleSubmit = event => {\n    fetch('/?no-cache=1', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },\n      body: encode({ 'form-name': 'contact', ...this.state }),\n    })\n      .then(this.handleSuccess)\n      .catch(error => alert(error))\n    event.preventDefault()\n  }\n\n  handleSuccess = () => {\n    this.setState({\n      name: '',\n      email: '',\n      message: '',\n      showModal: true,\n    })\n  }\n\n  closeModal = () => {\n    this.setState({ showModal: false })\n  }\n\n  render() {\n    return (\n      <Form\n        name=\"contact\"\n        onSubmit={this.handleSubmit}\n        data-netlify=\"true\"\n        data-netlify-honeypot=\"bot\"\n        overlay={this.state.showModal}\n        onClick={this.closeModal}\n      >\n        <input type=\"hidden\" name=\"form-name\" value=\"contact\" />\n        <p hidden>\n          <label>\n            Don’t fill this out:{' '}\n            <input name=\"bot\" onChange={this.handleInputChange} />\n          </label>\n        </p>\n\n        <Name\n          name=\"name\"\n          type=\"text\"\n          placeholder=\"Full Name\"\n          value={this.state.name}\n          onChange={this.handleInputChange}\n          required\n        />\n        <Email\n          name=\"email\"\n          type=\"email\"\n          placeholder=\"Email\"\n          value={this.state.email}\n          onChange={this.handleInputChange}\n          required\n        />\n        <Message\n          name=\"message\"\n          type=\"text\"\n          placeholder=\"Message\"\n          value={this.state.message}\n          onChange={this.handleInputChange}\n          required\n        />\n        <Submit name=\"submit\" type=\"submit\" value=\"Send\" />\n\n        <Modal visible={this.state.showModal}>\n          <p>\n            Thank you for reaching out. I will get back to you as soon as\n            possible.\n          </p>\n          <Button onClick={this.closeModal}>Okay</Button>\n        </Modal>\n      </Form>\n    )\n  }\n}\n\nContactForm.propTypes = {\n  data: PropTypes.object,\n}\n\nexport default ContactForm\n","import React from 'react'\nimport Layout from '../components/Layout'\nimport Container from '../components/Container'\nimport PageTitle from '../components/PageTitle'\nimport ContactForm from '../components/ContactForm'\nimport SEO from '../components/SEO'\n\nconst Contact = ({ data }) => {\n  return (\n    <Layout>\n      <SEO title=\"Contact\" description=\"Contact description goes here\" />\n      <Container>\n        <PageTitle>Contact</PageTitle>\n        <ContactForm />\n      </Container>\n    </Layout>\n  )\n}\n\nexport default Contact\n"],"names":["Title","props","small","theme","colors","text","highlight","children","Form","sizes","maxWidthCentered","tertiary","overlay","Name","responsive","Email","Message","Submit","Modal","visible","Button","ContactForm","handleInputChange","event","target","value","name","setState","handleSubmit","data","fetch","method","headers","body","state","Object","keys","map","key","encodeURIComponent","join","then","handleSuccess","catch","error","alert","preventDefault","email","message","showModal","closeModal","render","onSubmit","this","onClick","type","hidden","onChange","placeholder","required","React","Layout","SEO","title","description","Container","PageTitle"],"sourceRoot":""}