{"version":3,"sources":["webpack:///./src/components/Article/ArticleAside.js","webpack:///./src/components/Contact/Contact.js","webpack:///./src/pages/contact.js"],"names":["ArticleAside","props","children","asideContent","theme","Contact","React","useState","state","setState","handleChange","e","target","name","value","isTop","formHeading","StyledForm","method","action","data-netlify","data-netlify-honeypot","onSubmit","preventDefault","data","form","fetch","headers","body","getAttribute","Object","keys","map","key","encodeURIComponent","join","then","navigate","catch","error","alert","type","hidden","onChange","required","isWide","styled","ContactPage","Fragment","Consumer","className","href","jsx","background","color","brand","Seo"],"mappings":"+JAyCeA,EAtCM,SAAAC,GAAU,IACrBC,EAAkCD,EAAlCC,SAAUC,EAAwBF,EAAxBE,aAAwBF,EAAVG,MAEhC,OACE,oEACE,iEAA8BF,GAC9B,6DAA0BC,GAF5B,m/B,wtBCFJ,IA4EeE,EA5EC,WAAO,IAAD,EACMC,IAAMC,SAAS,IAAlCC,EADa,KACNC,EADM,KAQpB,IAAMC,EAAe,SAAAC,GAAM,IAAD,EACxBF,EAAS,OAAD,UAAMD,IAAN,MAAcG,EAAEC,OAAOC,MAAOF,EAAEC,OAAOE,MAAvC,MAgBV,OACE,6BACE,kBAAC,IAAD,CAAUC,OAAK,EAACC,aAAW,GAA3B,8BAGA,kBAACC,EAAD,CACEJ,KAAK,UACLK,OAAO,OACPC,OAAO,WACPC,eAAa,OACbC,wBAAsB,YACtBC,SAzBe,SAAAX,GACnBA,EAAEY,iBACF,IAVcC,EAURC,EAAOd,EAAEC,OACfc,MAAM,IAAK,CACTR,OAAQ,OACRS,QAAS,CAAE,eAAgB,qCAC3BC,MAdYJ,EAcC,OAAD,QACV,YAAaC,EAAKI,aAAa,SAC5BrB,GAfAsB,OAAOC,KAAKP,GAChBQ,KAAI,SAAAC,GAAG,OAAIC,mBAAmBD,GAAO,IAAMC,mBAAmBV,EAAKS,OACnEE,KAAK,QAgBLC,MAAK,kBAAMC,mBAASZ,EAAKI,aAAa,cACtCS,OAAM,SAAAC,GAAK,OAAIC,MAAMD,QAgBpB,2BAAOE,KAAK,SAAS5B,KAAK,YAAYC,MAAM,YAC5C,uBAAG4B,QAAM,GACP,uDACuB,2BAAO7B,KAAK,YAAY8B,SAAUjC,MAG3D,2BACE,uCAEE,6BACA,2BAAO+B,KAAK,OAAO5B,KAAK,OAAO8B,SAAUjC,MAG7C,2BACE,+BACE,mCADF,UAEE,6BACA,2BAAO+B,KAAK,QAAQ5B,KAAK,QAAQ8B,SAAUjC,EAAckC,UAAQ,MAGrE,2BACE,+BACE,mCADF,YAEE,6BACA,8BAAU/B,KAAK,UAAU8B,SAAUjC,EAAckC,UAAQ,MAG7D,2BACE,kBAAC,IAAD,CAAcC,QAAM,EAACJ,KAAK,UAA1B,cAWJxB,EAAa6B,IAAOrB,KAAV,K,wBCcDsB,UAzFK,WAClB,OACE,kBAAC,IAAMC,SAAP,KACE,kBAAC,eAAaC,SAAd,MACG,SAAA7C,GAAK,OACJ,kBAAC,EAAD,CACEA,MAAOA,EACPD,aACE,oCACE,kBAAC,IAAD,CAAUY,OAAK,EAACC,aAAW,GAA3B,4BAGA,kBAAC,IAAD,CAAekC,UAAU,aACvB,6BACE,uBAAGtC,OAAO,SAASuC,KAAK,oCACtB,kBAAC,IAAD,CAAYD,UAAU,QAExB,uBAAGtC,OAAO,SAASuC,KAAK,oCACtB,yCAGJ,6BACE,uBAAGvC,OAAO,SAASuC,KAAK,sCACtB,kBAAC,IAAD,CAAaD,UAAU,QAEzB,uBAAGtC,OAAO,SAASuC,KAAK,sCACtB,0CAGJ,6BACE,uBAAGvC,OAAO,SAASuC,KAAK,8BACtB,kBAAC,IAAD,CAAUD,UAAU,QAEtB,uBAAGtC,OAAO,SAASuC,KAAK,8BACtB,yCAGJ,6BACE,uBAAGvC,OAAO,SAASuC,KAAK,yDACtB,kBAAC,IAAD,CAAcD,UAAU,QAE1B,uBAAGtC,OAAO,SAASuC,KAAK,yDACtB,gDAIN,2BAAOC,KAAG,GAAV,0QASehD,EAAMiD,WAAWC,MAAMC,MATtC,kSAkBenD,EAAMiD,WAAWC,MAAMC,MAlBtC,gVAiCJ,kBAAC,EAAD,UAKN,kBAACC,EAAA,EAAD","file":"component---src-pages-contact-js-4a2e0d74dc4b4c4a3e31.js","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst ArticleAside = props => {\n  const { children, asideContent, theme } = props;\n\n  return (\n    <div className=\"articleWrapper\">\n      <article className=\"article\">{children}</article>\n      <aside className=\"aside\">{asideContent}</aside>\n\n      {/* --- STYLES --- */}\n      <style jsx>{`\n        .articleWrapper {\n          display: flex;\n          flex-wrap: wrap;\n          justify-content: space-around;\n        }\n        article {\n          padding: 10px;\n          flex-grow: 1;\n          width: 750px;\n          display: flex;\n          justify-content: center;\n        }\n        aside {\n          padding: 10px;\n          min-width: 200px;\n          flex-grow: 2;\n        }\n      `}</style>\n    </div>\n  );\n};\n\nArticleAside.propTypes = {\n  children: PropTypes.node.isRequired,\n  asideContent: PropTypes.object.isRequired,\n  theme: PropTypes.object.isRequired\n};\n\nexport default ArticleAside;\n","import React from \"react\";\nimport { navigate } from \"gatsby\";\nimport styled from \"styled-components\";\nimport { StyledH1, StyledButton } from \"../Home/styles\";\n\nconst Contact = () => {\n  const [state, setState] = React.useState({});\n\n  function encode(data) {\n    return Object.keys(data)\n      .map(key => encodeURIComponent(key) + \"=\" + encodeURIComponent(data[key]))\n      .join(\"&\");\n  }\n  const handleChange = e => {\n    setState({ ...state, [e.target.name]: e.target.value });\n  };\n  const handleSubmit = e => {\n    e.preventDefault();\n    const form = e.target;\n    fetch(\"/\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/x-www-form-urlencoded\" },\n      body: encode({\n        \"form-name\": form.getAttribute(\"name\"),\n        ...state\n      })\n    })\n      .then(() => navigate(form.getAttribute(\"action\")))\n      .catch(error => alert(error));\n  };\n  return (\n    <div>\n      <StyledH1 isTop formHeading>\n        Send an anoonymous message\n      </StyledH1>\n      <StyledForm\n        name=\"contact\"\n        method=\"post\"\n        action=\"/success\"\n        data-netlify=\"true\"\n        data-netlify-honeypot=\"bot-field\"\n        onSubmit={handleSubmit}\n      >\n        {/* The `form-name` hidden field is required to support form submissions without JavaScript */}\n        <input type=\"hidden\" name=\"form-name\" value=\"contact\" />\n        <p hidden>\n          <label>\n            Don’t fill this out: <input name=\"bot-field\" onChange={handleChange} />\n          </label>\n        </p>\n        <p>\n          <label>\n            Name:\n            <br />\n            <input type=\"text\" name=\"name\" onChange={handleChange} />\n          </label>\n        </p>\n        <p>\n          <label>\n            <span>*</span>&nbsp;Email:\n            <br />\n            <input type=\"email\" name=\"email\" onChange={handleChange} required />\n          </label>\n        </p>\n        <p>\n          <label>\n            <span>*</span>&nbsp;Message:\n            <br />\n            <textarea name=\"message\" onChange={handleChange} required />\n          </label>\n        </p>\n        <p>\n          <StyledButton isWide type=\"submit\">\n            Submit\n          </StyledButton>\n        </p>\n      </StyledForm>\n    </div>\n  );\n};\n\nexport default Contact;\n\nconst StyledForm = styled.form`\n  padding: 5px 5px 20px;\n\n  p {\n    margin-bottom: 1rem;\n    font-size: 14px;\n    span {\n      color: red;\n    }\n  }\n  input {\n    width: 350px;\n    height: 36px;\n    border: 1px solid #777;\n    border-radius: 5px;\n    outline: none;\n    font-size: 1rem;\n    padding: 0.3rem;\n  }\n  textarea {\n    width: 700px;\n    height: 120px;\n    border: 1px solid #999;\n    border-radius: 9px;\n    outline: none;\n    font-size: 1rem;\n    padding: 0.3rem;\n  }\n  @media only screen and (max-width: 768px) {\n    textarea {\n      width: 90vw;\n    }\n    input {\n      width: 60vw;\n    }\n  }\n`;\n","import React from \"react\";\nimport { ThemeContext } from \"../layouts\";\nimport Article from \"../components/Article/ArticleAside\";\nimport Contact from \"../components/Contact\";\nimport { StyledH1, FlexContainer } from \"../components/Home/styles\";\nimport { FaFacebook, FaInstagram, FaGithub, FaLinkedinIn } from \"react-icons/fa\";\nimport Seo from \"../components/Seo\";\n\nconst ContactPage = () => {\n  return (\n    <React.Fragment>\n      <ThemeContext.Consumer>\n        {theme => (\n          <Article\n            theme={theme}\n            asideContent={\n              <>\n                <StyledH1 isTop formHeading>\n                  Send me a direct message\n                </StyledH1>\n                <FlexContainer className=\"container\">\n                  <div>\n                    <a target=\"_blank\" href=\"https://www.facebook.com/akshero\">\n                      <FaFacebook className=\"fa\" />\n                    </a>\n                    <a target=\"_blank\" href=\"https://www.facebook.com/akshero\">\n                      <p>/akshero</p>\n                    </a>\n                  </div>\n                  <div>\n                    <a target=\"_blank\" href=\"https://www.instagram.com/asis_kdl\">\n                      <FaInstagram className=\"fa\" />\n                    </a>\n                    <a target=\"_blank\" href=\"https://www.instagram.com/asis_kdl\">\n                      <p>/asis_kdl</p>\n                    </a>\n                  </div>\n                  <div>\n                    <a target=\"_blank\" href=\"https://github.com/aks0001\">\n                      <FaGithub className=\"fa\" />\n                    </a>\n                    <a target=\"_blank\" href=\"https://github.com/aks0001\">\n                      <p>/aks0001</p>\n                    </a>\n                  </div>\n                  <div>\n                    <a target=\"_blank\" href=\"https://www.linkedin.com/in/aashish-kandel-2201b21a7/\">\n                      <FaLinkedinIn className=\"fa\" />\n                    </a>\n                    <a target=\"_blank\" href=\"https://www.linkedin.com/in/aashish-kandel-2201b21a7/\">\n                      <p>/ashish-kandel</p>\n                    </a>\n                  </div>\n                </FlexContainer>\n                <style jsx>\n                  {`\n                    .container {\n                      width: 375px;\n                    }\n                    .container p {\n                      text-align: center;\n                    }\n                    .container a {\n                      color: ${theme.background.color.brand};\n                    }\n\n                    .fa {\n                      font-size: 6rem;\n                      padding: 10px;\n                      width: 180px;\n                      cursor: pointer;\n                      transition-duration: 1s;\n                      color: ${theme.background.color.brand};\n                    }\n                    .fa:hover {\n                      font-size: 6.7rem;\n                    }\n                    @media only screen and (max-width: 1145px) {\n                      .container {\n                        width: 100%;\n                      }\n                    }\n                  `}\n                </style>\n              </>\n            }\n          >\n            <Contact />\n          </Article>\n        )}\n      </ThemeContext.Consumer>\n\n      <Seo />\n    </React.Fragment>\n  );\n};\n\nexport default ContactPage;\n"],"sourceRoot":""}