component---src-pages-case-studies-jsx-a63ddcbf5e6aa9cc1389.js.map

{"version":3,"sources":["webpack:///./src/pages/case-studies.jsx","webpack:///./src/elements/Button.jsx"],"names":["SectionWrapper","styled","Inner","SectionContainer","div","Title","span","Image","Img","ImageWrapper","SectionHeader","H2","Separator","SectionContents","Section","children","props","title","slug","image","href","LogoImage","defaultProps","fluid","childImageSharp","style","maxHeight","minHeight","maxWidth","margin","imgStyle","objectFit","CaseStudiesPage","query","render","data","isDark","zIndex","allMarkdownRemark","edges","map","i","node","key","frontmatter","fields","logoImage","subtitles","Button","button"],"mappings":"mSAiBMA,EAAiBC,YAAOC,KAAV,mFAAGD,CAAH,qFAIdE,EAAmBF,IAAOG,IAAV,qFAAGH,CAAH,oMAKhBI,EAAQJ,IAAOK,KAAV,0EAAGL,CAAH,6CAILM,EAAQN,YAAOO,KAAV,0EAAGP,CAAH,yCAKLQ,EAAeR,IAAOG,IAAV,iFAAGH,CAAH,iDAIZS,EAAgBT,YAAOU,KAAV,kFAAGV,CAAH,6EAIbM,GAOAK,EAAYX,IAAOK,KAAV,8EAAGL,CAAH,8JAITY,EAAkBZ,IAAOG,IAAV,oFAAGH,CAAH,qKAIfa,EAAU,SAAC,GAA4B,IAA1BC,EAAyB,EAAzBA,SAAaC,EAAY,iBAClCC,EAAuBD,EAAvBC,MAAOC,EAAgBF,EAAhBE,KAAMC,EAAUH,EAAVG,MAErB,OACE,kBAAChB,EAAD,KACE,kBAACO,EAAD,KACE,kBAAC,IAAD,CAAQU,KAAMF,GACZ,kBAACG,EAAD,CAAWF,MAAOA,IAClB,kBAACd,EAAD,KAAQY,KAGZ,kBAACJ,EAAD,KAAkBE,GAClB,kBAACH,EAAD,QAKNE,EAAQQ,aAAe,CACrBH,MAAO,MAWT,IAAME,EAAY,SAAC,GAAkB,IAC3BF,EAD0B,oBAC1BA,MAER,OACE,kBAACV,EAAD,KACE,kBAACF,EAAD,CACEgB,MAAOJ,EAAMK,gBAAgBD,MAC7BE,MAAO,CAAEC,UAAW,GAAIC,UAAW,GAAIC,SAAU,IAAKC,OAAQ,QAC9DC,SAAU,CAAEC,UAAW,eAgFhBC,UArES,kBACtB,kBAAC,cAAD,CACEC,MAAK,aAgCLC,OAAQ,SAAAC,GACN,OACE,kBAAC,IAAD,KACE,kBAAC,IAAD,CAAKlB,MAAM,iBACX,kBAAC,IAAD,KACE,kBAAC,IAAD,CAAMmB,QAAM,EAACX,MAAO,CAAEY,OAAQ,KAC5B,kBAAC,IAAD,qBACA,kBAAC,IAAD,OAEF,kBAAC,IAAD,KACE,kBAACrC,EAAD,KACGmC,EAAKG,kBAAkBC,MAAMC,KAAI,WAAWC,GAAO,IAAfC,EAAc,EAAdA,KACnC,OACE,kBAAC5B,EAAD,CACE6B,IAAG,cAAgBF,EACnBxB,MAAOyB,EAAKE,YAAY3B,MACxBC,KAAMwB,EAAKG,OAAO3B,KAClBC,MAAOuB,EAAKE,YAAYE,WAExB,kBAAC,IAAD,KAAIJ,EAAKE,YAAYG,WACrB,kBAAC,IAAD,CAAQ3B,KAAMsB,EAAKG,OAAO3B,MACxB,kBAAC,IAAD,gC,kCCjKxB,gBAIM8B,EAAS/C,IAAOgD,OAAV,4DAAGhD,CAAH,kaAMQA,YAAO+C,GAAV,yEAAG/C,CAAH,iDAIF+C","file":"component---src-pages-case-studies-jsx-a63ddcbf5e6aa9cc1389.js","sourcesContent":["/* eslint-disable react/no-array-index-key */\n/* eslint-disable react/no-unescaped-entities */\nimport React from \"react\"\nimport PropTypes from \"prop-types\"\nimport styled from \"styled-components\"\nimport Img from \"gatsby-image\"\nimport tw from \"tailwind.macro\"\nimport { StaticQuery, graphql } from \"gatsby\"\nimport LinkTo from \"../components/LinkTo\"\nimport Layout from \"../components/layout\"\nimport SEO from \"../components/seo\"\nimport AppWrapper from \"../views/AppWrapper\"\nimport Content, { Inner } from \"../elements/Content\"\nimport Hero from \"../views/Hero\"\nimport { BigTitleLight, H2, P, PLight } from \"../elements/Text\"\nimport Button from \"../elements/Button\"\n\nconst SectionWrapper = styled(Inner)`\n  ${tw`w-full lg:flex lg:flex-wrap`}\n`\n\nconst SectionContainer = styled.div`\n  ${tw`lg:w-1/2 xl:w-1/3 text-center`};\n  ${tw`lg:flex lg:flex-col`};\n`\n\nconst Title = styled.span`\n  ${tw`block mt-4`};\n`\n\nconst Image = styled(Img)`\n  filter: grayscale(15%);\n  opacity: 0.65;\n`\n\nconst ImageWrapper = styled.div`\n  ${tw`my-8`};\n`\n\nconst SectionHeader = styled(H2)`\n  ${tw`mb-0 w-full`};\n\n  &:hover {\n    ${Image} {\n      filter: none;\n      opacity: 1;\n    }\n  }\n`\n\nconst Separator = styled.span`\n  ${tw`w-full bg-grey-light h-px mx-auto my-6 block`};\n`\n\nconst SectionContents = styled.div`\n  ${tw`flex flex-col flex-grow justify-between lg:px-6`};\n`\n\nconst Section = ({ children, ...props }) => {\n  const { title, slug, image } = props\n\n  return (\n    <SectionContainer>\n      <SectionHeader>\n        <LinkTo href={slug}>\n          <LogoImage image={image} />\n          <Title>{title}</Title>\n        </LinkTo>\n      </SectionHeader>\n      <SectionContents>{children}</SectionContents>\n      <Separator />\n    </SectionContainer>\n  )\n}\n\nSection.defaultProps = {\n  image: null,\n}\n\nSection.propTypes = {\n  children: PropTypes.node.isRequired,\n  title: PropTypes.string.isRequired,\n  slug: PropTypes.string.isRequired,\n  // eslint-disable-next-line react/forbid-prop-types\n  image: PropTypes.object,\n}\n\nconst LogoImage = ({ ...props }) => {\n  const { image } = props\n\n  return (\n    <ImageWrapper>\n      <Image\n        fluid={image.childImageSharp.fluid}\n        style={{ maxHeight: 60, minHeight: 60, maxWidth: 140, margin: \"auto\" }}\n        imgStyle={{ objectFit: \"contain\" }}\n      />\n    </ImageWrapper>\n  )\n}\n\nLogoImage.propTypes = {\n  // eslint-disable-next-line react/forbid-prop-types\n  image: PropTypes.object.isRequired,\n}\n\nconst CaseStudiesPage = () => (\n  <StaticQuery\n    query={graphql`\n      query ListCSQuery {\n        allMarkdownRemark(\n          filter: {\n            fileAbsolutePath: { regex: \"/(case-studies)/\" }\n            frontmatter: { hidden: { ne: true } }\n          }\n          sort: { order: DESC, fields: [frontmatter___date] }\n        ) {\n          edges {\n            node {\n              fields {\n                slug\n              }\n              frontmatter {\n                date(formatString: \"MMMM Do YYYY\")\n                title\n                subtitles\n                hidden\n                logoImage {\n                  childImageSharp {\n                    fluid(maxHeight: 60) {\n                      ...GatsbyImageSharpFluid\n                    }\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n    `}\n    render={data => {\n      return (\n        <Layout>\n          <SEO title=\"Case Studies\" />\n          <AppWrapper>\n            <Hero isDark style={{ zIndex: 20 }}>\n              <BigTitleLight>Case Studies</BigTitleLight>\n              <PLight />\n            </Hero>\n            <Content>\n              <SectionWrapper>\n                {data.allMarkdownRemark.edges.map(({ node }, i) => {\n                  return (\n                    <Section\n                      key={`case-study-${i}`}\n                      title={node.frontmatter.title}\n                      slug={node.fields.slug}\n                      image={node.frontmatter.logoImage}\n                    >\n                      <P>{node.frontmatter.subtitles}</P>\n                      <LinkTo href={node.fields.slug}>\n                        <Button>Read More</Button>\n                      </LinkTo>\n                    </Section>\n                  )\n                })}\n              </SectionWrapper>\n            </Content>\n          </AppWrapper>\n        </Layout>\n      )\n    }}\n  />\n)\n\nexport default CaseStudiesPage\n","import styled from \"styled-components\"\nimport tw from \"tailwind.macro\"\n// import { Link } from \"gatsby\";\n\nconst Button = styled.button`\n  ${tw`bg-transparent hover:bg-pink border border-solid hover:border-transparent rounded cursor-pointer`};\n  ${tw`text-base xl:text-lg font-semibold py-4 px-8`};\n  ${tw`border-grey text-grey-darkest hover:text-white`}\n`\n\nconst ButtonLight = styled(Button)`\n  ${tw`border-white text-grey-lightest`}\n`\n\nexport default Button\nexport { ButtonLight }\n"],"sourceRoot":""}