@lanaco/lnc-react-ui/dist/BlogImagePathSection.cjs

React component library

"use strict";const t=require("react/jsx-runtime"),m=require("react"),l=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),b=require("./useDetectMobile-DYV6V1yw.cjs"),u=l.styled.div`
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
`,w=l.styled.div`
  width: 100%;
  height: 100%;

  & .wrapper__image {
    width: ${e=>e!=null&&e.imageWidth?`${e==null?void 0:e.imageWidth}px`:"100%"};
    height: ${e=>e!=null&&e.imageHeight?`${e==null?void 0:e.imageHeight}px`:"100%"};
    object-fit: cover;
  }
`,W=m.forwardRef((e,a)=>{const{image:r,altText:s,imageWidth:g,imageHeight:o,imageMobileWidth:n,imageMobileHeight:c,isMobile:i,onClick:h=()=>{}}=e,d=i?n:g,x=i?c:o;return t.jsx(w,{ref:a,imageWidth:d,imageHeight:x,className:"image-banner__wrapper",children:t.jsx("img",{loading:"lazy",src:r,alt:s,className:"wrapper__image",onClick:h})})}),M=m.forwardRef((e,a)=>{const{image:r,altText:s,imageWidth:g,imageHeight:o,imageMobileWidth:n,imageMobileHeight:c,onClick:i=()=>{}}=e,h=b.useDetectMobile();return t.jsx(u,{ref:a,children:t.jsx(W,{image:r,altText:s,imageWidth:g,imageHeight:o,imageMobileWidth:n,imageMobileHeight:c,isMobile:h,onClick:i})})});module.exports=M;