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

React component library

"use strict";const e=require("react/jsx-runtime"),v=require("react"),x=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),h=require("./breakpoints-CcVm-gVm.cjs"),N=require("./useDetectMobile-DYV6V1yw.cjs"),u=require("./index-DgUNsgfF.cjs"),L=x.styled.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;
    }
  }
`,T=x.styled.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 ${h.down("M")} {
    padding: 0;

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

  @media ${h.down("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;
    }
  }
`,q=()=>e.jsxs("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:[e.jsx("line",{x1:"4",y1:"12",x2:"20",y2:"12"}),e.jsx("polyline",{points:"13 5 20 12 13 19"})]}),M=v.forwardRef((t,o)=>{const{image1Url:a,image2Url:s,title1:l,title2:d,text1:p,text2:f,subtitle1:w,subtitle2:k,buttonText1:c,buttonText2:m,buttonLink1:g,buttonLink2:b,rowHeight:_="12.65625rem",onButtonAction:r=()=>{}}=t;if(N.useDetectMobile()===!0){const j=[{image:a,title:l,buttonText:c,buttonLink:g},{image:s,title:d,buttonText:m,buttonLink:b}];return e.jsx(L,{className:"lp-section lp-bnr-section lp-banner-section-grid banner-section-grid-lnc banner-section-grid-mobile",ref:o,children:j.map((i,y)=>e.jsxs("a",{className:"banner-grid-card",role:"button",tabIndex:0,onClick:()=>r(i.buttonLink),onKeyDown:n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),r(i.buttonLink))},children:[e.jsx("img",{className:"banner-grid-card__img",src:i.image,alt:i.title||""}),e.jsxs("div",{className:"banner-grid-card__overlay",children:[i.title&&e.jsx("div",{className:"banner-grid-card__title",children:i.title}),i.buttonText&&e.jsxs("div",{className:"banner-grid-card__action",children:[e.jsx("span",{children:i.buttonText}),e.jsx(q,{})]})]})]},y))})}return e.jsxs(T,{className:"lp-section lp-bnr-section lp-banner-section-grid banner-section-grid-lnc",ref:o,height:_,children:[e.jsx(u.TextBlockV1,{className:"text-item",title:l,subtitle:w,description:p,buttonText:c,buttonLink:g,onButtonAction:r}),e.jsx("img",{className:"img-item img-1",src:a}),e.jsx("img",{className:"img-item img-2",src:s}),e.jsx(u.TextBlockV1,{className:"text-item",title:d,subtitle:k,description:f,buttonText:m,buttonLink:b,onButtonAction:r})]})});module.exports=M;