{"version":3,"sources":["webpack:///./src/images/loader.js","webpack:///./src/components/contact/Contact.js","webpack:///./src/components/contact/Form.js","webpack:///./src/components/contact/Details.js","webpack:///./src/pages/contact.js"],"names":["Loader","viewBox","cx","cy","r","fill","strokeWidth","Contact","className","href","Form","props","state","status","name","email","message","handleChange","event","target","value","setState","handleSubmit","preventDefault","submitBtn","current","blur","axios","post","then","response","setTimeout","catch","error","React","createRef","render","this","formClass","classNames","nameInputClass","emailInputClass","textareaInputClass","onSubmit","type","id","onChange","required","htmlFor","ref","role","aria-label","Component","Details","data","useStaticQuery","rel","fluid","mapImage","childImageSharp","mapImageDark","ContactPage","InnerLayout","title","InnerWrapper","officeImage"],"mappings":"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","file":"component---src-pages-contact-js-26bf780c10948754c459.js","sourcesContent":["import React from \"react\"\n\nconst Loader = () => (\n  <svg viewBox=\"25 25 50 50\">\n    <title>Loading indicator</title>\n    <circle cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" strokeWidth=\"3\"/>\n  </svg>\n)\n\nexport default Loader","import React from \"react\"\n\nconst Contact = () => {\n  return (\n    <div className=\"Contact__intro\">\n      <h1 className=\"fadein\">Get in touch</h1>\n      <p className=\"fadein has-big-font-size\">You're always welcome to reach out, whether you want to discuss a project, have a chat or arrange a meeting. </p>\n      <p className=\"fadein has-big-font-size\">Fill in the form below, or <a href=\"mailto:henrik@hhb.dk?Subject=Hello%20Henrik\">send me an email</a>.</p>\n    </div>\n  )\n}\n\nexport default Contact\n\n","import React, { Component } from 'react';\nimport classNames from 'classnames';\nimport axios from 'axios';\n\nimport Loader from '../../images/loader';\n\nclass Form extends Component {\n\n  constructor(props) {\n    super(props)\n    this.submitBtn = React.createRef();\n  }\n\n  state = {\n    status: 'IDLE',\n    name: '',\n    email: '', \n    message: ''\n  };\n\n  handleChange = event => {\n    const { name, value } = event.target;\n    this.setState({ [name]: value });\n  };\n\n  handleSubmit = event => {\n    // Prevent default\n    event.preventDefault();\n    // Blur submit btn\n    this.submitBtn.current.blur();\n    // Set form state to sending\n    this.setState({ status: 'SENDING' });\n    // Data to send\n    const { name, email, message } = this.state;\n    // Send form\n    axios.post('/api/contact', {name, email, message}, {})\n    .then((response) => {\n      // Success\n      // console.log(response.data);\n      setTimeout( () => {\n        this.setState({ status: 'SUCCESS' });\n      }, 500);\n    })\n    .catch((error) => {\n      // Form submit encountered an error\n      setTimeout( () => {\n        this.setState({ status: 'ERROR' });\n      }, 500);\n    })\n\n  };\n\n  render() {\n    const { status, name, email, message } = this.state;\n    const formClass = classNames('Form Contact__form max-width-big', {\n      'Form--sending': status === 'SENDING',\n      'Form--success': status === 'SUCCESS',\n      'Form--error': status === 'ERROR',\n    });\n    const nameInputClass = classNames('Form__input', { 'Form__input--hasContent': name });\n    const emailInputClass = classNames('Form__input', { 'Form__input--hasContent': email });\n    const textareaInputClass = classNames('Form__input', { 'Form__input--hasContent': message });\n    return (\n      <div className=\"Contact__form fadein\">\n        <h2>Contact form</h2>\n        <form className={formClass} onSubmit={this.handleSubmit}>\n          <div className={nameInputClass}>\n            <input\n              type=\"text\"\n              name=\"name\"\n              id=\"name\"\n              value={name}\n              onChange={this.handleChange}\n              required\n            />\n            <label htmlFor=\"name\">First name</label>\n            <div className=\"Form__inputbar\"></div>\n          </div>\n          <div className={emailInputClass}>\n            <input\n              type=\"text\"\n              name=\"email\"\n              id=\"email\"\n              value={email}\n              onChange={this.handleChange}\n              required\n            />\n            <label htmlFor=\"email\">Email address</label>\n            <div className=\"Form__inputbar\"></div>\n          </div>\n          <div className={textareaInputClass}>\n            <textarea \n              id=\"message\" \n              name=\"message\" \n              onChange={this.handleChange} \n              value={message}\n              required\n            ></textarea>\n            <label htmlFor=\"message\">Your message</label>\n            <div className=\"Form__inputbar\"></div>\n          </div>\n          <div className=\"Form__input\">\n            { status !== 'SUCCESS' ? <input type=\"submit\" value={status === 'SENDING' ? 'Sending...' : 'Send message'} ref={this.submitBtn}/> : null }\n            <div className=\"Form__indicator\">\n              <Loader />\n            </div>\n          </div>\n          <div className=\"Form__response\">\n            {status === 'ERROR' ? <p>An error ocurred. Try again. <span role=\"img\" aria-label=\"Broken heart\">💔</span></p> : null}\n            {status === 'SUCCESS' ? <p>Thank you for your message! I will get back to you ASAP. <span role=\"img\" aria-label=\"Raised hands\">🙌</span></p> : null}\n          </div>\n        </form>\n      </div>\n    )\n  }\n\n}\n\nexport default Form","import React from \"react\"\nimport { useStaticQuery, graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nconst Details = () => {\n\n  const data = useStaticQuery(graphql`\n    query {\n      mapImage: file(relativePath: { eq: \"hhb-map.jpg\" }) {\n        childImageSharp {\n          fluid(maxWidth: 1200) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n      mapImageDark: file(relativePath: { eq: \"hhb-map-dark.jpg\" }) {\n        childImageSharp {\n          fluid(maxWidth: 1200) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n    }\n  `)\n\n  return (\n    <section className=\"outer-padding-x outer-padding-y\">\n      <div className=\"Contact__details bg-lightgray fadein\">\n        <div>\n          <p>hhb - udvikling & design</p>\n          <a href=\"https://www.google.com/maps/place/Vestergade+18C,+1456+K%C3%B8benhavn/@55.677693,12.5671603,17z/\" target=\"_blank\" rel=\"noopener noreferrer\">\n            <address>\n              Vestergade 18C<br></br>\n              1456 Copenhagen K<br></br>\n              Denmark\n            </address>\n          </a>\n          <p><a href=\"mailto:henrik@hhb.dk\">henrik@hhb.dk</a></p>\n          <p>CVR-nr. DK38439561</p>\n        </div>\n        <div>\n          <a href=\"https://www.google.com/maps/place/Vestergade+18C,+1456+K%C3%B8benhavn/@55.677693,12.5671603,17z/\" target=\"_blank\" rel=\"noopener noreferrer\">\n            <Img fluid={data.mapImage.childImageSharp.fluid} />\n            <Img fluid={data.mapImageDark.childImageSharp.fluid} />\n          </a>\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport default Details\n\n","import React from \"react\"\nimport Img from \"gatsby-image\"\nimport { useStaticQuery, graphql } from \"gatsby\"\n\nimport InnerLayout from \"../components/InnerLayout\"\nimport InnerWrapper from \"../components/InnerWrapper\"\nimport SEO from \"../components/seo\"\nimport Contact from \"../components/contact/Contact\"\nimport Form from \"../components/contact/Form\"\nimport Details from \"../components/contact/Details\"\n\nconst ContactPage = () => {\n\n  const data = useStaticQuery(graphql`\n    query {\n      officeImage: file(relativePath: { eq: \"office-vestergade.jpg\" }) {\n        childImageSharp {\n          fluid(maxWidth: 1200, quality: 100) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n    }\n  `)\n\n  return (\n    <InnerLayout>\n      <SEO title=\"Contact\"/>\n      <InnerWrapper>\n        <section className=\"Contact outer-padding-x outer-padding-y\">\n          <div className=\"Contact__top\">\n            <div className=\"Contact__inner max-width-big\">\n              <Contact/>\n              <Form/>\n            </div>\n            <div className=\"Contact__image fadein\">\n              <Img fluid={data.officeImage.childImageSharp.fluid} />\n            </div>\n          </div>\n        </section>\n        <Details/>\n      </InnerWrapper>\n    </InnerLayout>\n  )\n}\n\nexport default ContactPage\n"],"sourceRoot":""}