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

React component library

import { jsx as e, jsxs as r } from "react/jsx-runtime";
import { forwardRef as N } from "react";
import { s as f } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as p } from "./breakpoints-BubDitvo.js";
import { u as L } from "./useDetectMobile-B0Jog4jQ.js";
import { T as u } from "./index-DdfMcHz0.js";
const T = f.div`
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;

  &::-webkit-scrollbar {
    display: none;
  }

  & .banner-grid-card {
    position: relative;
    flex: 0 0 auto;
    width: 78%;
    max-width: 22rem;
    aspect-ratio: 4 / 3;
    border-radius: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    display: block;
  }

  & .banner-grid-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  & .banner-grid-card__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.75) 0%,
      rgba(0, 0, 0, 0.35) 45%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  & .banner-grid-card__title {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.375rem;
  }

  & .banner-grid-card__action {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;

    & .banner-grid-card__arrow {
      flex: 0 0 auto;
    }
  }
`, $ = f.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 ${p("M")} {
    padding: 0;

    & .text-item {
      padding: 1rem;
    }
  }

  @media ${p("S")} {
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;

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

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

    & .text-item {
      min-height: unset;
      max-height: unset;
    }
  }
`, j = () => /* @__PURE__ */ r(
  "svg",
  {
    className: "banner-grid-card__arrow",
    width: "16",
    height: "16",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: "2",
    strokeLinecap: "round",
    strokeLinejoin: "round",
    "aria-hidden": "true",
    children: [
      /* @__PURE__ */ e("line", { x1: "4", y1: "12", x2: "20", y2: "12" }),
      /* @__PURE__ */ e("polyline", { points: "13 5 20 12 13 19" })
    ]
  }
), G = N((t, a) => {
  const {
    image1Url: l,
    image2Url: m,
    title1: s,
    title2: d,
    text1: x,
    text2: w,
    subtitle1: k,
    subtitle2: _,
    buttonText1: c,
    buttonText2: g,
    buttonLink1: b,
    buttonLink2: h,
    rowHeight: v = "12.65625rem",
    onButtonAction: n = () => {
    }
  } = t;
  return L() === !0 ? /* @__PURE__ */ e(
    T,
    {
      className: "lp-section lp-bnr-section lp-banner-section-grid banner-section-grid-lnc banner-section-grid-mobile",
      ref: a,
      children: [
        {
          image: l,
          title: s,
          buttonText: c,
          buttonLink: b
        },
        {
          image: m,
          title: d,
          buttonText: g,
          buttonLink: h
        }
      ].map((i, y) => /* @__PURE__ */ r(
        "a",
        {
          className: "banner-grid-card",
          role: "button",
          tabIndex: 0,
          onClick: () => n(i.buttonLink),
          onKeyDown: (o) => {
            (o.key === "Enter" || o.key === " ") && (o.preventDefault(), n(i.buttonLink));
          },
          children: [
            /* @__PURE__ */ e(
              "img",
              {
                className: "banner-grid-card__img",
                src: i.image,
                alt: i.title || ""
              }
            ),
            /* @__PURE__ */ r("div", { className: "banner-grid-card__overlay", children: [
              i.title && /* @__PURE__ */ e("div", { className: "banner-grid-card__title", children: i.title }),
              i.buttonText && /* @__PURE__ */ r("div", { className: "banner-grid-card__action", children: [
                /* @__PURE__ */ e("span", { children: i.buttonText }),
                /* @__PURE__ */ e(j, {})
              ] })
            ] })
          ]
        },
        y
      ))
    }
  ) : /* @__PURE__ */ r(
    $,
    {
      className: "lp-section lp-bnr-section lp-banner-section-grid banner-section-grid-lnc",
      ref: a,
      height: v,
      children: [
        /* @__PURE__ */ e(
          u,
          {
            className: "text-item",
            title: s,
            subtitle: k,
            description: x,
            buttonText: c,
            buttonLink: b,
            onButtonAction: n
          }
        ),
        /* @__PURE__ */ e("img", { className: "img-item img-1", src: l }),
        /* @__PURE__ */ e("img", { className: "img-item img-2", src: m }),
        /* @__PURE__ */ e(
          u,
          {
            className: "text-item",
            title: d,
            subtitle: _,
            description: w,
            buttonText: g,
            buttonLink: h,
            onButtonAction: n
          }
        )
      ]
    }
  );
});
export {
  G as default
};