{"version":3,"file":"component---src-pages-contact-js-9843af90576e970d7da5.js","mappings":"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","sources":["webpack://madina-masjid-darwen/./src/components/Contact.jsx","webpack://madina-masjid-darwen/./src/pages/contact.js"],"sourcesContent":["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Iframe from \"react-iframe\";\nimport { TextField } from \"@material-ui/core\";\n\nconst Contact = (props) => {\nconst [contactState, setContactState] = useState({\n  name: \"\",\n  email: \"\",\n  subject: \"\",\n  message: \"\",\n});\n\nconst onNameChange = (event) => {\n        setContactState({name: event.target.value});\n    }\n\nconst onEmailChange = (event) => {\n        setContactState({email: event.target.value})\n    }\n\nconst onSubjectChange = (event) => {\n        setContactState({subject: event.target.value})\n    }\n\nconst onMsgChange = (event) => {\n        setContactState({message: event.target.value})\n    }\n\nconst submitEmail = (e) => {\n        e.preventDefault();\n        // axios({\n        //   method: \"POST\", \n        //   url:\"/send\", \n        //   data:  this.state\n        // }).then((response)=>{\n        //   if (response.data.status === 'success'){\n        //       alert(\"Message Sent.\"); \n        //       this.resetForm()\n        //   }else if(response.data.status === 'fail'){\n        //       alert(\"Message failed to send.\")\n        //   }\n        // })\n}\n\nconst resetForm = () => {\n        setContactState({name: '', email: '',subject:'', message: ''})\n}\n  \n  return (\n    <Container>\n      <Grid>\n        <div>\n          <Title>CONTACT INFO</Title>\n          <h4>Madina Masjid Darwen</h4>\n          <p>21-23 Victoria Street</p>\n          <p>Darwen, BB3 3HB</p>\n          <p>Email address: info@darwenmosque.co.uk</p>\n          <p>Maulana Waqar (Lead Imam) 07532742063</p>\n          <p>Chairman (Imran Ilyas): 07912 781392</p>\n        </div>\n        <div>\n          <Title>Get in Touch</Title>\n          <br></br>\n          <p>Have questions about ICA programs or services? Let us help.</p>\n          <p>\n            Use our contact form and we’ll get back to you as soon as possible.\n          </p>\n        </div>\n      </Grid>\n      <Grid>\n        <Iframe\n          url=\"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2362.3251143382213!2d-2.467527583873292!3d53.69465268005347!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487ba03e64a9bb7b%3A0x287afddf8ef4db26!2sDarwen%20Madina%20Masjid!5e0!3m2!1sen!2s!4v1595931009734!5m2!1sen!2s\"\n          width=\"100%\"\n          height=\"450px\"\n          id=\"myId\"\n          className=\"myClassname\"\n          display=\"initial\"\n          position=\"relative\"\n        />\n        <form id=\"contact-form\" onSubmit={submitEmail}>\n          <div className=\"form-group\">\n            <div className=\"row\">\n              <div className=\"col-md-6\" style={{ paddingBottom: \"20px\" }}>\n                <TextField\n                  placeholder=\"Name\"\n                  id=\"name\"\n                  type=\"text\"\n                  label=\"Name\"\n                  variant=\"outlined\"\n                  fullWidth\n                  required\n                  value={contactState.name}\n                  onChange={onNameChange}\n                />\n              </div>\n              <div className=\"col-md-6\" style={{ paddingBottom: \"20px\" }}>\n                <TextField\n                  placeholder=\"Email\"\n                  id=\"email\"\n                  type=\"email\"\n                  label=\"Email\"\n                  variant=\"outlined\"\n                  fullWidth\n                  required\n                  value={contactState.email}\n                  onChange={onEmailChange}\n                />\n              </div>\n            </div>\n          </div>\n          <div className=\"form-group\" style={{ paddingBottom: \"20px\" }}>\n            <TextField\n              placeholder=\"Message\"\n              id=\"message\"\n              multiline\n              rows={4}\n              label=\"Message\"\n              variant=\"outlined\"\n              fullWidth\n              required\n              value={contactState.message}\n              onChange={onMsgChange}\n            />\n          </div>\n          <Button variant=\"contained\" type=\"submit\" color=\"primary\">\n            Submit\n          </Button>\n        </form>\n      </Grid>\n    </Container>\n  );\n};\n\nexport default Contact;\n\nconst Grid = styled.div`\n  max-width: 1024px;\n  margin: 4% auto;\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  grid-gap: 40px;\n\n  @media (max-width: 768px) {\n    grid-template-columns: 1fr;\n  }\n`;\n\nconst Center = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nconst Container = styled.div`\n  background-color: #fff;\n  padding: 4% 12%;\n`;\nconst GridWraper = styled.div`\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  max-width: 1024px;\n  margin: auto;\n  grid-column-gap: 50px;\n  padding: 0 10px;\n\n  @media (max-width: 960px) {\n    grid-template-columns: auto 1fr auto;\n  }\n`;\n\nconst DonationImage = styled.div`\n  ${({ src }) =>\n    src &&\n    `\n  background-image: url(${src});\n  background-size: 185%;\n    background-position: left bottom;\n    border-radius: 4px;\n  `}\n`;\n\nconst Button = styled.button`\n  padding: 10px;\n  background: var(--base-color);\n  border: 0;\n  border-radius: 4px;\n  color: #fff;\n  margin-top: 15px;\n  cursor: pointer;\n`;\n\nconst Title = styled.h2`\n  margin: 0;\n  text-align: center;\n  text-transform: uppercase;\n  font-size: 36px;\n\n  @media (max-width: 480px) {\n    font-size: 30px;\n  }\n`;\n","import * as React from \"react\";\nimport Layout from \"../components/Layout\";\nimport Footer from \"../components/Footer\";\nimport Contact from \"../components/Contact\";\nimport { Main } from \"../styles\";\nimport HeaderBackground from \"../components/HeaderBackground\";\nimport Header from \"../components/Header\";\n\nconst IndexPage = () => {\n  return (\n    <Layout>\n      <Header />\n      <HeaderBackground title={\"CONTACT\"} />\n      <Main>\n        <Contact />\n      </Main>\n      <Footer />\n    </Layout>\n  );\n};\n\nexport default IndexPage;\n"],"names":["props","contactState","setContactState","useState","name","email","subject","message","React","Container","Grid","Title","Iframe","url","width","height","id","className","display","position","onSubmit","e","preventDefault","style","paddingBottom","TextField","placeholder","type","label","variant","fullWidth","required","value","onChange","event","target","multiline","rows","Button","color","styled","div","withConfig","displayName","componentId","_ref","src","button","h2","IndexPage","Layout","Header","HeaderBackground","title","Main","Contact","Footer"],"sourceRoot":""}