{"version":3,"file":"component---src-pages-askimam-js-77129d11c9e502950958.js","mappings":"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","sources":["webpack://madina-masjid-darwen/./src/components/AskImam.jsx","webpack://madina-masjid-darwen/./src/pages/askimam.js"],"sourcesContent":["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Iframe from \"react-iframe\";\nimport { TextField } from \"@material-ui/core\";\nimport { useGoogleReCaptcha } from \"react-google-recaptcha-v3\";\n\nconst AskImam = (props) => {\n  const [contactState, setContactState] = useState({\n    name: \"\",\n    email: \"\",\n    subject: \"\",\n    message: \"\",\n  });\n  const { executeRecaptcha } = useGoogleReCaptcha();\n  const [token, setToken] = useState(\"\");\n\n  const onNameChange = (event) => {\n    setContactState({ name: event.target.value });\n  };\n\n  const onEmailChange = (event) => {\n    setContactState({ email: event.target.value });\n  };\n\n  const onSubjectChange = (event) => {\n    setContactState({ subject: event.target.value });\n  };\n\n  const onMsgChange = (event) => {\n    setContactState({ message: event.target.value });\n  };\n\n  const submitEmail = async (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\n  const resetForm = () => {\n    setContactState({ name: \"\", email: \"\", subject: \"\", message: \"\" });\n  };\n\n  return (\n    <Container>\n      <div style={{ paddingLeft: \"10%\", paddingRight: \"10%\" }}>\n        <br></br>\n        <p>‎السلام عليكم ورحمة الله وبركاته</p>\n        <p>طَلَبُ الْعِلْمِ فَرِيضَةٌ عَلَى كُلِّ مُسْلِمٍ</p>\n        <p>\n          “Seeking knowledge is an obligation upon every Muslim.” (Source: Sunan\n          Ibn Mājah 224)\n        </p>\n        <p>\n          In order to fulfil our duty to Allah we have a duty to seek knowledge.\n          Learning is a life long activity and the seeking of knowledge is\n          considered a blessed activity in the eyes of Allah.\n        </p>\n        <p>\n          Whether you are someone who is interested in the beautiful religion of\n          Islam, or some striving to learn more about Deen, we are here to\n          answer your questions.\n        </p>\n        <p>\n          This service allows you to ask questions regarding all aspects of\n          Islam for individuals of all backgrounds.\n        </p>\n        <br></br>\n        <br></br>\n        <Title>ASK A QUESTION</Title>\n        <br></br>\n        <div className=\"container\">\n          <div className=\"row\">\n            <div className=\"col-md-12\">\n              <div className=\"section-title\">\n                <form id=\"contact-form\" onSubmit={submitEmail}>\n                  <div className=\"form-group\">\n                    <div className=\"row\">\n                      <div\n                        className=\"col-md-6\"\n                        style={{ paddingBottom: \"20px\" }}\n                      >\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\n                        className=\"col-md-6\"\n                        style={{ paddingBottom: \"20px\" }}\n                      >\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              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Container>\n  );\n};\n\nexport default AskImam;\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% 4% 4% 4%;\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 AskImam from \"../components/AskImam\";\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={\"ASK IMAM\"} />\n      <Main>\n        <AskImam />\n      </Main>\n      <Footer />\n    </Layout>\n  );\n};\n\nexport default IndexPage;\n"],"names":["props","contactState","setContactState","useState","name","email","subject","message","executeRecaptcha","useGoogleReCaptcha","token","setToken","React","Container","style","paddingLeft","paddingRight","Title","className","id","onSubmit","async","e","preventDefault","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","AskImam","Footer"],"sourceRoot":""}