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

React component library

import { jsx as t } from "react/jsx-runtime";
import { forwardRef as l } from "react";
import { s as c } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { u as d } from "./useDetectMobile-B0Jog4jQ.js";
const f = c.div`
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
`, b = c.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 = l((e, a) => {
  const {
    image: g,
    altText: o,
    imageWidth: r,
    imageHeight: m,
    imageMobileWidth: h,
    imageMobileHeight: n,
    isMobile: i,
    onClick: s = () => {
    }
  } = e;
  return /* @__PURE__ */ t(
    b,
    {
      ref: a,
      imageWidth: i ? h : r,
      imageHeight: i ? n : m,
      className: "image-banner__wrapper",
      children: /* @__PURE__ */ t(
        "img",
        {
          loading: "lazy",
          src: g,
          alt: o,
          className: "wrapper__image",
          onClick: s
        }
      )
    }
  );
}), $ = l((e, a) => {
  const {
    image: g,
    altText: o,
    imageWidth: r,
    imageHeight: m,
    imageMobileWidth: h,
    imageMobileHeight: n,
    onClick: i = () => {
    }
  } = e, s = d();
  return /* @__PURE__ */ t(f, { ref: a, children: /* @__PURE__ */ t(
    w,
    {
      image: g,
      altText: o,
      imageWidth: r,
      imageHeight: m,
      imageMobileWidth: h,
      imageMobileHeight: n,
      isMobile: s,
      onClick: i
    }
  ) });
});
export {
  $ as default
};