{"version":3,"file":"index-D5sMqg8h.js","sources":["../../../app/javascript/src/explore/elements/ProductHeader/elements/Supplemental/index.tsx","../../../app/javascript/src/explore/elements/ProductHeader/index.tsx"],"sourcesContent":["import React from 'react';\nimport cls from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faHatChef } from '@fortawesome/pro-regular-svg-icons';\n\nimport { ExpandableContainer } from 'src/explore/elements/ExpandableContainer';\nimport { LazyImgix } from 'src/explore/elements/LazyImgix';\nimport { useRoutes } from 'src/explore/hooks/useRoutes';\n\nimport styles from './index.module.sass';\n\ninterface SupplementalProps {\n  hideMerchantMobile?: boolean;\n  image?: string;\n  linkHeader?: boolean;\n  merchant: string;\n  merchantPermalink?: string;\n  text?: string;\n}\n\nexport const Supplemental = ({\n  hideMerchantMobile,\n  image,\n  linkHeader = true,\n  merchant,\n  merchantPermalink,\n  text,\n}: SupplementalProps ) => {\n  const routes = useRoutes();\n  return (\n    <>\n      <a\n        href={linkHeader ? routes.merchant( merchantPermalink ) : undefined}\n        className=\"text-decoration-none spec__merchant-link\"\n      >\n        <div className=\"d-flex align-items-center\">\n          {image ? (\n            <LazyImgix\n              alt={merchant}\n              className={cls( styles.image, 'flex-shrink-0 align-self-start rounded-circle', {\n                'd-none d-md-block d-print-block': hideMerchantMobile,\n              })}\n              imgixParams={{ ar: '1:1' }}\n              sizes=\"192px\"\n              src={image}\n            />\n          ) : (\n            <figure\n              className={cls(\n                styles.image,\n                'flex-shrink-0 align-self-start justify-content-center align-items-center rounded-circle bg-light',\n                {\n                  'd-flex': !hideMerchantMobile,\n                  'd-none d-md-flex d-print-flex': hideMerchantMobile,\n                }\n              )}\n            >\n              <FontAwesomeIcon className={`${styles.chef} text-dark fs-10`} icon={faHatChef} />\n            </figure>\n          )}\n\n          <div className=\"ml-4\">\n            <h2\n              className={cls( styles.merchant, styles.link, 'fs-5 fs-md-8 text-uppercase', {\n                'd-none d-md-block d-print-block': hideMerchantMobile,\n              })}\n            >\n              {merchant}\n            </h2>\n            {text && (\n              <ExpandableContainer className=\"d-none d-md-block mt-2\" initialHeight={72}>\n                <p className=\"mb-0 text-dark fs-5\">{text}</p>\n              </ExpandableContainer>\n            )}\n          </div>\n        </div>\n      </a>\n\n      {text && (\n        <ExpandableContainer\n          className={cls( 'd-md-none d-print-none', {\n            'mt-2': hideMerchantMobile,\n            'mt-4': !hideMerchantMobile,\n          })}\n          initialHeight={63}\n        >\n          <p className=\"mb-0 text-dark fs-4\">{text}</p>\n        </ExpandableContainer>\n      )}\n    </>\n  );\n};\n","import React from 'react';\nimport cls from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faVideo } from '@fortawesome/pro-regular-svg-icons';\n\nimport { useRoutes } from 'src/explore/hooks/useRoutes';\nimport { Supplemental } from './elements/Supplemental';\n\nimport styles from './index.module.sass';\n\ninterface ProductHeaderProps {\n  foodMakerImage?: string;\n  hideMerchantMobile?: boolean;\n  live?: boolean;\n  linkHeader?: boolean;\n  merchant: string;\n  merchantPermalink: string;\n  productImage?: string;\n  productName: string;\n  productPermalink: string;\n  text?: string;\n}\n\nexport const ProductHeader = ({\n  foodMakerImage,\n  hideMerchantMobile,\n  live,\n  linkHeader = true,\n  merchant,\n  merchantPermalink,\n  productImage,\n  productName,\n  productPermalink,\n  text,\n}: ProductHeaderProps ) => {\n  const routes = useRoutes();\n\n  return (\n    <header className=\"row\">\n      {productImage && (\n        <div className=\"col d-md-none d-print-none\">\n          <img\n            alt={productName}\n            className=\"d-md-none w-100 h-auto\"\n            sizes=\"100vw\"\n            src={productImage}\n          />\n        </div>\n      )}\n\n      <div className={`${styles.left} col-md-6 col-lg-7 col-xl-6 mt-3 my-md-2`}>\n        <h2 className={`${styles.overline} d-flex align-items-center fs-4 fs-lg-5`}>\n          {live ? (\n            <>\n              <FontAwesomeIcon className=\"mr-2 mr-lg-1 fs-6 fs-md-7\" icon={faVideo} />\n              <span>Goldbelly LIVE!</span>\n            </>\n          ) : (\n            <>\n              <span className=\"d-md-none d-print-none\">{merchant}</span>\n              <span className=\"d-none d-md-inline d-print-inline text-uppercase\">\n                Instructions For\n              </span>\n            </>\n          )}\n        </h2>\n        <h1 className={`${styles.headline} mt-1 mt-md-4 fs-8 fs-md-10 fs-lg-12 text-uppercase`}>\n          <a\n            href={\n              linkHeader\n                ? routes.product(\n                    merchantPermalink.replace( '/restaurants', '' ).replace( '/', '' ),\n                    productPermalink\n                  )\n                : undefined\n            }\n            className=\"text-decoration-none spec__product-link\"\n          >\n            {productName}\n          </a>\n        </h1>\n      </div>\n\n      <div\n        className={cls( styles.right, 'col-md-6 col-lg-5 offset-xl-1 my-md-2', {\n          'mt-6': !hideMerchantMobile,\n        })}\n      >\n        <strong\n          className={cls( styles.from, 'mb-2 mb-md-4 text-dark fs-4 fs-lg-5 text-uppercase', {\n            'd-block': !hideMerchantMobile,\n            'd-none d-md-block d-print-block': hideMerchantMobile,\n          })}\n        >\n          From\n        </strong>\n        <Supplemental\n          hideMerchantMobile={hideMerchantMobile}\n          image={foodMakerImage}\n          linkHeader={linkHeader}\n          merchant={merchant}\n          merchantPermalink={merchantPermalink}\n          text={text}\n        />\n      </div>\n    </header>\n  );\n};\n"],"names":["Supplemental","hideMerchantMobile","image","linkHeader","merchant","merchantPermalink","text","routes","useRoutes","React","LazyImgix","cls","styles","FontAwesomeIcon","faHatChef","ExpandableContainer","ProductHeader","foodMakerImage","live","productImage","productName","productPermalink","faVideo"],"mappings":"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"}