{"version":3,"sources":["webpack:///./src/components/molecules/ExploreTopics/ExploreTopics.tsx","webpack:///./src/components/molecules/PopularPosts/PopularPosts.tsx","webpack:///./src/components/organisms/aside/AsideBar.tsx","webpack:///./src/components/organisms/grid-layout/GridLayout.tsx","webpack:///./src/components/organisms/videos-carousel/videos-carousel.tsx","webpack:///./src/templates/videosTemplate.tsx","webpack:///./src/components/molecules/PreviewCard/PreviewCard.tsx","webpack:///./src/components/molecules/paginator/Paginator.tsx","webpack:///./src/utils/arrayUtilities.ts"],"names":["ExploreTopics","topics","useStaticQuery","allContentfulSubcategoria","nodes","referenciaSubcategorias","React","createElement","className","map","topic","key","Link","to","slug","nombreSubcategoria","PopularPosts","posts","setPosts","useState","data","useEffect","_data$allContentfulHo","_data$allContentfulHo2","allContentfulHome","process","shuffleArray","node","_node$referenciaSubca","filter","item","tipoContenido","length","flat","titulo","referenciaInterna","referenciaCabecera","tituloPrincipal","imagen","imagenHeader","file","url","fecha","dateToRelativeFormat","createdAt","slice","post","withPrefix","src","alt","AsideBar","GridLayout","props","children","trim","style","gridTemplateColumns","columns","gap","padding","VideosCarousel","_ref","actualVideo","setActualVideo","videos","carouselRef","useRef","actualIndex","setActualIndex","showPopUp","setShowPopUp","scrollCarousel","direction","carousel","current","newActualIndex","video","image","indexOf","valueToScroll","scrollLeft","scroll","scrollWidth","compClass","Fragment","VideosPopUp","FaLongArrowAltLeft","onClick","FaLongArrowAltRight","ref","index","updateActualVideo","dangerouslySetInnerHTML","__html","span","VideosTemplate","pageData","pageContext","pageContent","numPages","currentPage","elements","redireccionBoton","tituloSpan","migaDePan","Layout","hideHeaderDesktop","hideHeaderMobile","isNotRoot","SEO","title","metaTitulo","nombreCategoria","description","metaDescripcion","json","content","value","lang","VideosHeader","element","i","_element$video","imageUrl","leftSub","link","replace","external","rightSub","icon","FaYoutube","PreviewCard","Object","assign","Paginator","quantity","Suscribe","adapterSuscribe","Disclaimer","target","next","back","Array","from","_","active","array","randomIndex","currentIndex","Math","floor","random"],"mappings":"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","file":"component---src-templates-videos-template-tsx-5c639d277629630c2b81.js","sourcesContent":["import React, { useState } from \"react\";\r\nimport { useStaticQuery, graphql, Link } from \"gatsby\";\r\nimport \"./ExploreTopics.scss\";\r\n\r\nconst ExploreTopics = () => {\r\n  const data = useStaticQuery(graphql`\r\n    query exploreQuery {\r\n      allContentfulSubcategoria(\r\n        filter: { contentful_id: { eq: \"409cITTPuyHorR4bnTIBWl\" } }\r\n      ) {\r\n        nodes {\r\n          titulo\r\n          referenciaSubcategorias {\r\n            slug\r\n            nombreSubcategoria\r\n          }\r\n          id\r\n          contentful_id\r\n        }\r\n      }\r\n    }\r\n  `);\r\n\r\n  const topics =\r\n    data.allContentfulSubcategoria.nodes[0].referenciaSubcategorias;\r\n    \r\n  return (\r\n    <div className=\"explore-topics\">\r\n      <div className=\"explore-topics__title\">\r\n        <h3>Explorar temas</h3>\r\n      </div>\r\n      <ul>\r\n        {topics.map((topic, key) => (\r\n          <li key={key}>\r\n            <Link to={\"/\" + topic.slug}>\r\n              {topic.nombreSubcategoria}\r\n            </Link>\r\n          </li>\r\n        ))}\r\n      </ul>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default ExploreTopics;\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { useStaticQuery, graphql, Link, withPrefix } from \"gatsby\";\r\n\r\nimport \"./PopularPosts.scss\";\r\nimport { shuffleArray } from \"../../../utils/arrayUtilities\";\r\nimport { dateToRelativeFormat } from \"../../../utils/dateToRelativeFormat\";\r\n\r\nconst PopularPosts = () => {\r\n  const [posts, setPosts] = useState<any>([]);\r\n  const data = useStaticQuery(graphql`\r\n    query data2 {\r\n      allContentfulHome {\r\n        nodes {\r\n          referenciaSubcategorias {\r\n            titulo\r\n            slug\r\n            referenciaSubcategorias {\r\n              titulo\r\n              slug\r\n              tipoContenido\r\n              createdAt\r\n              referenciaInterna {\r\n                referenciaCabecera {\r\n                  imagenHeader {\r\n                    file {\r\n                      url\r\n                    }\r\n                  }\r\n                  tituloPrincipal\r\n                }\r\n              }\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  `);\r\n\r\n  useEffect(() => {\r\n    if(!data.allContentfulHome?.nodes[0]?.referenciaSubcategorias) return;\r\n    const process = shuffleArray(\r\n      data.allContentfulHome.nodes[0].referenciaSubcategorias\r\n        .map((node) => {\r\n          const articles = node.referenciaSubcategorias\r\n            ?.filter((item) => item.tipoContenido === \"Articulo\")\r\n            .map((item) => ({ ...item, slug: node.slug + item.slug }));\r\n          return articles;\r\n        })\r\n        .filter((item) => (item ? item.length >= 1 : false))\r\n        .flat()\r\n        .map((item) => ({\r\n          slug: item.slug,\r\n          titulo: item.referenciaInterna.referenciaCabecera.tituloPrincipal,\r\n          imagen:\r\n            item.referenciaInterna.referenciaCabecera.imagenHeader.file.url,\r\n          fecha: dateToRelativeFormat(item.createdAt),\r\n        }))\r\n    );\r\n    setPosts(process.slice(0, 3));\r\n  }, []);\r\n\r\n  return (\r\n    <div className=\"popular-posts\">\r\n      <div className=\"popular-posts__title\">\r\n        <h3>Entradas populares</h3>\r\n      </div>\r\n      {posts.map((post, key) => (\r\n        <Link to={withPrefix(post.slug)} key={key}>\r\n          <div className=\"popular-posts__content\">\r\n            <div className=\"popular-posts__items\">\r\n              <img src={post.imagen} alt=\"\" />\r\n              <div className=\"popular-posts__items-content\">\r\n                <div className=\"popular-posts__items-title\">\r\n                  <h3>{post.titulo}</h3>\r\n                </div>\r\n                <div className=\"popular-posts__items-date\">\r\n                  <span>{post.fecha}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </Link>\r\n      ))}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default PopularPosts;\r\n","import React from 'react'\r\nimport ExploreTopics from '../../molecules/ExploreTopics/ExploreTopics'\r\nimport PopularPosts from '../../molecules/PopularPosts/PopularPosts'\r\n\r\nimport \"./AsideBar.scss\"\r\n\r\nconst AsideBar = () => {\r\n  return (\r\n    <aside>\r\n      <PopularPosts />\r\n      <ExploreTopics />\r\n    </aside>\r\n  )\r\n}\r\n\r\nexport default AsideBar\r\n","import React from \"react\";\r\nimport \"./grid-layout.scss\";\r\n\r\ntype GridLayoutProps = {\r\n  columns?: string;\r\n  gap?: string;\r\n  padding?: string;\r\n  children?: React.ReactNode;\r\n  className?: string;\r\n};\r\n\r\nconst GridLayout = (props: GridLayoutProps) => {\r\n  const { children } = props;\r\n  const compClass = \"o-gridLayout\";\r\n  return (\r\n    <section className={`${compClass} ${\r\n      props.className ? props.className : \"\"\r\n    }`.trim()}>\r\n      <div\r\n        className={`${compClass}__grid`}\r\n        style={{\r\n          gridTemplateColumns: props.columns || \"1fr 1fr\",\r\n          gap: props.gap || \"1rem\",\r\n          padding: props.padding || \"3rem 0\",\r\n        }}\r\n      >\r\n        {children}\r\n      </div>\r\n    </section>\r\n  );\r\n};\r\n\r\nexport default GridLayout;\r\n","import React, { useRef, useEffect, useState } from \"react\";\r\nimport { FaLongArrowAltLeft, FaLongArrowAltRight } from \"react-icons/fa\";\r\nimport VideosPopUp from \"../videos-popup/videos-popup\";\r\nimport \"./videos-carousel.scss\";\r\n\r\nconst VideosCarousel = ({ actualVideo, setActualVideo, videos }) => {\r\n  const carouselRef = useRef();\r\n  const scrollStep = 200;\r\n  const [actualIndex, setActualIndex] = useState(0);\r\n  const [showPopUp, setShowPopUp] = useState(false);\r\n\r\n  const scrollCarousel = (direction) => {\r\n    const carousel = carouselRef.current;\r\n    const newActualIndex = videos\r\n      .map((video) => video.image)\r\n      .indexOf(actualVideo.image);\r\n    if (direction === \"left\") {\r\n      setActualIndex(newActualIndex - 1);\r\n      setActualIndex(newActualIndex === 0 ? 0 : newActualIndex - 1);\r\n      setActualVideo(\r\n        newActualIndex === 0 ? videos[0] : videos[newActualIndex - 1]\r\n      );\r\n      const valueToScroll =\r\n        carousel.scrollLeft - scrollStep < 0\r\n          ? 0\r\n          : carousel.scrollLeft - scrollStep;\r\n      carousel.scroll(valueToScroll, 0);\r\n    } else {\r\n      setActualIndex(\r\n        newActualIndex === videos.length - 1\r\n          ? videos.length - 1\r\n          : newActualIndex + 1\r\n      );\r\n      setActualVideo(\r\n        newActualIndex === videos.length - 1\r\n          ? videos[videos.length - 1]\r\n          : videos[newActualIndex + 1]\r\n      );\r\n      const valueToScroll =\r\n        carousel.scrollLeft + scrollStep >= carousel.scrollWidth\r\n          ? carousel.scrollWidth\r\n          : carousel.scrollLeft + scrollStep;\r\n      carousel.scroll(valueToScroll, 0);\r\n    }\r\n  };\r\n  const compClass = \"o-carousel-videos\";\r\n  const updateActualVideo = (video, index) => {\r\n    setActualVideo(video);\r\n    setActualIndex(index);\r\n  };\r\n  useEffect(() => {\r\n    setActualVideo(videos[0]);\r\n  }, []);\r\n\r\n  return (\r\n    <>\r\n      <VideosPopUp\r\n        setShowPopUp={setShowPopUp}\r\n        showPopUp={showPopUp}\r\n        actualVideo={actualVideo}\r\n      />\r\n      <div className={compClass}>\r\n        <div className={`${compClass}-left`}>\r\n          <span>\r\n            Videos\r\n            <br />\r\n            <b>más recientes</b>\r\n          </span>\r\n          <div className={`${compClass}__arrows`}>\r\n            <FaLongArrowAltLeft onClick={() => scrollCarousel(\"left\")} />\r\n            <FaLongArrowAltRight onClick={() => scrollCarousel(\"right\")} />\r\n          </div>\r\n        </div>\r\n        <div ref={carouselRef} className={`${compClass}-right`}>\r\n          {videos.map((video, index) => (\r\n            <div\r\n              key={index}\r\n              onClick={() => updateActualVideo(video, index)}\r\n              className={`${compClass}__iframeWrapper ${\r\n                index === actualIndex\r\n                  ? `${compClass}__iframeWrapper-active`\r\n                  : \"\"\r\n              } `}\r\n            >\r\n              <img\r\n                src={video?.imagen || video?.image}\r\n                alt={`${video?.imagen || video?.image}-${index}`}\r\n                onClick={() => setShowPopUp(true)}\r\n              />\r\n              <div className={`${compClass}__iframeWrapper__text`}>\r\n                <span\r\n                  dangerouslySetInnerHTML={{\r\n                    __html: video?.titulo || \"Titulo\",\r\n                  }}\r\n                  onClick={() => setShowPopUp(true)}\r\n                ></span>\r\n                <p>{video?.span || \"Span\"}</p>\r\n              </div>\r\n            </div>\r\n          ))}\r\n        </div>\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default VideosCarousel;\r\n","import React, { useState } from \"react\";\r\nimport { FaYoutube } from \"react-icons/fa\";\r\nimport Disclaimer from \"../components/molecules/disclaimer/disclaimer\";\r\nimport Paginator from \"../components/molecules/paginator/Paginator\";\r\nimport PreviewCard, {\r\n  PreviewCardProps,\r\n} from \"../components/molecules/PreviewCard/PreviewCard\";\r\nimport Suscribe from \"../components/molecules/suscribe/suscribe\";\r\nimport AsideBar from \"../components/organisms/aside/AsideBar\";\r\nimport GridLayout from \"../components/organisms/grid-layout/GridLayout\";\r\nimport Layout from \"../components/organisms/layout/layout\";\r\nimport VideosCarousel from \"../components/organisms/videos-carousel/videos-carousel\";\r\nimport VideosHeader from \"../components/organisms/videos-header/videos-header\";\r\nimport { adapterSuscribe } from \"../components/templates/library-components/adapters\";\r\nimport SEO from \"../shared/seo\";\r\nimport { dateToRelativeFormat } from \"../utils/dateToRelativeFormat\";\r\nimport \"./../styles/index.scss\";\r\n\r\nconst VideosTemplate = (props: any) => {\r\n  const pageData = props.pageContext.pageContent;\r\n  const { slug, numPages, currentPage, elements } = props.pageContext;\r\n  const videos = elements.map((node) => {\r\n    return {\r\n      imagen: node.referenciaInterna.referenciaCabecera.imagenHeader.file.url,\r\n      video: node.referenciaInterna.referenciaCabecera.redireccionBoton,\r\n      titulo: node.referenciaInterna.referenciaCabecera.tituloPrincipal,\r\n      span: node.referenciaInterna.referenciaCabecera.tituloSpan,\r\n      migaDePan: node.referenciaInterna.referenciaCabecera.migaDePan,\r\n      slug: node.slug,\r\n      fecha: node.createdAt,\r\n    };\r\n  });\r\n  const [actualVideo, setActualVideo] = useState(videos[0]);\r\n\r\n  return (\r\n    <Layout hideHeaderDesktop={false} hideHeaderMobile={false} isNotRoot={true}>\r\n      <SEO\r\n        title={pageData.metaTitulo || pageData.nombreCategoria}\r\n        slug={slug}\r\n        description={\r\n          pageData.metaDescripcion &&\r\n          pageData.metaDescripcion.json.content[0].content[0].value\r\n        }\r\n        image={\r\n          pageData.referenciaCabecera.imagenHeader &&\r\n          pageData.referenciaCabecera.imagenHeader.file.url\r\n        }\r\n        lang=\"es\"\r\n      />\r\n      <VideosHeader\r\n        actualVideo={actualVideo}\r\n        videos={videos}\r\n        setActualVideo={setActualVideo}\r\n      />\r\n      <VideosCarousel\r\n        videos={videos}\r\n        actualVideo={actualVideo}\r\n        setActualVideo={setActualVideo}\r\n      />\r\n      <GridLayout columns=\"2fr 1fr\" gap=\"2rem\" padding=\"1rem 0\">\r\n        <div>\r\n          {videos.map((element, i) => {\r\n            let process: PreviewCardProps = {\r\n              description: element.span,\r\n              imageUrl: element.imagen,\r\n              leftSub: \"Video\",\r\n              link: element.video?.replace(\"embed/\", \"watch?v=\"),\r\n              external: true,\r\n              rightSub: dateToRelativeFormat(element.fecha),\r\n              title: element.titulo,\r\n              icon: <FaYoutube />,\r\n            };\r\n            return <PreviewCard {...process} key={i} />;\r\n          })}\r\n        </div>\r\n        <AsideBar />\r\n      </GridLayout>\r\n      <Paginator slug={slug} quantity={numPages} currentPage={currentPage} />\r\n      <Suscribe {...adapterSuscribe()} />\r\n      <Disclaimer />\r\n    </Layout>\r\n  );\r\n};\r\n\r\nexport default VideosTemplate;\r\n","import React from \"react\";\r\nimport { Link } from \"gatsby\";\r\nimport \"./previewCard.scss\";\r\n\r\nexport type PreviewCardProps = {\r\n  link: string;\r\n  external?: boolean;\r\n  imageUrl: string;\r\n  leftSub?: string;\r\n  rightSub?: string;\r\n  title: string;\r\n  description?: string;\r\n  icon?: React.ReactNode;\r\n};\r\n\r\nconst PreviewCard = (props: PreviewCardProps) => {\r\n  const compClass = \"m-previewCard\";\r\n  const {\r\n    link,\r\n    external,\r\n    description,\r\n    imageUrl,\r\n    leftSub,\r\n    rightSub,\r\n    title,\r\n    icon,\r\n  } = props;\r\n  return (\r\n    <Link to={link || \"#\"} target={external ? \"_blank\" : \"self\"}>\r\n      <div className={`${compClass}__card`}>\r\n        <div className={`${compClass}__thumb`}>\r\n          <img src={imageUrl || \"\"} alt={title || \"\"} />\r\n        </div>\r\n        <div className={`${compClass}__content`}>\r\n          <div className={`${compClass}__meta`}>\r\n            <span className={`${compClass}__metaLeft`}>\r\n              {icon && icon} {leftSub}\r\n            </span>\r\n            <span className={`${compClass}__metaRight`}>{rightSub}</span>\r\n          </div>\r\n          <h2\r\n            className={`${compClass}__title`}\r\n            dangerouslySetInnerHTML={{ __html: title }}\r\n          ></h2>\r\n          <p className={`${compClass}__description`}>\r\n            {description || \"Ver más.\"}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </Link>\r\n  );\r\n};\r\n\r\nexport default PreviewCard;\r\n","import { Link } from \"gatsby\";\r\nimport React from \"react\";\r\nimport \"./paginator.scss\";\r\n\r\nexport interface IPaginator {\r\n  quantity: number;\r\n  currentPage: number;\r\n  slug: string;\r\n}\r\n\r\nconst Paginator = (props: IPaginator) => {\r\n  const { quantity, currentPage, slug } = props;\r\n  const compClass = \"m-paginator\";\r\n  const itemClass = (active) => {\r\n    return `${compClass}__item ${\r\n      active ? `${compClass}__item--active` : \"\"\r\n    }`.trim();\r\n  };\r\n  let next = currentPage + 1;\r\n  let back = currentPage - 1;\r\n  return (\r\n    <div className={compClass}>\r\n      <Link\r\n        to={`${currentPage === 2 ? slug : slug + back}`}\r\n        className={currentPage < 2 ? \"inactive\" : \"active\"}\r\n      >\r\n        Atrás\r\n      </Link>\r\n      <div className={`${compClass}__desktop`}>\r\n        {Array.from({ length: quantity }).map((_, index) => {\r\n          if (index < currentPage - 3 && index !== 0) return \".\";\r\n          if (index > currentPage + 2 && index !== quantity - 1) return \".\";\r\n          return (\r\n            <span\r\n              className={itemClass(index + 1 === currentPage ? true : false)}\r\n              key={index}\r\n            >\r\n              {index === 0 ? (\r\n                <Link to={slug}>{index + 1}</Link>\r\n              ) : (\r\n                <Link to={slug + (index + 1)}>{index + 1}</Link>\r\n              )}\r\n            </span>\r\n          );\r\n        })}\r\n      </div>\r\n      <div className={`${compClass}__mobile`}>\r\n        <span>{currentPage}</span>\r\n        <span>de</span>\r\n        <span>{quantity}</span>\r\n      </div>\r\n      <Link\r\n        to={`${slug + next}`}\r\n        className={currentPage < quantity ? \"active\" : \"inactive\"}\r\n      >\r\n        Siguiente\r\n      </Link>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Paginator;\r\n","export const shuffleArray = (array) => {\r\n  if(!array) return [];\r\n  let currentIndex = array.length,\r\n    randomIndex;\r\n  while (currentIndex != 0) {\r\n    randomIndex = Math.floor(Math.random() * currentIndex);\r\n    currentIndex--;\r\n    [array[currentIndex], array[randomIndex]] = [\r\n      array[randomIndex],\r\n      array[currentIndex],\r\n    ];\r\n  }\r\n  return array;\r\n};\r\n"],"sourceRoot":""}