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

React component library

import { jsxs as r, jsx as i } from "react/jsx-runtime";
import { forwardRef as h } from "react";
import f from "./Button.js";
import { s as _ } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { n as c } from "./utils-BUdHa0nB.js";
import { d as p } from "./breakpoints-BubDitvo.js";
import { u as x } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const u = _.div`
  display: flex;
  align-items: center;

  border-radius: 0.75rem;
  border: 1px solid var(--gray-95008);

  background: ${(e) => e == null ? void 0 : e.backgroundColor};

  /* drop-shadow */
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px 0px rgba(0, 0, 0, 0.06);

  & .section__left {
    width: 100%;

    & .section__image {
      height: 100%;

      & img {
        height: 100%;
        max-height: 11.25rem;
        border-top-left-radius: 0.75rem;
        border-bottom-left-radius: 0.75rem;
      }
    }
  }

  & .section__right {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 2rem;
    padding: 2rem;

    & .section__text {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;

      & .section__title {
        ${c(3)}
        color: #000;
        font-weight: 600;
        font-size: 1.75rem;
        leading-trim: none;
        line-height: 2.25rem;
        letter-spacing: 0%;
        max-height: 7rem;
      }

      & .section__description {
        ${c(2)}
        color: var(--gray-600, #676e79);
        font-weight: 500;
        font-size: 0.875rem;
        leading-trim: none;
        line-height: 1.25rem;
        letter-spacing: 0;
        max-height: 2.5rem;
      }
    }

    & .section__action {
      font-weight: 500;
      font-size: 0.875rem;
      leading-trim: none;
      line-height: 1.25rem;
      letter-spacing: -0.0056rem;
      white-space: nowrap;

      background: var(--gray-950, #14161a);
      color: var(--white, #fff);

      &:hover {
        background: var(--gray-700, #4e555f);
      }

      &:focus {
        outline: none;
      }
    }
  }

  @media ${p("S")} {
    flex-direction: column;

    & .section__left {
      & .section__image {
        & img {
          width: 100%;
          height: 100%;
          max-height: 100%;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
      }
    }

    & .section__right {
      flex-direction: column;
    }
  }
`, $ = h(
  ({
    title: e,
    description: o,
    imageUrl: n,
    backgroundColor: m = "white",
    buttonText: a,
    buttonLink: s,
    onButtonAction: l = () => {
    }
  }, d) => {
    const g = x();
    return /* @__PURE__ */ r(u, { className: "lp-section lp-bnr-section lp-banner-next-section banner-next-section-lnc", ref: d, theme: g, backgroundColor: m, children: [
      /* @__PURE__ */ i("div", { className: "section__left", children: n && /* @__PURE__ */ i("div", { className: "section__image", children: /* @__PURE__ */ i("img", { src: n, alt: "Banner next image", loading: "lazy" }) }) }),
      /* @__PURE__ */ r("div", { className: "section__right", children: [
        /* @__PURE__ */ r("div", { className: "section__text", children: [
          e && /* @__PURE__ */ i("div", { className: "section__title", children: e }),
          o && /* @__PURE__ */ i("div", { className: "section__description", children: o })
        ] }),
        a && s && /* @__PURE__ */ i(
          f,
          {
            text: a,
            borderRadius: "curved",
            className: "section__action",
            size: "medium",
            onClick: (t) => {
              t == null || t.stopPropagation(), l(s);
            }
          }
        )
      ] })
    ] });
  }
);
export {
  $ as default
};