{"version":3,"file":"LensGlossary-Chunk-a6068baf690b7b80f417.js","mappings":"saAcA,MAsFA,EAtFqBA,IAAsD,IAArD,kBAAEC,EAAiB,aAAEC,EAAY,KAAEC,GAAaH,EACpE,MAAOI,EAAaC,IAAkBC,EAAAA,EAAAA,UAAS,GACzCC,GAAWC,EAAAA,EAAAA,QAAuB,MAcxC,OACEC,MAAAC,cAAA,WACE,oBAAmBP,GAAMQ,YACzBC,UAAU,oBACV,cAAY,uBAEZH,MAAAC,cAAA,OAAKE,UAAU,aACbH,MAAAC,cAAA,OAAKE,UAAU,YACbH,MAAAC,cAAA,MACEE,UAAU,oBACV,yBAAwBT,GAAMU,WAAWX,aACzC,cAAY,oCAEXA,IAGLO,MAAAC,cAAA,OACEE,UAAU,uDACV,yBAAwBT,GAAMU,WAAWZ,kBACzCa,KAAK,aAEFb,GAAmBc,QACpBd,EAAkBe,MAlCPC,CAACC,EAAcC,KAClC,MAAMC,EAAQF,EAAEG,KAAKC,cACfC,EAAQJ,EAAEE,KAAKC,cACrB,OAAIF,EAAQG,GACF,EAENH,EAAQG,EACH,EAEF,CAAC,IAyBqCC,KAAI,CAACC,EAAMC,KAC9C,MAAMC,EAAWD,IAAUtB,EAE3B,OACEK,MAAAC,cAAA,UACEI,KAAK,MACLc,KAAK,SACLC,QAASA,KACPxB,EAAeqB,GACfnB,EAASuB,SAASC,eAAe,CAAEC,SAAU,UAAW,EAE1DpB,UAAWqB,IACT,kJACAN,EACI,8BACA,6BAENO,IAAK,QAAQT,EAAKJ,OAClB,cAAa,2BAA2BK,KAExCjB,MAAAC,cAACyB,EAAAA,EAAG,CACFC,MAAI,EACJC,QAASC,EAAAA,EAAaC,OACtBC,KAAMf,EAAKJ,KACXT,UAAU,wIACV6B,WAAY,+BAA+Bf,MAE7CjB,MAAAC,cAAA,QACEE,UAAU,4BACV,cAAa,iCAAiCc,KAE7CD,EAAKiB,OAED,KAIjBjC,MAAAC,cAAA,OAAKiC,IAAKpC,EAAUK,UAAU,kBAC5BH,MAAAC,cAACkC,EAAAA,QAAQC,EAAA,CACPX,IAAK,aAAajC,EAAkBG,GAAciB,QAC9CpB,EAAkBG,OAIpB,C","sources":["webpack://nikon-client/./components/organisms/LensGlossary/LensGlossary.tsx"],"sourcesContent":["import Tag from '@atoms/Tag/Tag';\nimport TagTypesEnum from '@models/enums/TagTypesEnum';\nimport { ILensCard } from '@models/ILensCard';\nimport { IMeta } from '@models/IMeta';\nimport LensCard from '@molecules/LensCard/LensCard';\nimport classNames from 'classnames';\nimport { useRef, useState } from 'react';\n\ninterface Props {\n  readonly introduction: string;\n  readonly lensGlossaryCards: ILensCard[];\n  readonly meta: IMeta;\n}\n\nconst LensGlossary = ({ lensGlossaryCards, introduction, meta }: Props) => {\n  const [activeIndex, setActiveIndex] = useState(0);\n  const titleRef = useRef<HTMLDivElement>(null);\n\n  const compareCodes = (a: ILensCard, b: ILensCard) => {\n    const codeA = a.code.toLowerCase();\n    const codeB = b.code.toLowerCase();\n    if (codeA < codeB) {\n      return -1;\n    }\n    if (codeA > codeB) {\n      return 1;\n    }\n    return 0;\n  };\n\n  return (\n    <section\n      data-epi-block-id={meta?.contentLink}\n      className=\"component-padding\"\n      data-testid=\"CT-37-Lens-Glossary\"\n    >\n      <div className=\"container\">\n        <div className=\"xl:w-1/2\">\n          <h2\n            className=\"h6 text-black-100\"\n            data-epi-property-name={meta?.editHints?.introduction}\n            data-testid=\"CT-37-Lens-Glossary-Introduction\"\n          >\n            {introduction}\n          </h2>\n        </div>\n        <div\n          className=\"mt-13 grid grid-cols-5 gap-6 xl:grid-cols-4 xl:gap-4\"\n          data-epi-property-name={meta?.editHints?.lensGlossaryCards}\n          role=\"tablist\"\n        >\n          {!!lensGlossaryCards?.length &&\n            lensGlossaryCards.sort(compareCodes).map((item, index) => {\n              const isActive = index === activeIndex;\n\n              return (\n                <button\n                  role=\"tab\"\n                  type=\"button\"\n                  onClick={() => {\n                    setActiveIndex(index);\n                    titleRef.current?.scrollIntoView({ behavior: 'smooth' });\n                  }}\n                  className={classNames(\n                    'flex items-center rounded-md outline outline-2 hover:border-white hover:outline-yellow focus:border-white focus:outline-yellow xl:border xl:p-5',\n                    isActive\n                      ? 'border-white outline-yellow'\n                      : 'border-grey outline-white'\n                  )}\n                  key={`lens-${item.code}`}\n                  data-testid={`CT-37-Lens-Glossary-Tab-${index}`}\n                >\n                  <Tag\n                    span\n                    tagType={TagTypesEnum.Square}\n                    text={item.code}\n                    className=\"xl:max-[4rem] block w-full rounded-[3px] bg-black-100 px-1 py-1.5 text-center text-xs font-bold text-white xl:mr-5 xl:w-14 xl:text-xs\"\n                    dataTestId={`CT-37-Lens-Glossary-Tab-Tag-${index}`}\n                  />\n                  <span\n                    className=\"hidden text-left xl:block\"\n                    data-testid={`CT-37-Lens-Glossary-Tab-Title-${index}`}\n                  >\n                    {item.title}\n                  </span>\n                </button>\n              );\n            })}\n        </div>\n        <div ref={titleRef} className=\"pt-15 xl:pt-20\">\n          <LensCard\n            key={`lens-card-${lensGlossaryCards[activeIndex]!.code}`}\n            {...lensGlossaryCards[activeIndex]!}\n          />\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default LensGlossary;\n"],"names":["_ref","lensGlossaryCards","introduction","meta","activeIndex","setActiveIndex","useState","titleRef","useRef","React","createElement","contentLink","className","editHints","role","length","sort","compareCodes","a","b","codeA","code","toLowerCase","codeB","map","item","index","isActive","type","onClick","current","scrollIntoView","behavior","classNames","key","Tag","span","tagType","TagTypesEnum","Square","text","dataTestId","title","ref","LensCard","_extends"],"sourceRoot":""}