{
  version: 3,
  file: "component---gatsby-theme-husky-src-templates-article-list-article-list-tsx-5424341f011185395d99.js",
  mappings: "kOAuQA,UAvPoD,SAAC,GAO9C,IAAD,IANJA,KAMI,IALFC,YAAeC,EAKb,EALaA,KAAMC,EAKnB,EALmBA,IAAKC,EAKxB,EALwBA,GAAIC,EAK5B,EAL4BA,KAAMC,EAKlC,EALkCA,aAAcC,EAKhD,EALgDA,YAAaC,EAK7D,EAL6DA,SAC1CC,EAInB,EAJFC,WAAcC,MACWC,EAGvB,EAHFC,eAAkBF,MACRG,EAER,EAFFC,OAAUD,KAGGE,EAAiEb,EAAxEc,MAA2BC,EAA6Cf,EAAvDgB,SAAoCC,EAAmBjB,EAAhCkB,YAC1CC,GAAWC,EAAAA,EAAAA,eAEXC,EAAQZ,EAAaa,QAAO,SAACC,GAAD,OAAUA,EAAKtB,KAAOA,KAClDuB,GAAWC,EAAAA,EAAAA,IAAcnB,EAAOJ,EAAKD,IAE3C,OACE,gBAAC,IAAD,CAAQyB,mBAAiB,EAAOrB,SAAAA,GAC9B,gBAAC,IAAD,CAAWN,KAAAA,EAAMC,IAAAA,IACjB,gBAAC,IAAD,CACE2B,KAAK,UACLC,KAAMf,EACNhB,KAAM,CACJgC,UAAWhB,EACXiB,gBAAiBb,EACjBc,aAAchB,KAGlB,gBAAC,IAAD,CAAiBiB,UAAU,YAAYnC,KAAM,CAAEoC,aAAcd,EAASe,WACpE,uBAAKC,UAAS,8BAAgCjC,EAAK0B,MACjD,uBAAKO,UAAU,wBACb,gBAAC,IAAD,CACEC,UAAWjC,EACXkC,IAAKlC,EAAamC,QAClBH,UAAU,sBAEZ,gBAAC,IAAD,CACEC,UAAWhC,EACXiC,IAAKjC,EAAYkC,QACjBH,UAAU,sBAEZ,sBAAIA,UAAU,2CACXd,EAAMkB,KAAI,gBAAOC,EAAP,EAAGvC,GAASwC,EAAZ,EAAYA,IAAKC,EAAjB,EAAiBA,KAAad,EAA9B,EAAuBd,MAAvB,OACT,sBAAI6B,IAAKH,GACP,gBAAC,EAAAI,KAAD,CAAMC,GAAIJ,GACR,gBAAC,IAAD,CAAOL,UAAWM,EAAML,IAAKT,WAMvC,uBAAKO,UAAU,2CACb,uBAAKA,UAAU,qCACb,uBAAKA,UAAU,OACZX,EAASe,KAAI,gBAAOO,EAAP,EAAG7C,GAASwC,EAAZ,EAAYA,IAAKM,EAAjB,EAAiBA,UAAkBnB,EAAnC,EAA4Bd,MAA5B,OACZ,uBAAKqB,UAAU,6BAA6BQ,IAAKG,GAC/C,uBACEX,UAAS,6DAA+DjC,EAAK0B,MAE7E,gBAAC,EAAAgB,KAAD,CAAMC,GAAIJ,EAAKN,UAAU,WACvB,gBAAC,IAAD,CAAOC,UAAWW,EAAWV,IAAKU,EAAUT,WAE9C,sBAAIH,UAAU,QAAQP,GACtB,gBAAC,EAAAgB,KAAD,CACET,UAAU,gEACV,aAAYP,EACZiB,GAAIJ,GAEH9B,UAOb,uBAAKwB,UAAU,qCACb,uBAAKA,UAAU,OACb,uBAAKA,UAAU,OACb,gBAAC,KAAD,CACEa,YAAY,EACZC,gBAAc,EACdC,YAAU,EACVC,YAAY,EACZC,cAAY,GAEX5B,EAASe,KAAI,gBAAOO,EAAP,EAAG7C,GAASwC,EAAZ,EAAYA,IAAKM,EAAjB,EAAiBA,UAAkBnB,EAAnC,EAA4Bd,MAA5B,OACZ,uBAAKqB,UAAU,mBAAmBQ,IAAKG,GACrC,uBACEX,UAAS,6DAA+DjC,EAAK0B,MAE7E,gBAAC,EAAAgB,KAAD,CAAMC,GAAIJ,EAAKN,UAAU,WACvB,gBAAC,IAAD,CAAOC,UAAWW,EAAWV,IAAKU,EAAUT,WAE9C,sBAAIH,UAAU,QAAQP,GACtB,gBAAC,EAAAgB,KAAD,CACET,UAAU,gEACV,aAAYP,EACZiB,GAAIJ,GAEH9B",
  sources: [
  "webpack://husky-site/../gatsby-theme-husky/src/templates/ArticleList/ArticleList.tsx"
  ],
  sourcesContent: [
  "import React, { FC } from 'react';
  import { Carousel } from 'react-responsive-carousel';
  import { graphql, Link } from 'gatsby';
  import { useLocation } from '@reach/router';
  
  import Layout from 'layout/Layout';
  import Image from 'common/Image';
  import PageSchema from 'common/PageSchema';
  import Seo from 'common/Seo';
  import { TagEventTracker } from 'components/TagEventTracker';
  
  import { filterByTagId } from '../../utils/functions';
  import { ArticleListProps } from './models';
  
  import './ArticleList.scss';
  
  const ArticleList: FC<{ data: ArticleListProps }> = ({
    data: {
      articleList: { urls, seo, id, tags, imageDesktop, imageMobile, headband },
      allArticle: { nodes: items },
      allArticleList: { nodes: articleLists },
      global: { read },
    },
  }) => {
    const { title: seoTitle, keywords: seoKeywords, description: seoDescription } = seo;
    const location = useLocation();
  
    const lists = articleLists.filter((list) => list.id !== id);
    const articles = filterByTagId(items, tags.id);
  
    return (
      <Layout headerTransparent {...{ headband }}>
        <Seo {...{ urls, seo }} />
        <PageSchema
          type="WebPage"
          name={seoTitle}
          data={{
            metaTitle: seoTitle,
            metaDescription: seoDescription,
            metaKeywords: seoKeywords,
          }}
        />
        <TagEventTracker eventType="page_view" data={{ pageTemplate: location.pathname }}>
          <div className={`article-list article-list__${tags.name}`}>
            <div className="article-list__banner">
              <Image
                imageData={imageDesktop}
                alt={imageDesktop.altText}
                className="d-none d-md-block"
              />
              <Image
                imageData={imageMobile}
                alt={imageMobile.altText}
                className="d-block d-md-none"
              />
              <ul className="list-unstyled d-flex article-list__cats">
                {lists.map(({ id: lid, url, icon, title: name }) => (
                  <li key={lid}>
                    <Link to={url}>
                      <Image imageData={icon} alt={name} />
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
            <div className="article-list__listing mx-0 mx-md-4 pb-4">
              <div className="container-fluid d-none d-md-block">
                <div className="row">
                  {articles.map(({ id: aid, url, thumbnail, title: name }) => (
                    <div className="col-6 col-md-3 text-center" key={aid}>
                      <div
                        className={`article-list__article mb-4 mx-auto article-list__article__${tags.name}`}
                      >
                        <Link to={url} className="d-block">
                          <Image imageData={thumbnail} alt={thumbnail.altText} />
                        </Link>
                        <h4 className="pt-3">{name}</h4>
                        <Link
                          className="p-2 border-0 d-flex align-items-center justify-content-center"
                          aria-label={name}
                          to={url}
                        >
                          {read}
                        </Link>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
              <div className="container-fluid d-block d-md-none">
                <div className="row">
                  <div className="col">
                    <Carousel
                      showThumbs={false}
                      showIndicators
                      showArrows
                      showStatus={false}
                      infiniteLoop
                    >
                      {articles.map(({ id: aid, url, thumbnail, title: name }) => (
                        <div className="text-center pb-4" key={aid}>
                          <div
                            className={`article-list__article mb-4 mx-auto article-list__article__${tags.name}`}
                          >
                            <Link to={url} className="d-block">
                              <Image imageData={thumbnail} alt={thumbnail.altText} />
                            </Link>
                            <h4 className="pt-3">{name}</h4>
                            <Link
                              className="p-2 border-0 d-flex align-items-center justify-content-center"
                              aria-label={name}
                              to={url}
                            >
                              {read}
                            </Link>
                          </div>
                        </div>
                      ))}
                    </Carousel>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </TagEventTracker>
      </Layout>
    );
  };
  
  export const query = graphql`
    query ($url: String) {
      articleList(url: { eq: $url }) {
        urls {
          lang
          href
        }
        headband {
          cta {
            url
            name
          }
          imageDesktop {
            name
            childImageSharp {
              gatsbyImageData
            }
          }
          imageMobile {
            name
            childImageSharp {
              gatsbyImageData
            }
          }
        }
        seo {
          ...SEOStructureFragment
        }
        tags {
          id
          name
        }
        id
        imageDesktop {
          altText
          fallbackUrl
          desktop {
            childImageSharp {
              gatsbyImageData(placeholder: BLURRED, width: 1920)
            }
          }
          mobile {
            childImageSharp {
              gatsbyImageData(placeholder: BLURRED, width: 1920)
            }
          }
          tablet {
            childImageSharp {
              gatsbyImageData(placeholder: BLURRED, width: 1920)
            }
          }
        }
        imageMobile {
          altText
          fallbackUrl
          desktop {
            childImageSharp {
              gatsbyImageData(placeholder: BLURRED, width: 700)
            }
          }
          mobile {
            childImageSharp {
              gatsbyImageData(placeholder: BLURRED, width: 700)
            }
          }
          tablet {
            childImageSharp {
              gatsbyImageData(placeholder: BLURRED, width: 700)
            }
          }
        }
      }
      global {
        read
      }
      allArticleList {
        nodes {
          id
          title
          url
          icon {
            altText
            fallbackUrl
            desktop {
              childImageSharp {
                gatsbyImageData(placeholder: BLURRED, width: 100)
              }
            }
            mobile {
              childImageSharp {
                gatsbyImageData(placeholder: BLURRED, width: 100)
              }
            }
            tablet {
              childImageSharp {
                gatsbyImageData(placeholder: BLURRED, width: 100)
              }
            }
          }
        }
      }
      allArticle {
        nodes {
          id
          title
          url
          tags {
            id
            name
          }
          thumbnail {
            altText
            fallbackUrl
            desktop {
              childImageSharp {
                gatsbyImageData(placeholder: BLURRED, width: 220)
              }
            }
            mobile {
              childImageSharp {
                gatsbyImageData(placeholder: BLURRED, width: 220)
              }
            }
            tablet {
              childImageSharp {
                gatsbyImageData(placeholder: BLURRED, width: 220)
              }
            }
          }
        }
      }
    }
  `;
  
  export default ArticleList;
  "
  ],
  names: [
  "data",
  "articleList",
  "urls",
  "seo",
  "id",
  "tags",
  "imageDesktop",
  "imageMobile",
  "headband",
  "items",
  "allArticle",
  "nodes",
  "articleLists",
  "allArticleList",
  "read",
  "global",
  "seoTitle",
  "title",
  "seoKeywords",
  "keywords",
  "seoDescription",
  "description",
  "location",
  "useLocation",
  "lists",
  "filter",
  "list",
  "articles",
  "filterByTagId",
  "headerTransparent",
  "type",
  "name",
  "metaTitle",
  "metaDescription",
  "metaKeywords",
  "eventType",
  "pageTemplate",
  "pathname",
  "className",
  "imageData",
  "alt",
  "altText",
  "map",
  "lid",
  "url",
  "icon",
  "key",
  "Link",
  "to",
  "aid",
  "thumbnail",
  "showThumbs",
  "showIndicators",
  "showArrows",
  "showStatus",
  "infiniteLoop"
  ],
  sourceRoot: ""
  }