{"version":3,"sources":["webpack://gatsby-starter-default/./src/components/atoms/background.js","webpack://gatsby-starter-default/./src/components/molecules/peopleCard/peopleCard.js","webpack://gatsby-starter-default/./src/templates/people.js"],"names":["preset","custom","useState","background","setBackground","useEffect","element","active","useContext","CursorContext","cursorConfig","setCursor","bg","presets","textDiv","createRef","arrow","setArrow","current","scrollHeight","offsetHeight","scrollTop","getElementsByTagName","personImage","className","src","sourceUrl","srcSet","style","dangerouslySetInnerHTML","__html","textLeft","ref","onScroll","textRight","onMouseEnter","rotation","scale","color","shape","onMouseLeave","onClick","scrollBy","top","clientHeight","behavior","data","page","location","title","peopleFields","sideText","people","map","index","key"],"mappings":"6JAyBA,IAfA,YAAyC,IAAnBA,EAAkB,EAAlBA,OAAQC,EAAU,EAAVA,OAE1B,GAAoCC,cAAS,SAAtCC,EAAP,KAAmBC,EAAnB,KAMA,OAJAC,gBAAU,WACND,EAAyB,WAAXJ,EAAsBA,EAASC,KAC9C,CAACD,EAAQC,IAGR,gBAAC,IAAD,KACI,+DAA0CE,EAA1C,iC,iHC8EZ,EA9FmB,SAAC,GAAiB,IAAfG,EAAc,EAAdA,QACpB,GAAyBJ,eAAS,GAA3BK,EAAP,KACA,GADA,MACoCL,cAAS,qBAAtCC,EAAP,KAAmBC,EAAnB,KACA,GAAoCI,gBAAWC,iBAAvCC,EAAR,EAAQA,aAAcC,EAAtB,EAAsBA,WAEtBN,gBAAU,WACR,IAAMO,EAC2B,WAA/BN,EAAQH,WAAWU,QACfP,EAAQH,WAAWU,QACnBP,EAAQH,WAAWF,OACzBG,EAAcQ,MAGhB,IAAME,GAAUC,iBAChB,GAA0Bb,eAAS,GAA5Bc,EAAP,KAAcC,EAAd,MAEAZ,gBAAU,WACJS,GACFG,EACEH,EAAQI,QAAQC,aAAeL,EAAQI,QAAQE,cAC7CN,EAAQI,QAAQG,UAAYP,EAAQI,QAAQE,aAC1CN,EAAQI,QAAQI,qBAAqB,QAAQ,GAAGH,gBAGvD,CAACL,IAUJ,OAAIR,EAAQiB,YAER,uBAAKC,UAAWjB,EAAS,qBAAuB,eAC9C,uBAAKiB,UAAWjB,EAAS,eAAiB,SACxC,uBAAKiB,UAAU,SAIb,uBACEC,IAAKnB,EAAQiB,YAAYG,UACzBC,OAAQrB,EAAQiB,YAAYI,UAGhC,uBAAKH,UAAU,OAAOI,MAAO,CAAEzB,WAAYA,IACzC,uBACEqB,UAAU,OACVK,wBAAyB,CAAEC,OAAQxB,EAAQyB,YAE7C,uBACEC,IAAKlB,EACLmB,SA5BY,WAClBnB,GAASG,EACXH,EAAQI,QAAQC,aAAeL,EAAQI,QAAQE,cAC7CN,EAAQI,QAAQG,UAAYP,EAAQI,QAAQE,aAC1CN,EAAQI,QAAQI,qBAAqB,QAAQ,GAAGH,eAyB5CK,UAAU,QACVK,wBAAyB,CAAEC,OAAQxB,EAAQ4B,aAE5ClB,GACC,uBACEQ,UAAU,aACVW,aAAc,kBACZxB,EAAU,OAAD,UACJD,EADI,CAEP0B,UAAW,GACXC,MAAO,IACPC,MAAO,eACPC,MAAO,cAGXC,aAAc,kBACZ7B,EAAU,OAAD,UACJD,EADI,CAEP0B,UAAW,GACXC,MAAO,IACPC,MAAO,kBACPC,MAAO,cAGXE,QAAS,WACP3B,EAAQI,QAAQwB,SAAS,CACvBC,IAAoC,IAA/B7B,EAAQI,QAAQ0B,aACrBC,SAAU,iBASd,6B,UCrBhB,EAjCmB,SAAC,GAAwB,IAAtBC,EAAqB,EAArBA,KACZC,GADiC,EAAfC,SACTF,EAATC,MACR,GAAoCvC,gBAAWC,iBAAvCC,EAAR,EAAQA,aAAcC,EAAtB,EAAsBA,UAEtB,OAAa,OAAToC,EAEA,uBACEZ,aAAc,kBAAMxB,EAAU,OAAD,UACtBD,EADsB,CAEzB0B,UAAW,GACXC,MAAO,IACPC,MAAO,kBACPC,MAAO,eAGX,gBAAC,IAAD,CAAKU,MAAM,WACX,gBAAC,IAAD,CAAYjD,OAAQ+C,EAAK5C,WAAWmC,MAAOrC,OAAQ8C,EAAK5C,WAAWF,SACnE,uBACEuB,UAAkB,0BAClBK,wBAAyB,CAAEC,OAAQiB,EAAKG,aAAaC,YAEvD,uBAAK3B,UAAU,yBACZuB,EAAKG,aAAaE,OAAOC,KAAI,SAAC/C,EAASgD,GACtC,OAAO,gBAAC,EAAD,CAAYhD,QAASA,EAASiD,IAAKD,SAM3C","file":"component---src-templates-people-js-bf4fae1c3e800ca9ed7a.js","sourcesContent":["/**\n * SEO component that queries for data with\n *  Gatsby's useStaticQuery React hook\n *\n * See: https://www.gatsbyjs.org/docs/use-static-query/\n */\n\nimport React, {useEffect, useState} from \"react\"\nimport { Helmet } from \"react-helmet\"\n\nfunction Background({ preset, custom }) {\n\n    const [background, setBackground] = useState(\"white\")\n\n    useEffect(() => {\n        setBackground(preset !== \"custom\" ? preset : custom)\n    }, [preset, custom])\n\n    return (\n        <Helmet>\n            <style>{`main, .container { background: ${background}; transition: 400ms ease;}`}</style>\n        </Helmet>\n    )\n}\n\nexport default Background\n","import React, { useState, useEffect, createRef, useContext } from \"react\"\nimport { CursorContext } from \"../../../context/cursorContext\"\nimport \"./peopleCard.scss\"\n\nconst PeopleCard = ({ element }) => {\n  const [active, toggle] = useState(false)\n  const [background, setBackground] = useState(\"var(--lightgrey)\")\n  const { cursorConfig, setCursor } = useContext(CursorContext)\n\n  useEffect(() => {\n    const bg =\n      element.background.presets !== \"custom\"\n        ? element.background.presets\n        : element.background.custom\n    setBackground(bg)\n  })\n\n  const textDiv = createRef()\n  const [arrow, setArrow] = useState(false)\n\n  useEffect(() => {\n    if (textDiv)\n      setArrow(\n        textDiv.current.scrollHeight > textDiv.current.offsetHeight &&\n          textDiv.current.scrollTop + textDiv.current.offsetHeight <\n            textDiv.current.getElementsByTagName(\"span\")[0].scrollHeight\n      )\n\n  }, [textDiv])\n\n  const compareOnScroll = () => {\n    if (textDiv) setArrow(\n      textDiv.current.scrollHeight > textDiv.current.offsetHeight &&\n        textDiv.current.scrollTop + textDiv.current.offsetHeight <\n          textDiv.current.getElementsByTagName(\"span\")[0].scrollHeight\n    )\n  }\n\n  if (element.personImage) {\n    return (\n      <div className={active ? \"people-card active\" : \"people-card\"}>\n        <div className={active ? \"inner active\" : \"inner\"}>\n          <div className=\"front\">\n            {/* {element.personImage.localFile && <GatsbyImage\n              image={element.personImage.localFile.childImageSharp.gatsbyImageData}\n            />} */}\n            <img\n              src={element.personImage.sourceUrl}\n              srcSet={element.personImage.srcSet}\n            />\n          </div>\n          <div className=\"back\" style={{ background: background }}>\n            <div\n              className=\"left\"\n              dangerouslySetInnerHTML={{ __html: element.textLeft }}\n            />\n            <div\n              ref={textDiv}\n              onScroll={compareOnScroll}\n              className=\"right\"\n              dangerouslySetInnerHTML={{ __html: element.textRight }}\n            />\n            {arrow && (\n              <div\n                className=\"arrow-down\"\n                onMouseEnter={() =>\n                  setCursor({\n                    ...cursorConfig,\n                    rotation: -30,\n                    scale: \"1\",\n                    color: \"var(--black)\",\n                    shape: \"default\",\n                  })\n                }\n                onMouseLeave={() =>\n                  setCursor({\n                    ...cursorConfig,\n                    rotation: -30,\n                    scale: \"1\",\n                    color: \"var(--darkgrey)\",\n                    shape: \"default\",\n                  })\n                }\n                onClick={() => {\n                  textDiv.current.scrollBy({\n                    top: textDiv.current.clientHeight * 0.25,\n                    behavior: \"smooth\",\n                  })\n                }}\n              ></div>\n            )}\n          </div>\n        </div>\n      </div>\n    )\n  } else return <div />\n}\n\nexport default PeopleCard\n","import { graphql } from \"gatsby\"\nimport React, { useContext } from \"react\"\nimport Background from \"../components/atoms/background\"\nimport PeopleCard from \"../components/molecules/peopleCard/peopleCard\"\nimport SEO from \"../components/seo\"\nimport { CursorContext } from '../context/cursorContext'\n\nexport const query = graphql`\n  query PeoplePage {\n    page: wpPage(slug: { eq: \"people\" }) {\n      id\n      title\n      slug\n      background {\n        color: presets\n        custom\n      }\n      peopleFields {\n        sideText\n        people {\n          textLeft\n          textRight\n          background {\n            presets\n            custom\n          }\n          personImage {\n            sourceUrl\n            srcSet\n            localFile {\n              childImageSharp {\n                gatsbyImageData(layout: FULL_WIDTH)\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`\n\nconst PeoplePage = ({ data, location }) => {\n  const { page } = data\n  const { cursorConfig, setCursor } = useContext(CursorContext);\n\n  if (page !== null) {\n    return (\n      <div \n        onMouseEnter={() => setCursor({\n            ...cursorConfig,\n            rotation: -30,\n            scale: '1',\n            color: 'var(--darkgrey)',\n            shape: \"default\"\n        })}\n      >\n        <SEO title=\"people\" />\n        <Background preset={page.background.color} custom={page.background.custom} />\n        <div\n          className={true ? \"side-description active\" : \"side-description\"}\n          dangerouslySetInnerHTML={{ __html: page.peopleFields.sideText }}\n        />\n        <div className=\"container people-grid\">\n          {page.peopleFields.people.map((element, index) => {\n            return <PeopleCard element={element} key={index} />\n          })}\n        </div>\n      </div>\n    )\n  } else {\n    return <></>\n  }\n}\n\nexport default PeoplePage\n"],"sourceRoot":""}