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

React component library

"use strict";const i=require("react/jsx-runtime"),g=require("react"),C=require("./utils-BK6B_Y9X.cjs"),y=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),f=require("./breakpoints-CcVm-gVm.cjs"),b=require("./index-fdZhoiKV.cjs"),v=require("./style-17Ie7d9D.cjs"),F=y.styled.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 ${f.down("S")} {
    & .wrapper__image {
      height: auto;
    }
  }
`,k=g.forwardRef(({isActive:t,image:s,imageComponent:r,onSelectCard:n=()=>{}},l)=>i.jsx(F,{ref:l,className:t?"active":"",onClick:n,children:C.isDefined(r)?r:i.jsx("img",{src:s,className:"wrapper__image"})})),N=g.forwardRef(({uuid:t,title:s,price:r,currency:n,isNegotiable:l,isFree:u,image:h,sellerUuid:o,onSelectCard:a=()=>{},imageComponent:m,negotiableText:x="Negotiable",freeText:_="Free",nameSlug:d,LinkComponent:w},p)=>i.jsx(b.SimpleProductCard,{ref:p,uuid:t,title:s,price:r,currency:n,isNegotiable:l,isFree:u,image:h,imageComponent:m,sellerUuid:o,onSelectCard:a,negotiableText:x,freeText:_,nameSlug:d,LinkComponent:w})),S=y.styled.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: ${t=>`repeat(${t==null?void 0:t.limitAvatars}, minmax(0, 1fr))`};
    gap: 2rem;
    justify-items: center;
    align-items: center;
  }

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

  @media ${f.down("M")} {
    & .wrapper__cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media ${f.down("S")} {
    & .wrapper__avatars {
      grid-template-columns: ${t=>`repeat(${t==null?void 0:t.limitAvatarsForMobile}, minmax(0, 1fr))`};
      gap: auto;
    }

    & .wrapper__cards {
      grid-template-columns: ${t=>`repeat(${t==null?void 0:t.limitCardsForMobile}, minmax(0, 1fr))`};
      gap: 1rem;
    }
  }
`,$=y.styled(v.SkeletonAnimationContainer)`
  &.skeleton__tags {
    max-width: 50rem;
  }

  @media ${f.down("S")} {
    &.skeleton__tags {
      overflow-x: hidden;

      & > div {
        width: 3rem;
        height: 3rem;
      }
    }

    &.skeleton__cards {
      display: grid;
      grid-template-columns: 1fr 1fr;

      & > div {
        height: 7rem;
      }
    }
  }
`,W=({keyPrefix:t})=>i.jsx($,{className:"skeleton__tags",justifyContent:"center",children:[1,2,3,4].map(s=>i.jsx(v.SkeletonCircle,{size:"9.875rem"},`${t}-${s}`))}),q=({keyPrefix:t,isLoading:s=!1,fallbackComponent:r=i.jsx(i.Fragment,{}),children:n})=>i.jsx(g.Suspense,{fallbackComponent:r,children:s===!0?i.jsx(W,{keyPrefix:t}):n}),A=({keyPrefix:t})=>i.jsx($,{className:"skeleton__cards",justifyContent:"center",children:[1,2,3,4].map(s=>i.jsx(v.SkeletonRect,{width:"100%",height:"13.75rem"},`${t}-${s}`))}),I=({keyPrefix:t,isLoading:s=!1,fallbackComponent:r=i.jsx(i.Fragment,{}),children:n})=>i.jsx(g.Suspense,{fallbackComponent:r,children:s===!0?i.jsx(A,{keyPrefix:t}):n}),O=g.forwardRef(({title:t,subtitle:s,avatars:r=[],limitAvatars:n=4,limit:l=6,limitAvatarsForMobile:u=4,limitForMobile:h=2,items:o=[],onSelectAvatar:a=()=>{},onSelectCard:m=()=>{},isLoadingTags:x=!1,isLoadingCards:_=!1,LinkComponent:d},w)=>{const p=e=>{a==null||a(e)},c=e=>{m==null||m(e)};return i.jsxs(S,{ref:w,limitAvatars:n,limitAvatarsForMobile:u,limitCards:l,limitCardsForMobile:h,className:"lp-section lp-field-of-interests-with-avatars-cards-section",children:[i.jsxs("div",{className:"wrapper__heading",children:[t&&i.jsx("div",{className:"wrapper__title",children:t}),s&&i.jsx("div",{className:"wrapper__subtitle",children:s})]}),i.jsx(q,{isLoading:x,keyPrefix:"field-of-interests-with-avatars-tag",children:i.jsx("div",{className:"wrapper__avatars",children:r==null?void 0:r.map((e,j)=>i.jsx(k,{image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:()=>p==null?void 0:p(e)},`field-of-interests-with-avatars-card-avatar__${j+1}`))})}),i.jsx(I,{isLoading:_,keyPrefix:"field-of-interests-with-avatars-card",children:i.jsx("div",{className:"wrapper__cards",children:o==null?void 0:o.map((e,j)=>i.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:()=>c==null?void 0:c(e),nameSlug:e==null?void 0:e.nameSlug,LinkComponent:d},`field-of-interests-with-avatars-card__${j+1}`))})})]})});module.exports=O;