{"version":3,"file":"component---src-pages-jobs-js-798e567e94ae586b4d25.js","mappings":"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","sources":["webpack://kobbble/./src/components/button.js","webpack://kobbble/./src/components/jobCard.js","webpack://kobbble/./src/pages/jobs.js"],"sourcesContent":["import React from \"react\"\nimport { Link } from \"gatsby\"\n\nimport { css } from '@emotion/react'\n\nconst Button = (props) => {\n    const {\n        link,\n        text,\n        svg,\n        external,\n        alt\n    } = props\n\n\n    const linkWrapper = (children) => {\n        if ( external ) {\n            return (\n                <a href={link} target=\"_blank\" rel=\"nofollow noopener noreferrer\" css={alt ? [main, altStyle] : main}>\n                    {children}\n                </a>\n            )\n        } else {\n            return (\n                <Link to={link} css={alt ? [main, altStyle] : main} {...props} >\n                    {children}\n                </Link>\n            )\n        }\n    }\n\n    return linkWrapper(<span>{svg}{text}</span>)\n}\n\nexport default Button\n\nconst main = css`\n    background-color: #00ffaa;\n    padding: 20px 20px;\n    border-radius: 5px;\n    text-decoration: none;\n    color: black;\n    transition: background-color .2s ease-in-out;\n    line-height: 1;\n    display: inline-block;\n\n    &:hover {\n        background-color: black;\n        color: white;\n    }\n\n    svg {\n        margin-bottom: -3px;\n        margin-right: 10px;\n    }\n`\n\nconst altStyle = css`\n    background-color: #333;\n    color: white;\n\n    &:hover {\n        background-color: #D1BAA0;\n        color: #333;\n    }\n`","import React, { useState } from \"react\"\nimport { GatsbyImage } from \"gatsby-plugin-image\"\n\nimport { css } from '@emotion/react'\n\nconst JobCard = (props) => {\n    const {\n        id,\n        index,\n        name,\n        diploma,\n        description,\n        image,\n    } = props\n\n    const [open, setOpen] = useState(false)\n\n    const prettyDesc = (isOpen) => {\n        let maxLength = 150\n\n        return !isOpen && description.length > maxLength ?\n            <p>{description.substr(0, maxLength) + \"...\"} <button onClick={() => setOpen(!open)}>[voir plus]</button></p>\n            :\n            <p>{description} {open && <button onClick={() => setOpen(!open)}>[réduire]</button>}</p>\n    }\n\n    return (\n        <div key={id} css={card}>\n            {image && <GatsbyImage image={image} alt={name} css={cover}/>}\n\n            <div css={numbering}>{index}</div>\n\n            <div css={main}>\n                <h2>{name}</h2>\n\n                {diploma && <div css={meta}>{diploma.join(\", \")}</div>}\n\n                {description && <div>{prettyDesc(open)}</div>}\n            </div>\n        </div>\n    )\n}\n\nexport default JobCard\n\nconst card = css`\n  border: 1px solid #EBEBEB;\n  border-radius: 10px;\n  position: relative;\n  overflow: hidden;\n`\n\nconst numbering = css`\n  position: absolute;\n  font-size: 100px;\n  font-weight: 900;\n  line-height: 1;\n  opacity: .11;\n  left: -10px;\n  top: -20px;\n`\n\nconst meta = css`\n  opacity: .66;\n  font-size: 16px;\n`\n\nconst cover = css`\n    height: 200px;\n    width: 100%;\n`\n\nconst main = css`\n    padding: 20px;\n\n    h2 {\n        margin: 0;\n        font-size: 1rem;\n    }\n\n    p {\n        margin: 5px 0 0;\n        font-size: .8rem;\n        line-height: 1.3;\n    }\n\n    button {\n        border: none;\n        background: none;\n        font-size: .8rem;\n        padding: 0;\n        cursor: pointer;\n        opacity: .66;\n        transform: opacity 1s ease-in-out;\n\n        &:hover {\n            color: #00ffaa;\n            opacity: 1;\n        }\n    }\n`","import React from \"react\"\nimport { graphql } from 'gatsby'\nimport Container from \"../components/container\"\n\nimport { css } from '@emotion/react'\n\nimport Layout from \"../components/layout\"\nimport Seo from \"../components/seo\"\nimport JobCard from \"../components/jobCard\"\nimport Button from \"../components/button\"\n\nimport { FaTools, FaMapSigns, FaCarBattery, FaBoxes, FaCarSide } from \"react-icons/fa\"\nimport { GiConcreteBag, GiPineTree, GiRecycle, GiTruck, GiOpenedFoodCan, GiSewingMachine } from \"react-icons/gi\"\nimport { MdTrain, MdAgriculture, MdOutlineAirplanemodeActive, MdOutlineHouse, MdDirectionsBoatFilled } from \"react-icons/md\"\nimport { BsBicycle } from \"react-icons/bs\"\nimport { BiCycling } from \"react-icons/bi\"\n\n\nconst JobsPage = ( {data} ) => {\n  const jobs = data.allAirtable.edges.map( edge => edge.node )\n  const jobCount = data.allAirtable.totalCount\n\n  const positiveColor = \"rgba(0, 255, 170, 1)\"\n  const positiveColorTamed = \"rgba(0, 255, 170, .11)\"\n  const negativeColor = \"rgba(245, 77, 186, 1)\"\n  const negativeColorTamed = \"rgba(245, 77, 186, .11)\"\n\n  return (\n    <Layout>\n      <Seo title=\"Jobs à impact pour la transition énergétique et sociale\" />\n  \n      <div style={{marginTop: \"70px\"}}>\n        <Container>\n          <h1>Les métiers de la transition</h1>\n          <p>Le facteur humain, souvent mis de côté au profit de l'élément \"technologique\", est un facteur clé de réussite de la transition écologique et sociale. Les enjeux mobilisent tous les métiers et les secteurs, et ne se limitent pas aux métiers \"verts\" ou sociaux, aux secteurs innovants ou \"carbonés\". Il s'agit bien de faire évoluer les emplois tout comme les compétences et savoir-faire, ce qui implique une anticipation non négligeable.</p>\n          <p>Pour répondre aux défis de la transition écologique, économique, sociale et solidaire, de nombreux métiers devront se transformer, d'autres seront amenés à disparaître ou être créés pour répondre aux nouveaux besoins.</p>\n          <Button link=\"#selection\" text=\"Sélection d'emplois\" svg={<FaTools />} style={{\"marginRight\": \"20px\"}}/>\n          <Button link=\"#tendances\" text=\"Les tendances\" svg={<FaMapSigns />} alt />\n\n          <div id=\"selection\" style={{\"marginTop\": \"50px\"}}>\n            <h2>{jobCount} Emplois et formations au coeur de la transition énergétique et sociale</h2>\n            <p>Nous travaillons à développer cette liste des \"jobs du futur\" à mesure que les estimations des économistes s'affinent quant au manque de main d'oeuvre dans les secteurs les plus au coeur de la transition.</p>\n\n            <div css={grid}>\n              {jobs.map( (job, index) => {\n                // const img = job.data.Cover ? job.data.Cover[0].thumbnails.large.url : null\n\n                return (\n                  <JobCard \n                    id={job.id}\n                    index={index+1}\n                    name={job.data.Name}\n                    diploma={job.data.Diploma}\n                    description={job.data.Description}\n                    image={job.data.Cover && job.data.Cover.localFiles[0].childImageSharp.gatsbyImageData}\n                  />\n                )\n              })}\n            </div>\n          </div>\n\n          <div id=\"tendances\" css={trendSection}>\n            <h2>Les tendances de l'emploi de la transition énergétique et sociale</h2>\n            <p>Les statistiques ci-dessous donnent, pour les secteurs prioritairement concernés par la transition, une estimation des tendances d'augmentation<span className=\"trend-badge\" style={{\"backgroundColor\": positiveColor}}></span> ou de disparition<span className=\"trend-badge\" style={{\"backgroundColor\": negativeColor}}></span> d'emplois - ceci en fonction des choix politiques effectués pour anticiper et réagir aux contraintes d'une économie en transition.</p>\n\n            <div css={statsGrid}>\n              {sectorStats.sort( (a, b) => b.delta - a.delta ).map( sector => (\n                <div css={statsCard} key={sector.name}>\n                  <div \n                    className=\"stats-card__main\" \n                    style={sector.delta > 0 ? {\"backgroundColor\": positiveColorTamed} : {\"backgroundColor\": negativeColorTamed}}\n                  >\n                    {sector.icon && \n                      <div \n                        className=\"stats-card__icon\" \n                        style={sector.delta > 0 ? {\"backgroundColor\": positiveColor} : {\"backgroundColor\": negativeColor}}>\n                        {sector.icon}\n                      </div>\n                    }\n                    <h3>{sector.name}</h3>\n                  </div>\n\n                  <div className=\"stats-card__data\">\n                    <div className=\"stats-card__data__holder\">\n                      <div className=\"stats-card__data__graph\"\n                        style={{\n                          \"width\": `${Math.abs(sector.delta)}px`,\n                          \"backgroundColor\": sector.delta > 0 ? positiveColor : negativeColor,\n                          \"marginLeft\": sector.delta > 0 ? \"50%\" : `calc(50% - ${Math.abs(sector.delta)}px)`,\n                        }}\n                      ></div>\n                    </div>\n                    <div className=\"stats-card__data__origin\"></div>\n                  </div>\n                </div>\n              ))}\n            </div>\n\n            {false && <div css={sources}>\n              <h4>Sources</h4>\n              <ul>\n                <li>Plan de transformation de l'économie française</li>\n              </ul>\n            </div>}\n          </div>\n        </Container>\n      </div>\n    </Layout>\n  )\n}\n\nexport default JobsPage\n\nconst grid = css`\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  padding: 30px 0 80px;\n  gap: 20px;\n\n  @media screen and (max-width: 1300px) {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @media screen and (max-width: 800px) {\n    grid-template-columns: 1fr;\n  }\n`\n\nconst trendSection = css`\n  .trend-badge {\n    width: 10px;\n    height: 10px;\n    border-radius: 10px;\n    background-color: black;\n    display: inline-block;\n    margin-left: 3px;\n    margin-right: 5px;\n  } \n`\n\nconst statsGrid = css`\n  display: grid;\n  grid-template-columns: repeat(6, 1fr);\n  gap: 20px;\n  margin-bottom: 30px;\n\n  @media screen and (max-width: 1200px) {\n    grid-template-columns: repeat(4, 1fr);\n  }\n\n  @media screen and (max-width: 800px) {\n    grid-template-columns: repeat(2, 1fr);\n  }\n`\n\nconst statsCard = css`\n  border: 1px solid #EBEBEB;\n  border-radius: 5px;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: stretch;\n\n  .stats-card__main {\n    padding: 10px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    h3 {\n      font-size: .8rem;\n      margin: 0;\n    }\n\n    .stats-card__icon {\n      height: 50px;\n      width: 50px;\n      padding: 10px;\n      border-radius: 100px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-bottom: 10px;\n    }\n  }\n\n  .stats-card__data {\n    padding: 20px;\n    position: relative;\n\n    .stats-card__data__holder {\n      background-color: #EFEFEF;\n      border-radius: 50px;\n      width: 100%;\n      height: 20px;\n      overflow: hidden;\n\n      .stats-card__data__graph {\n        height: 100%;\n      }\n    }\n    .stats-card__data__origin {\n      position: absolute;\n      height: 50%;\n      width: 1px;\n      background-color: #333;\n      top: 25%;\n      left: 50%;\n    }\n  }\n`\n\nconst sources = css`\n  padding: 20px;\n  background-color: #f0f0f0;\n  border-radius: 5px;\n  // background-color: #D1BAA0;\n\n  h4 {\n    margin-bottom: 10px;\n  }\n\n  ul {\n    margin-bottom: 0;\n  }\n`\n\n\nexport const jobsQuery = graphql`\n  query JobsQuery {\n    allAirtable(filter: {table: {eq: \"Jobs\"}, data: {Status: {eq: \"Published\"}}}, sort: {fields: data___Name, order: ASC}) {\n      edges {\n        node {\n          id\n          data {\n            Name\n            Description\n            Diploma\n            Verticals {\n              id\n              data {\n                Name\n              }\n            }\n            Cover {\n              id\n              localFiles {\n                childImageSharp {\n                  gatsbyImageData(\n                      width: 500\n                      quality: 80\n                  )\n                }\n              }\n            }\n          }\n        }\n      }\n      totalCount\n    }\n  }\n`\n\nconst sectorStats = [\n  {\n    \"name\": \"Agroalimentaire\", \n    \"delta\": -10,\n    \"icon\": <GiOpenedFoodCan />,\n  },\n  {\n    \"name\": \"Ciment et béton\", \n    \"delta\": -2,\n    \"icon\": <GiConcreteBag />,\n  },\n  {\n    \"name\": \"Construction neuve\", \n    \"delta\": -30,\n    \"icon\": <MdOutlineHouse />,\n  },\n  {\n    \"name\": \"Industrie automobile\", \n    \"delta\": -40,\n    \"icon\": <FaCarSide />,\n  },\n  {\n    \"name\": \"Transport aérien\", \n    \"delta\": -6,\n    \"icon\": <MdOutlineAirplanemodeActive />,\n  },\n  {\n    \"name\": \"Transport routier\", \n    \"delta\": -20,\n    \"icon\": <GiTruck />,\n  },\n  {\n    \"name\": \"Fret vélo\", \n    \"delta\": +18,\n    \"icon\": <BiCycling />,\n  },\n  {\n    \"name\": \"Fret ferroviaire\", \n    \"delta\": +2,\n    \"icon\": <FaBoxes />,\n  },\n  {\n    \"name\": \"Fret fluvial\", \n    \"delta\": +2,\n    \"icon\": <MdDirectionsBoatFilled />,\n  },\n  {\n    \"name\": \"Transport ferroviaire longue distance\", \n    \"delta\": +6,\n    \"icon\": <MdTrain />,\n  },\n  {\n    \"name\": \"Industrie vélo\", \n    \"delta\": +30,\n    \"icon\": <BsBicycle />,\n  },\n  {\n    \"name\": \"Batteries & recharge\", \n    \"delta\": +10,\n    \"icon\": <FaCarBattery />,\n  },\n  {\n    \"name\": \"Rénovation\", \n    \"delta\": +20,\n    \"icon\": <GiRecycle />,\n  },\n  {\n    \"name\": \"Forêt et bois\", \n    \"delta\": +5,\n    \"icon\": <GiPineTree />,\n  },\n  {\n    \"name\": \"Production agricole\", \n    \"delta\": +20,\n    \"icon\": <MdAgriculture />,\n  },\n  {\n    \"name\": \"Artisanat commercial\", \n    \"delta\": +30,\n    \"icon\": <GiSewingMachine />,\n  },\n]"],"names":["props","children","link","text","svg","external","alt","href","target","rel","css","main","altStyle","to","id","index","name","diploma","description","image","useState","open","setOpen","key","card","G","cover","numbering","meta","join","length","substr","onClick","data","jobs","allAirtable","edges","map","edge","node","jobCount","totalCount","positiveColor","negativeColor","title","style","marginTop","grid","job","Name","Diploma","Description","Cover","localFiles","childImageSharp","gatsbyImageData","trendSection","className","statsGrid","sectorStats","sort","a","b","delta","sector","statsCard","icon","Math","abs"],"sourceRoot":""}