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

React component library

"use strict";const e=require("react/jsx-runtime"),c=require("react"),u=require("./Icon.cjs"),f=require("./Popover.cjs"),v=require("./PopoverTrigger.cjs"),y=require("./PopoverContent.cjs"),b=require("./useDetectMobile-DYV6V1yw.cjs"),d=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),j=require("./breakpoints-CcVm-gVm.cjs"),l=require("./utils-BK6B_Y9X.cjs"),w=d.styled.div`
  display: flex;
  flex-direction: column;
  gap: 3rem;
  border-radius: 1.25rem;
  padding: 2rem;
  background: #f4f6fb;

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

    & .section__title {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      gap: 1rem;

      & span {
        font-weight: 600;
        font-size: 1.5rem;
        leading-trim: none;
        line-height: 2rem;
        letter-spacing: 0%;
        text-align: center;
        color: var(--gray-900, #0c1520);
        ${l.truncateText()}
      }

      &::after {
        content: "";
        flex: 1;
        height: 0.0625rem;
        background-color: var(--gray-200, #e4e9f0);
      }

      &::before {
        content: "";
        flex: 1;
        height: 0.0625rem;
        background-color: var(--gray-200, #e4e9f0);
      }
    }

    & .section__description {
      font-weight: 400;
      font-size: 0.875rem;
      leading-trim: none;
      line-height: 1.25rem;
      letter-spacing: 0.0156rem;
      text-align: center;
      color: var(--gray-700, #424b56);
      ${l.truncateTextInRows(2)}
    }
  }

  & .section__items {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;

    & .section__item {
      width: 100%;
      height: 100%;
      max-width: 16.25rem;
      max-height: 7.5rem;
      border-radius: 0.5rem;
      border: 1px solid var(--gray-200, #e4e9f0);
      overflow: hidden;

      & img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        filter: grayscale(100%);
        transition: filter 0.3s ease;

        &:hover {
          filter: grayscale(0%);
        }
      }

      &:hover {
        cursor: pointer;
      }
    }
  }

  @media ${j.down("S")} {
    padding: 1rem;

    & .section__text {
      & .section__title {
        font-size: 1.25rem;
        line-height: 1.75rem;
      }
    }

    & .section__items {
      display: grid;
      grid-template-columns: ${()=>"repeat(2, minmax(0, 1fr))"};
      justify-items: center;
      gap: 1rem;

      & .section__trigger {
        width: 100% !important;
      }

      & .section__item {
        max-width: 100%;
        max-height: 5rem;
      }
    }
  }
`,q=d.styled.div`
  width: 100%;
  height: 100%;
  max-width: 16.25rem;
  max-height: 12.5rem;
  border-radius: 0.75rem;
  padding: 1.25rem;
  background: var(--gray-200, #e4e9f0);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);

  font-weight: 400;
  font-size: 0.75rem;
  leading-trim: none;
  line-height: 1rem;
  letter-spacing: 0.025rem;
  color: var(--gray-900, #0c1520);
`,N=c.forwardRef(({icon:i,title:o,description:s,items:n,onSelectCard:g=()=>{},onTapCard:h=()=>{}})=>{const p=b.useDetectMobile(),[m,a]=c.useState(null),x=r=>{a(r)},_=()=>{a(null)};return e.jsxs(w,{className:"lp-section lp-partner-cards-section",children:[e.jsxs("div",{className:"section__text",children:[i&&e.jsx(u,{icon:i,sizeInUnits:"2.5rem",color:"warning",className:"section__icon"}),o&&e.jsx("div",{className:"section__title",children:e.jsx("span",{children:o})}),s&&e.jsx("div",{className:"section__description",children:s})]}),n&&(n==null?void 0:n.length)>0&&e.jsx("div",{className:"section__items",children:p?n==null?void 0:n.map((r,t)=>e.jsx("div",{className:"section__item",onClick:()=>h(r),children:e.jsx("img",{src:r==null?void 0:r.imageUrl,alt:`Partner card image ${t+1}`,loading:"lazy"})},`partner-cards-section-item__${t+1}`)):n==null?void 0:n.map((r,t)=>e.jsxs(f,{open:t===m,placement:"top-end",offsetValue:4,children:[e.jsx(v,{className:"section__trigger",children:e.jsx("div",{className:"section__item",onMouseEnter:()=>x(t),onMouseLeave:_,onClick:()=>g(r),children:e.jsx("img",{src:r==null?void 0:r.imageUrl,alt:`Partner card image ${t+1}`,loading:"lazy"})})}),e.jsx(y,{style:{padding:0,borderRadius:12},children:e.jsx(q,{children:r==null?void 0:r.description})})]},`partner-cards-section-item__${t+1}`))})]})});module.exports=N;