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

React component library

import { jsxs as f, jsx as e } from "react/jsx-runtime";
import { forwardRef as w } from "react";
import { n as T } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as k } from "./consts-C1uHV4xc.js";
import { u as L } from "./useDetectMobile-BC6EGaBc.js";
import { T as o } from "./index-DxdBg_r_.js";
const N = T.div`
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;

  & .text-item {
    max-height: ${(t) => t.height};
    min-height: ${(t) => t.height};
    max-width: 27rem;
    margin: auto;
  }

  & img {
    object-fit: cover;
    width: 100%;
    max-height: ${(t) => t.height};
    min-height: ${(t) => t.height};
  }

  & .img-1 {
    border-radius: 0.75rem 0.75rem 0.75rem 0;
  }

  & .img-2 {
    border-radius: 0.75rem 0rem 0.75rem 0.75rem;
  }

  @media (max-width: ${k + "px"}) {
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;

    & .img-item {
      width: 100%;
      min-height: 11.25rem;
      max-height: 11.25rem;
    }

    & .img1,
    .img2 {
      border-radius: 0.75rem;
    }

    & .text-item {
      min-height: unset;
      max-height: unset;
    }
  }
`, E = w((t, $) => {
  const {
    image1Url: s,
    image2Url: i,
    title1: a,
    title2: g,
    text1: n,
    text2: h,
    subtitle1: u,
    subtitle2: l,
    buttonText1: d,
    buttonText2: c,
    buttonLink1: x,
    buttonLink2: p,
    rowHeight: b = "12.65625rem",
    onButtonAction: m = () => {
    }
  } = t, r = L();
  return /* @__PURE__ */ f(N, { height: b, children: [
    /* @__PURE__ */ e(
      o,
      {
        className: "text-item",
        title: a,
        subtitle: u,
        description: n,
        buttonText: d,
        buttonLink: x,
        onButtonAction: m
      }
    ),
    /* @__PURE__ */ e("img", { className: "img-item img-1", src: s }),
    r !== !0 && /* @__PURE__ */ e("img", { className: "img-item img-2", src: i }),
    /* @__PURE__ */ e(
      o,
      {
        className: "text-item",
        title: g,
        subtitle: l,
        description: h,
        buttonText: c,
        buttonLink: p,
        onButtonAction: m
      }
    ),
    r === !0 && /* @__PURE__ */ e("img", { className: "img-item img-2", src: i })
  ] });
});
export {
  E as default
};