{"version":3,"file":"components-ui-builder-icon-cloud-04f9b9b96ea5a1cd45c5.js","mappings":"wJAyHA,UAxGkB,SAAHA,GAAgD,IAADC,EAAAD,EAAzCE,gBAAAA,OAAe,IAAAD,EAAG,GAAEA,EAAEE,EAAKH,EAALG,MACnCC,EAAaD,EAAME,MAAM,EAAGF,EAAMG,OAAS,GA6FjD,OACEC,EAAAA,cAAA,OAAKC,UAAU,wCAAwCC,MAAO,CAAEP,gBAAAA,IAC9DK,EAAAA,cAAA,OAAKC,UAAU,6EA/CVJ,EAAWM,KAAI,SAACC,EAAWC,GAAS,OACzCL,EAAAA,cAAA,OAAKE,MAAO,CAAEI,UAAW,QAAUL,UAAS,2CAA8CM,IAAKF,GAC7FL,EAAAA,cAACQ,EAAAA,EAAQ,CACPP,UAAU,iBACVQ,IAAKL,EAAKM,iBACVC,IAAKP,EAAKO,IACVC,MAAO,CAAC,IAAK,KACbV,MAAO,CACLW,OAAQ,OACRP,UAAW,OACXQ,SAAU,UA8Bdd,EAAAA,cAAA,KAAGC,UAAU,wDAAuD,IAAEG,EAAKW,IAAI,KAC3E,KAONf,EAAAA,cAAA,OAAKC,UAAU,wGA7FVL,EAAMO,KAAI,SAACC,EAAMC,GAAC,OACvBL,EAAAA,cAAA,OAAKE,MAAO,CAAEI,UAAW,QAAUL,UAAS,0CAA6CM,IAAKF,GAC5FL,EAAAA,cAACQ,EAAAA,EAAQ,CACPP,UAAU,iBACVQ,IAAKL,EAAKM,iBACVC,IAAKP,EAAKO,IACVC,MAAO,CAAC,IAAK,KACbV,MAAO,CACLW,OAAQ,OACRP,UAAW,OACXQ,SAAU,UA8Bdd,EAAAA,cAAA,KAAGC,UAAU,2DAA0D,IAAEG,EAAKW,IAAI,KAC9E,KAyDZ,C","sources":["webpack://www-differentdog-com/./src/components/ui-builder/icon-cloud/index.tsx"],"sourcesContent":["import CdnImage from 'components/util/CdnImage'\n// import CloudinaryImage from 'components/util/CloudinaryImage'\nimport React, { useEffect } from 'react'\n\ninterface Icon {\n  imgSrc: any\n  alt: string\n  tag: string\n  iconImage: any\n  builderIconImage: any\n}\n\ninterface Props {\n  backgroundColor: string\n  icons: Icon[]\n}\n\nconst IconCloud = ({ backgroundColor = '', icons }: Props) => {\n  const threeIcons = icons.slice(0, icons.length - 1)\n\n  const getFourIcons = () => {\n    return icons.map((icon, i) => (\n      <div style={{ maxHeight: '62px' }} className={`mt-4 flex w-1/4 flex-row justify-center`} key={i}>\n        <CdnImage\n          className=\"object-contain\"\n          url={icon.builderIconImage}\n          alt={icon.alt}\n          steps={[150, 205]}\n          style={{\n            height: '72px',\n            maxHeight: '100%',\n            maxWidth: '100%'\n          }}\n        />\n\n        {/* {icon.builderIconImage ? (\n          <CdnImage\n            className=\"object-contain\"\n            url={icon.builderIconImage}\n            alt={icon.alt}\n            steps={[150, 205]}\n            style={{\n              height: '72px',\n              maxHeight: '100%',\n              maxWidth: '100%'\n            }}\n          />\n        ) : (\n          <CloudinaryImage\n            className=\"object-contain\"\n            publicId={icon?.iconImage?.public_id}\n            alt={icon.alt}\n            steps={[150, 205]}\n            autoFormat={false}\n            style={{\n              height: '72px',\n              maxHeight: '100%',\n              maxWidth: '100%'\n            }}\n          />\n        )} */}\n        <p className=\"ml-2 flex items-center justify-center whitespace-nowrap\"> {icon.tag} </p>\n      </div>\n    ))\n  }\n  const getThreeIcons = () => {\n    return threeIcons.map((icon: any, i: number) => (\n      <div style={{ maxHeight: '62px' }} className={`mt-4 flex w-1/4 flex-col justify-center `} key={i}>\n        <CdnImage\n          className=\"object-contain\"\n          url={icon.builderIconImage}\n          alt={icon.alt}\n          steps={[150, 205]}\n          style={{\n            height: '72px',\n            maxHeight: '100%',\n            maxWidth: '100%'\n          }}\n        />\n\n        {/* {icon.builderIconImage ? (\n          <CdnImage\n            className=\"object-contain\"\n            url={icon.builderIconImage}\n            alt={icon.alt}\n            steps={[150, 205]}\n            style={{\n              height: '72px',\n              maxHeight: '100%',\n              maxWidth: '100%'\n            }}\n          />\n        ) : (\n          <CloudinaryImage\n            className=\"object-contain\"\n            publicId={icon?.iconImage?.public_id}\n            steps={[150, 205]}\n            alt={icon.alt}\n            autoFormat={false}\n            style={{\n              height: '72px',\n              maxHeight: '100%',\n              maxWidth: '100%'\n            }}\n          />\n        )} */}\n        <p className=\"flex items-center justify-center text-center text-sm\"> {icon.tag} </p>\n      </div>\n    ))\n  }\n\n  return (\n    <div className=\"-mb-2 bg-contain pb-6 lg:mb-0 lg:pb-0\" style={{ backgroundColor }}>\n      <div className=\"mx-auto -mt-4 flex w-11/12 flex-row justify-center gap-x-8 py-6 lg:hidden\">{getThreeIcons()}</div>\n      <div className=\"mx-auto -mb-4 -mt-8 hidden w-11/12 2xl:w-4/5 flex-row justify-center gap-x-1 lg:flex lg:pt-4 lg:pb-8\">\n        {getFourIcons()}\n      </div>\n    </div>\n  )\n}\n\nexport default IconCloud\n"],"names":["_ref","_ref$backgroundColor","backgroundColor","icons","threeIcons","slice","length","React","className","style","map","icon","i","maxHeight","key","CdnImage","url","builderIconImage","alt","steps","height","maxWidth","tag"],"sourceRoot":""}