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

React component library

"use strict";const t=require("react/jsx-runtime"),f=require("react"),u=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),d=require("./consts-CtNoHdBj.cjs"),y=require("./utils-NZLCh-J5.cjs"),$=require("./index-DHJmdMN8.cjs"),c=u.newStyled.div`
  width: 100%;
  height: 11.625rem;
  border-radius: 0.75rem;
  background: ${y.linearGradientAnimation("-90deg")};
`,C=u.newStyled.div`
  width: 100%;
  height: auto;
  border-radius: 999px;

  &:hover {
    cursor: pointer;
  }

  & .wrapper__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 999px;
    max-height: 9.875rem;
  }

  &.active {
    border: var(--yellow-600, #d97706);
  }

  @media (max-width: ${d.MOBILE_SIZE_PX+"px"}) {
    & .wrapper__image {
      height: auto;
    }
  }
`,F=u.newStyled.div`
  width: 9.875rem;
  height: 9.875rem;
  border-radius: 999px;
  background: ${y.linearGradientAnimation("-90deg")};

  @media (max-width: ${d.MOBILE_SIZE_PX+"px"}) {
    width: 4.5rem;
    height: 4.5rem;
  }
`,I=f.forwardRef(({},i)=>t.jsx(F,{})),A=f.forwardRef(({isActive:i,image:o,imageComponent:r,onSelectCard:l=()=>{}},_)=>t.jsx(C,{className:i?"active":"",onClick:l,children:y.isDefined(r)?r:t.jsx("img",{src:o,className:"wrapper__image"})})),N=f.forwardRef(({uuid:i,title:o,price:r,currency:l,isNegotiable:_,isFree:a,image:x,sellerUuid:s,onSelectCard:m=()=>{},imageComponent:p,negotiableText:w="Negotiable",freeText:g="Free"},h)=>t.jsx($.SimpleProductCard,{uuid:i,title:o,price:r,currency:l,isNegotiable:_,isFree:a,image:x,imageComponent:p,sellerUuid:s,onSelectCard:m,negotiableText:w,freeText:g})),k=f.forwardRef(({},i)=>t.jsx(c,{})),W=u.newStyled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;

  & .wrapper__heading {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;

    & .wrapper__title {
      color: var(--gray-950, #14161a);
      text-align: center;
      font-size: 1.5rem;
      font-style: normal;
      font-weight: 600;
      line-height: 2rem;
      letter-spacing: -0.47px;
    }

    & .wrapper__subtitle {
      color: var(---gray-600, #676e79);
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1.25rem;
      letter-spacing: 0.25px;
    }
  }

  & .wrapper__avatars {
    display: grid;
    grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitAvatars}, minmax(0, 1fr))`};
    gap: 2rem;
    justify-items: center;
    align-items: center;
  }

  & .wrapper__cards {
    display: grid;
    grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitCards}, minmax(0, 1fr))`};
    gap: 1.25rem;
    justify-items: center;
    align-items: center;
    width: 100%;
  }

  @media (max-width: ${d.MOBILE_SIZE_PX+"px"}) {
    & .wrapper__avatars {
      grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitAvatarsForMobile}, minmax(0, 1fr))`};
      gap: auto;
    }

    & .wrapper__cards {
      grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitCardsForMobile}, minmax(0, 1fr))`};
      gap: 1rem;
    }
  }
`,O=f.forwardRef(({title:i,subtitle:o,avatars:r=[],limitAvatars:l=4,limit:_=6,limitAvatarsForMobile:a=4,limitForMobile:x=2,items:s=[],onSelectAvatar:m=()=>{},onSelectCard:p=()=>{}},w)=>{var j,b;const g=e=>{m==null||m(e==null?void 0:e.uuid)},h=e=>{p==null||p(e==null?void 0:e.uuid)};return t.jsxs(W,{ref:w,limitAvatars:l,limitAvatarsForMobile:a,limitCards:_,limitCardsForMobile:x,children:[t.jsxs("div",{className:"wrapper__heading",children:[i&&t.jsx("div",{className:"wrapper__title",children:i}),o&&t.jsx("div",{className:"wrapper__subtitle",children:o})]}),t.jsx("div",{className:"wrapper__avatars",children:r&&(r==null?void 0:r.length)>0?r==null?void 0:r.map((e,n)=>t.jsx(A,{image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:()=>g==null?void 0:g(e)},`field-of-interests-with-avatars-card-avatar__${n+1}`)):(j=Array.from("1234"))==null?void 0:j.map((e,n)=>t.jsx(I,{},`field-of-interests-with-avatars-card-avatar-skeleton__${n+1}`))}),t.jsx("div",{className:"wrapper__cards",children:s&&(s==null?void 0:s.length)>0?s==null?void 0:s.map((e,n)=>t.jsx(N,{uuid:e==null?void 0:e.uuid,title:e==null?void 0:e.title,price:e==null?void 0:e.price,currency:e==null?void 0:e.currency,isNegotiable:e==null?void 0:e.isNegotiable,isFree:e==null?void 0:e.isFree,image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,sellerUuid:e==null?void 0:e.sellerUuid,negotiableText:e==null?void 0:e.negotiableText,freeText:e==null?void 0:e.freeText,onSelectCard:()=>h==null?void 0:h(e)},`field-of-interests-with-avatars-card__${n+1}`)):(b=Array.from("123456"))==null?void 0:b.map((e,n)=>t.jsx(k,{},`field-of-interests-with-avatars-card-skeleton__${n+1}`))})]})});module.exports=O;