{"version":3,"file":"component---src-templates-articles-tsx-470931b0cea7257e2b64.js","mappings":"gLA+LA,UA9KqD,SAAH,GAAiB,IACjE,EAD0D,EAAJA,KAW7CC,gBAAgBD,KATvBE,EAAU,EAAVA,WACAC,EAAgB,EAAhBA,iBACAC,EAAK,EAALA,MACAC,EAAW,EAAXA,YAGAC,GAFY,EAAZC,aACa,EAAbC,cACO,EAAPF,SACAG,EAAI,EAAJA,KACAC,EAAY,EAAZA,aAMF,OACEC,EAAAA,cAACC,EAAAA,EAAM,KACLD,EAAAA,cAACE,EAAAA,EAAG,CAACT,MAAOF,EAAWY,KAAMT,YAAaF,EAAiBW,OAC3DH,EAAAA,cAACI,EAAAA,GAAS,CAACC,GAAG,OAAOC,GAAG,QACtBN,EAAAA,cAACO,EAAAA,GAAI,CACHC,QAAS,CAAC,MAAO,GAAI,GAAI,GAAI,YAAa,cAC1CC,QAAS,CAAC,OAAQ,OAAQ,OAAQ,GAAI,GAAI,QAC1CC,WAAW,cAEXV,EAAAA,cAACW,EAAAA,GAAG,KACFX,EAAAA,cAACY,EAAAA,GAAK,CAACC,KAAK,KAAKP,GAAG,UACjBb,EAAMU,MAETH,EAAAA,cAACc,EAAAA,GAAI,CAACD,KAAK,KAAKP,GAAG,QAChBZ,EAAYS,MAsDfH,EAAAA,cAACW,EAAAA,GAAG,CAACI,GAAI,CAAC,OAAQ,GAAI,GAAI,SACvBjB,EAAKkB,OAAS,GAAKlB,EAAK,GAAGmB,WAAWd,MACrCH,EAAAA,cAACO,EAAAA,GAAI,CACHC,QAAS,CACP,MACA,iBACA,GACA,GACA,GAAE,WACQT,GAAgB,GAAC,UAE7BU,QAAQ,OACRH,GAAG,QAEFR,EAAKoB,KAAI,SAACC,EAAMC,GAAG,OAClBpB,EAAAA,cAACW,EAAAA,GAAG,CAACU,IAAKD,GACRpB,EAAAA,cAACsB,EAAAA,EAAW,CACVC,IAAKJ,EAAKK,WAAWD,IACrBE,MAAON,EAAKK,WAAWE,kBAEzB1B,EAAAA,cAACc,EAAAA,GAAI,CAACa,GAAG,KAAKd,KAAK,KAAKe,GAAG,OAAOC,MAAM,YACrCV,EAAKF,WAAWd,MAEnBH,EAAAA,cAAC8B,EAAAA,GAAQ,CAACnC,QAASwB,EAAKY,aAAcC,QAAM,IACxC,KAIZhC,EAAAA,cAAC8B,EAAAA,GAAQ,CAACnC,QAASA,MAGvBK,EAAAA,cAACW,EAAAA,GAAG,CACFsB,GAAG,cACHC,EAAE,mBACFC,aAAa,OACbC,SAAS,SACTC,IAAI,SAEJrC,EAAAA,cAACsC,EAAAA,GAAM,CAACL,GAAG,aAAaM,MAAM,SAASC,OAAO,UAC5CxC,EAAAA,cAACyC,EAAAA,GAAK,CACJC,KAAK,aACLH,MAAM,UACNC,OAAO,UACPX,MAAM,iBAGV7B,EAAAA,cAACY,EAAAA,GAAK,CAACC,KAAK,KAAKc,GAAG,KAAKE,MAAM,QAAQxB,GAAG,QAAM,oCAGhDL,EAAAA,cAACc,EAAAA,GAAI,CAACe,MAAM,QAAQxB,GAAG,WAAS,oLAKhCL,EAAAA,cAAC2C,EAAAA,GAAM,CACLC,KAAK,cACLvC,GAAG,OACHQ,KAAK,KACL0B,MAAM,sBACNM,KAAK,2CACLC,OAAO,UAAQ,4BAIjB9C,EAAAA,cAAC2C,EAAAA,GAAM,CACLC,KAAK,QACLvC,GAAG,UACHQ,KAAK,KACL0B,MAAM,sBACNQ,GAAG,gBAAc,4BAS/B,C","sources":["webpack://audiplus/./src/templates/articles.tsx"],"sourcesContent":["import React, { FC } from 'react'\nimport { graphql } from 'gatsby'\nimport Layout from 'components/Layout'\nimport { Box, Circle, Container } from 'styles/globalStyle'\nimport { Text, RichText, Grid, Title, Button, Icons } from 'components/theme'\nimport { ArticlesTypes } from 'types/articlesTypes'\nimport { GatsbyImage } from 'gatsby-plugin-image'\nimport SEO from 'components/SEO'\n\ntype ArticlesTemplateParams = {\n  data: {\n    prismicArticles: {\n      data: ArticlesTypes\n    }\n  }\n}\n\nconst ArticlesTemplate: FC<ArticlesTemplateParams> = ({ data }) => {\n  const {\n    title_meta,\n    description_meta,\n    title,\n    description,\n    twitter_link,\n    facebook_link,\n    content,\n    grid,\n    grid_columns,\n  } = data.prismicArticles.data\n  const copyClipboard = () => {\n    navigator.clipboard.writeText(window.location.href)\n  }\n\n  return (\n    <Layout>\n      <SEO title={title_meta.text} description={description_meta.text} />\n      <Container mt=\"6rem\" mb=\"4rem\">\n        <Grid\n          columns={['1fr', '', '', '', '1fr 0.5fr', '1fr 0.35fr']}\n          spacing={['2rem', '3rem', '4rem', '', '', '6rem']}\n          alignItems=\"flex-start\"\n        >\n          <Box>\n            <Title size=\"lg\" mb=\"1.5rem\">\n              {title.text}\n            </Title>\n            <Text size=\"xl\" mb=\"4rem\">\n              {description.text}\n            </Text>\n            {/* <Flex mb={['0', '', '', '', '4rem']}>\n              <Button\n                type=\"light\"\n                size=\"md\"\n                mr=\"0.75rem\"\n                onClick={copyClipboard}\n              >\n                <Icons\n                  as=\"span\"\n                  name=\"copy\"\n                  width=\"1rem\"\n                  height=\"1rem\"\n                  mr=\"0.5rem\"\n                />\n                Copier le lien\n              </Button>\n              {twitter_link.url && (\n                <Button\n                  type=\"light\"\n                  width=\"2.5rem\"\n                  size=\"md\"\n                  mr=\"0.75rem\"\n                  href={twitter_link.url}\n                  padding=\"0\"\n                >\n                  <Icons\n                    as=\"span\"\n                    name=\"twitter\"\n                    width=\"1.25rem\"\n                    height=\"1.25rem\"\n                    color=\"gray.100\"\n                  />\n                </Button>\n              )}\n              {facebook_link.url && (\n                <Button\n                  type=\"light\"\n                  width=\"2.5rem\"\n                  size=\"md\"\n                  href={facebook_link.url}\n                  padding=\"0\"\n                >\n                  <Icons\n                    as=\"span\"\n                    name=\"fb\"\n                    width=\"1.25rem\"\n                    height=\"1.25rem\"\n                    color=\"gray.100\"\n                  />\n                </Button>\n              )}\n            </Flex> */}\n            <Box pb={['2rem', '', '', '4rem']}>\n              {grid.length > 0 && grid[0].item_title.text && (\n                <Grid\n                  columns={[\n                    '1fr',\n                    'repeat(2, 1fr)',\n                    '',\n                    '',\n                    '',\n                    `repeat(${grid_columns || 3}, 1fr)`,\n                  ]}\n                  spacing=\"3rem\"\n                  mb=\"4rem\"\n                >\n                  {grid.map((item, idx) => (\n                    <Box key={idx}>\n                      <GatsbyImage\n                        alt={item.item_image.alt}\n                        image={item.item_image.gatsbyImageData}\n                      />\n                      <Text as=\"h2\" size=\"xl\" my=\"2rem\" color=\"gray.900\">\n                        {item.item_title.text}\n                      </Text>\n                      <RichText content={item.item_content} isGrid />\n                    </Box>\n                  ))}\n                </Grid>\n              )}\n              <RichText content={content} />\n            </Box>\n          </Box>\n          <Box\n            bg=\"primary.600\"\n            p=\"2rem 2rem 2.5rem\"\n            borderRadius=\"1rem\"\n            position=\"sticky\"\n            top=\"10rem\"\n          >\n            <Circle bg=\"primary.50\" width=\"3.5rem\" height=\"3.5rem\">\n              <Icons\n                name=\"headphones\"\n                width=\"1.25rem\"\n                height=\"1.25rem\"\n                color=\"primary.600\"\n              />\n            </Circle>\n            <Title size=\"xs\" as=\"h3\" color=\"white\" mt=\"2rem\">\n              Testez votre ouïe dès maintenant\n            </Title>\n            <Text color=\"white\" mt=\"0.75rem\">\n              À moins de tester son audition, il est impossible de savoir si\n              l’on est atteint d’hypoacousie. Audiplus vous propose un rapide\n              test auditif à faire en ligne, depuis chez vous !\n            </Text>\n            <Button\n              type=\"borderWhite\"\n              mt=\"2rem\"\n              size=\"xl\"\n              width=\"calc(100% - 2.5rem)\"\n              href=\"https://www.testyourhearing.com/audiplus\"\n              target=\"_blank\"\n            >\n              Je fais le test en ligne\n            </Button>\n            <Button\n              type=\"white\"\n              mt=\"0.75rem\"\n              size=\"xl\"\n              width=\"calc(100% - 2.5rem)\"\n              to=\"/appointment\"\n            >\n              Je prends rendez-vous\n            </Button>\n          </Box>\n        </Grid>\n      </Container>\n    </Layout>\n  )\n}\n\nexport const query = graphql`\n  query ($uid: String) {\n    prismicArticles(uid: { eq: $uid }) {\n      data {\n        ...PrismicArticlesDataTypeFragment\n      }\n    }\n  }\n`\n\nexport default ArticlesTemplate\n"],"names":["data","prismicArticles","title_meta","description_meta","title","description","content","twitter_link","facebook_link","grid","grid_columns","React","Layout","SEO","text","Container","mt","mb","Grid","columns","spacing","alignItems","Box","Title","size","Text","pb","length","item_title","map","item","idx","key","GatsbyImage","alt","item_image","image","gatsbyImageData","as","my","color","RichText","item_content","isGrid","bg","p","borderRadius","position","top","Circle","width","height","Icons","name","Button","type","href","target","to"],"sourceRoot":""}