{"version":3,"file":"TabbedProductListing-Chunk-63b8110092680c94747d.js","mappings":"gOAgBA,MA8DA,EA9D6BA,IAAkD,IAAjD,SAAEC,EAAW,GAAE,MAAEC,EAAK,KAAEC,EAAI,MAAEC,GAAcJ,EACxE,MAAOK,EAAgBC,IAAqBC,EAAAA,EAAAA,UAAS,GAC/CC,EAAYN,GAAOO,KAAKC,GAAQA,EAAIN,SAAU,GAC9CO,EACJC,MAAAC,cAACC,EAAAA,EAAyB,CAACC,UAAW,KACpCH,MAAAC,cAAA,OAAKG,UAAU,gBACZR,EAAUC,KAAI,CAACQ,EAAUC,KACxB,MAAMC,EAAWD,IAAUb,EAE3B,OACEO,MAAAC,cAACO,EAAAA,EAAG,CACFC,IAAKJ,EACLK,KAAML,EACNM,QAASJ,EAAWK,EAAAA,EAAaC,UAAYD,EAAAA,EAAaE,QAC1DC,eAAgBR,EAChBS,SAAUT,EACVU,QAASA,IAAMvB,EAAkBY,IACjC,MAOZ,OACEN,MAAAC,cAAA,WACEG,UAAU,8EACVc,GAAI,KAAK7B,KAERG,GAASQ,MAAAC,cAAA,MAAIG,UAAU,6BAA6BZ,GAErDQ,MAAAC,cAAA,OAAKG,UAAU,iCAAiCL,KAE7CT,GAAO6B,QACRnB,MAAAC,cAACmB,EAAAA,EAAe,KACdpB,MAAAC,cAACoB,EAAAA,EAAOC,IAAG,CACTC,QAAS,CAAEC,QAAS,GACpBC,QAAS,CAAED,QAAS,GACpBE,KAAM,CACJF,QAAS,EACTG,WAAY,CACVC,SAAU,IAGdnB,IAAK,GAAGb,EAAUH,MAAmBA,KAErCO,MAAAC,cAAC4B,EAAAA,QAAe,CACdC,UAAQ,EACRvC,KAAMA,GAAQ,CAAC,EACfD,MAAOA,EAAMG,GAAiBH,MAC9ByC,eAAe,0BACfC,sBAAsB,gCACtBC,oBAAkB,EAClBzC,MAAOO,MAKP,C","sources":["webpack://nikon-client/./components/organisms/TabbedProductListing/TabbedProductListing.tsx"],"sourcesContent":["import ShadowContainerHorizontal from '@atoms/ShadowContainerHorizontal/ShadowContainerHorizontal';\nimport Tag from '@atoms/Tag/Tag';\nimport TagTypesEnum from '@models/enums/TagTypesEnum';\nimport { IMeta } from '@models/IMeta';\nimport ITabbedProductListingItem from '@models/ITabbedProductListingItem';\nimport ProductCarousel from '@organisms/ProductCarousel/ProductCarousel';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { useState } from 'react';\n\ninterface Props {\n  readonly anchorId?: string;\n  readonly items: ITabbedProductListingItem[];\n  readonly meta?: IMeta;\n  readonly title: string;\n}\n\nconst TabbedProductListing = ({ anchorId = '', items, meta, title }: Props) => {\n  const [activeTabIndex, setActiveTabIndex] = useState(0);\n  const tabTitles = items?.map((tab) => tab.title) ?? [];\n  const tabs = (\n    <ShadowContainerHorizontal threshold={0.01}>\n      <div className=\"flex gap-x-5\">\n        {tabTitles.map((tabTitle, index) => {\n          const isActive = index === activeTabIndex;\n\n          return (\n            <Tag\n              key={tabTitle}\n              text={tabTitle}\n              tagType={isActive ? TagTypesEnum.Secondary : TagTypesEnum.Primary}\n              pointerStates={!isActive}\n              disabled={isActive}\n              onClick={() => setActiveTabIndex(index)}\n            />\n          );\n        })}\n      </div>\n    </ShadowContainerHorizontal>\n  );\n\n  return (\n    <section\n      className=\"component-padding bg-white text-black-100 dark:bg-black-100 dark:text-white\"\n      id={`a-${anchorId}`}\n    >\n      {title && <h2 className=\"container mb-7.5 lg:mb-10\">{title}</h2>}\n\n      <div className=\"mb-7.5 md:container xl:hidden\">{tabs}</div>\n\n      {!!items?.length && (\n        <AnimatePresence>\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{\n              opacity: 0,\n              transition: {\n                duration: 0,\n              },\n            }}\n            key={`${tabTitles[activeTabIndex]}-${activeTabIndex}`}\n          >\n            <ProductCarousel\n              embedded\n              meta={meta ?? {}}\n              items={items[activeTabIndex]!.items}\n              titleClassName=\"min-w-0 hidden xl:block\"\n              titleWrapperClassName=\"xl:min-h-[2.5rem] xl:gap-x-20\"\n              hideHeaderOnMobile\n              title={tabs}\n            />\n          </motion.div>\n        </AnimatePresence>\n      )}\n    </section>\n  );\n};\n\nexport default TabbedProductListing;\n"],"names":["_ref","anchorId","items","meta","title","activeTabIndex","setActiveTabIndex","useState","tabTitles","map","tab","tabs","React","createElement","ShadowContainerHorizontal","threshold","className","tabTitle","index","isActive","Tag","key","text","tagType","TagTypesEnum","Secondary","Primary","pointerStates","disabled","onClick","id","length","AnimatePresence","motion","div","initial","opacity","animate","exit","transition","duration","ProductCarousel","embedded","titleClassName","titleWrapperClassName","hideHeaderOnMobile"],"sourceRoot":""}