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

React component library

"use strict";const t=require("react/jsx-runtime"),m=require("react"),j=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),c=require("./breakpoints-CcVm-gVm.cjs"),$=require("./useDetectMobile-DYV6V1yw.cjs"),C=require("./style-cJUZrJoG.cjs"),h=require("./utils-BK6B_Y9X.cjs"),y=require("./index-DOkcmaFO.cjs"),i=require("./style-17Ie7d9D.cjs"),R=j.styled.div`
  width: 100%;
  height: 22.5rem;
  min-height: 22.5rem;
  max-height: 22.5rem;
  overflow: hidden;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--gray-95008, #14161a14);
  border-radius: 0.75rem;
  margin-bottom: 0.5rem;

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media ${c.down("S")} {
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;

    & .product-card {
      & img {
        width: 100%;
        height: 100%;
        min-width: 100%;
        min-height: 100%;
      }
    }
  }
`,N=j.styled.div`
  display: grid;
  grid-template-columns: ${n=>`repeat(${n.limit},  minmax(0, 1fr))`};
  gap: 1.25rem;

  @media ${c.down("M")} {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  @media ${c.down("S")} {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  @media ${c.down("XS")} {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
`,v=j.styled.a`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  cursor: pointer;
  text-decoration: none;
  color: var(--gray-950);

  & img {
    width: 100%;
    aspect-ratio: 1 / 1; /* defining the aspect ratio of the image */
    object-fit: cover; /* making sure the image isn't distorted */
    border-radius: 0.75rem;
  }

  & .card-title {
    font-size: 0.875rem;
    font-weight: 600;
    ${h.truncateTextInRows(2)}
  }

  @media ${c.down("S")} {
    & img {
      width: 8.875rem;
      height: 8.875rem;
      min-width: 8.875rem;
      min-height: 8.875rem;
      min-width: 8.875rem;
      min-height: 8.875rem;
      object-fit: cover;
    }
  }
`,q=m.forwardRef((n,o)=>{const{uuid:a,title:r,image:l,sellerUuid:b,onSelectCard:S=()=>{},imageComponent:g,metadata:s,nameSlug:d,LinkComponent:u}=n,p=u||"a",f=m.useRef(null);return t.jsxs(v,{ref:f,className:"product-card",name:s==null?void 0:s.name,"data-accessor":s==null?void 0:s.accessor,onClick:e=>S(e,o),as:p,...u?{to:`/product/${h.isDefinedNotEmptyString(d)?`${d}-`:""}${a}`}:{href:`/product/${h.isDefinedNotEmptyString(d)?`${d}-`:""}${a}`},children:[h.isDefined(g)?g:t.jsx(y.ProductImageWrapper,{src:l}),t.jsx("div",{className:"card-title",children:r})]})}),P=j.styled(i.SkeletonAnimationColumnContainer)`
  @media ${c.down("S")} {
    & .skeleton__banner {
      height: 100%;
      aspect-ratio: 1 / 1;
    }
  }
`,U=({keyPrefix:n})=>t.jsxs(P,{children:[t.jsx(i.SkeletonRect,{width:"100%",height:"10rem",className:"skeleton__banner"}),t.jsx(i.SkeletonContainer,{children:[1,2,3,4].map(o=>t.jsxs(i.SkeletonColumnContainer,{gap:"0.5rem",children:[t.jsx(i.SkeletonSquare,{size:"6rem"}),t.jsx(i.SkeletonRect,{width:"100%",height:"1rem"}),t.jsxs(i.SkeletonContainer,{gap:"0.5rem",children:[t.jsx(i.SkeletonRect,{width:"100%",height:"1.5rem"}),t.jsx(i.SkeletonRect,{width:"100%",height:"1.5rem"})]}),t.jsx(i.SkeletonRect,{width:"100%",height:"1.5rem"})]},`${n}-${o}`))})]}),W=({keyPrefix:n,isLoading:o=!1,fallbackComponent:a=t.jsx(t.Fragment,{}),children:r})=>t.jsx(m.Suspense,{fallbackComponent:a,children:o===!0?t.jsx(U,{keyPrefix:n}):r}),k=m.memo(q),D=m.forwardRef((n,o)=>{const{icon:a,items:r,limit:l=4,imageUrl:b,title:S="Season inspiration",isLoading:g=!1,getImage:s=()=>{},componentName:d,LinkComponent:u}=n,p=$.useDetectMobile(),f=m.useMemo(()=>t.jsx(t.Fragment,{children:p===!0?r==null?void 0:r.map((e,w)=>t.jsx(k,{title:e==null?void 0:e.name,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,nameSlug:e==null?void 0:e.nameSlug,image:s(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null,metadata:{name:d,accessor:e==null?void 0:e.accessor},LinkComponent:u},w)):r==null?void 0:r.slice(0,l).map((e,w)=>t.jsx(k,{title:e==null?void 0:e.name,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,nameSlug:e==null?void 0:e.nameSlug,image:s(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null,metadata:{name:d,accessor:e==null?void 0:e.accessor},LinkComponent:u},w))}),[r,p,l]);return t.jsxs(C.RegulatTitleSectionWrapper,{ref:o,className:"lp-section lp-products-with-banner-section",children:[t.jsx("div",{className:"regular-title",children:t.jsxs("div",{className:"regular-title-text",children:[h.isDefinedNotEmptyString(a)&&t.jsx("i",{className:a}),t.jsx("span",{children:S})]})}),t.jsxs(W,{isLoading:g,keyPrefix:"products-with-banner-skeleton",children:[t.jsx(R,{className:"products-banner",children:t.jsx("img",{src:b})}),t.jsx(N,{limit:l,children:f})]})]})});module.exports=D;