{"version":3,"file":"static/js/98.04b38e93.chunk.js","mappings":"oLAIA,MAkFA,EAlFuBA,KAErB,MAMOC,EAAaC,IAAkBC,EAAAA,EAAAA,UAAS,KACxCC,EAAYC,IAAiBF,EAAAA,EAAAA,UAASG,OAAOC,aAC7CC,EAAMC,IAAWN,EAAAA,EAAAA,UAPlBC,EAAa,IAAY,EACzBA,EAAa,KAAa,EACvB,IAOTM,EAAAA,EAAAA,YAAU,KACRC,GAAqB,GACpB,CAACP,IAEJ,MAAMO,EAAsBC,UAC1B,MAOMC,QAAiBC,MAAM,GAADC,OACvBC,qCAAsC,kDAAAD,OAAiDC,IAAoC,KAAAD,OAAIP,GARpH,CACdS,OAAQ,MACRC,QAAS,CACP,YAAaF,gDACb,eAAgB,sBAMjBG,MAAMC,GAAaA,EAASC,SAC5BF,MAAMG,GAASA,IAElBpB,EAAeW,EAAS,EAG1B,OACEU,EAAAA,EAAAA,KAAA,OAAKC,UAAU,+BAA8BC,UAC3CC,EAAAA,EAAAA,MAAA,WAASF,UAAU,iBAAgBC,SAAA,EACjCF,EAAAA,EAAAA,KAAA,MAAAE,SAAI,kBACJF,EAAAA,EAAAA,KAAA,MAAIC,UAAU,4BAA2BC,SAAC,oFAI1CF,EAAAA,EAAAA,KAAA,OAAKC,UAAU,MAAKC,SACjBxB,EAAY0B,KAAI,CAACC,EAASC,KACzBN,EAAAA,EAAAA,KAAA,OAAKC,UAAU,6BAA4BC,UACzCF,EAAAA,EAAAA,KAACO,EAAAA,GAAI,CAACN,UAAU,iBAAiBO,GAAE,aAAAhB,OAAea,EAAQI,SAAUP,UAClEC,EAAAA,EAAAA,MAAA,OAAKF,UAAU,yBAAwBC,SAAA,EACrCC,EAAAA,EAAAA,MAAA,OAAKF,UAAU,+BAA8BC,SAAA,EAC3CF,EAAAA,EAAAA,KAAA,OAAKU,IAAKL,EAAQM,SAAUC,IAAKP,EAAQQ,YACzCb,EAAAA,EAAAA,KAAA,OAAKC,UAAU,kBACfD,EAAAA,EAAAA,KAAA,OAAKC,UAAU,gBAAeC,UAC5BF,EAAAA,EAAAA,KAAA,KAAAE,SAAIG,EAAQS,SAASC,aAGzBZ,EAAAA,EAAAA,MAAA,OAAKF,UAAU,2BAA0BC,SAAA,EACvCF,EAAAA,EAAAA,KAAA,OAAKC,UAAU,YAAWC,UACxBF,EAAAA,EAAAA,KAAA,KAAAE,SAAIc,IAAOX,EAAQY,eAAeC,OAAO,oBAE3ClB,EAAAA,EAAAA,KAAA,OAAKC,UAAU,cAAaC,UAC1BC,EAAAA,EAAAA,MAAA,KAAAD,SAAA,CAAG,cAAYG,EAAQc,aAEzBnB,EAAAA,EAAAA,KAAA,OAAKC,UAAU,eAAcC,UAC3BF,EAAAA,EAAAA,KAAA,MAAAE,SAAKG,EAAQQ,cAEfb,EAAAA,EAAAA,KAAA,OAAKC,UAAU,mBAAkBC,UAC/BF,EAAAA,EAAAA,KAAA,KAAGC,UAAU,oBAAmBC,SAAEG,EAAQe,wBArBHf,EAAQgB,SA6B7DrB,EAAAA,EAAAA,KAAA,OAAKC,UAAU,mBAAkBC,UAC/BF,EAAAA,EAAAA,KAACO,EAAAA,GAAI,CAACN,UAAU,iCAAiCO,GAAG,WAAUN,SAAC,yBAK/D,C","sources":["MainSite/HOME/PitstopPreview.js"],"sourcesContent":["import { useEffect, useState } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport moment from \"moment\";\r\n\r\nconst PitstopPreview = () => {\r\n  \r\n  const getSize = () => {\r\n    if (windowSize < 768) return 1;\r\n    if (windowSize < 1025) return 2;\r\n    return 3;\r\n  }\r\n\r\n  const [articleData, setArticleData] = useState([]);\r\n  const [windowSize, setWindowSize] = useState(window.innerWidth);\r\n  const [size, setSize] = useState(getSize());\r\n\r\n  useEffect(() => {\r\n    generateArticleData();\r\n  }, [windowSize]);\r\n\r\n  const generateArticleData = async () => {\r\n    const options = {\r\n      method: \"GET\",\r\n      headers: {\r\n        \"X-API-KEY\": process.env.REACT_APP_VELOSURE_API_KEY,\r\n        \"content-type\": \"application/json\",\r\n      },\r\n    };\r\n    const articles = await fetch(\r\n      `${process.env.REACT_APP_VELOSURE_API_URL}/api/ConnexusCMS/Articles/GetNumberOfArticles/${process.env.REACT_APP_CONNEXUS_BRAND}/${size}`,options\r\n    )\r\n      .then((response) => response.json())\r\n      .then((data) => data);\r\n\r\n    setArticleData(articles);\r\n  };\r\n\r\n  return (\r\n    <div className=\"container-fluid rp oh greyBG\">\r\n      <section className=\"container mt-4\">\r\n        <h1>The Pitstop.</h1>\r\n        <h4 className=\"blueFont mb-5 lufga-light\">\r\n          Your one stop place for all stories, tips and insights from the\r\n          cycling world.\r\n        </h4>\r\n        <div className=\"row\">\r\n          {articleData.map((article, index) => (\r\n            <div className=\"col-xl-4  col-sm-6 mb-sm-5\" key={article.id}>\r\n              <Link className=\"pitstopAnchors\" to={`/FullBlog/${article.pageURL}`}>\r\n                <div className=\"card card blog-card oh\">\r\n                  <div className=\"card-header blog-card-header\">\r\n                    <img src={article.imageUrl} alt={article.headline} />\r\n                    <div className=\"card-divider\"></div>\r\n                    <div className=\"card-category\">\r\n                      <p>{article.category.name}</p>\r\n                    </div>\r\n                  </div>\r\n                  <div className=\"card-body blog-card-body\">\r\n                    <div className=\"blog-date\">\r\n                      <p>{moment(article.publishedDate).format('D MMMM YYYY')}</p>\r\n                    </div>\r\n                    <div className=\"blog-author\">\r\n                      <p>Written by {article.author}</p>\r\n                    </div>\r\n                    <div className=\"blog-heading\">\r\n                      <h2>{article.headline}</h2>\r\n                    </div>\r\n                    <div className=\"blog-sub-heading\">\r\n                      <p className=\"clampedToTwoLines\">{article.subHeading}</p>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </Link>\r\n            </div>\r\n          ))}\r\n        </div>\r\n        <div className=\"text-center mb-5\">\r\n          <Link className=\"pitstopAnchors btn btn-primary\" to=\"/Pitstop\">\r\n            Visit the blog\r\n          </Link>\r\n        </div>\r\n      </section>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default PitstopPreview;\r\n"],"names":["PitstopPreview","articleData","setArticleData","useState","windowSize","setWindowSize","window","innerWidth","size","setSize","useEffect","generateArticleData","async","articles","fetch","concat","process","method","headers","then","response","json","data","_jsx","className","children","_jsxs","map","article","index","Link","to","pageURL","src","imageUrl","alt","headline","category","name","moment","publishedDate","format","author","subHeading","id"],"sourceRoot":""}