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

React component library

"use strict";const t=require("react/jsx-runtime"),l=require("react"),j=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),n=require("./breakpoints-CcVm-gVm.cjs"),P=require("./useDetectMobile-DYV6V1yw.cjs"),$=require("./index-fdZhoiKV.cjs"),F=require("./index-DgUNsgfF.cjs"),i=require("./style-17Ie7d9D.cjs"),U=j.styled.div`
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;

  & .text-block-v1 {
    grid-column: 1 / 4;
    max-width: 27rem;
    margin: auto;
  }

  /* Tablet (768–1024px) – text 3/4 left, 1 card top-right, 4 equal product cols below */
  @media ${n.down("M")} {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;

    & .text-block-v1 {
      grid-column: 1 / 4;
      grid-row: 1;
      max-width: unset;
      margin: 0;
      align-self: start;
    }

    & .simple-product-card:nth-of-type(1) {
      grid-column: 4;
      grid-row: 1;
    }

    & .simple-product-card:nth-of-type(n + 2) {
      grid-column: span 1;
      grid-row: auto;
    }
  }

  /* Mobile (≤767px) – title full width above, 2-col product grid below */
  @media ${n.down("S")} {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;

    & .text-block-v1 {
      grid-column: 1 / -1;
      grid-row: 1;
      max-width: unset;
      margin: 0 0 1rem 0;
      align-self: stretch;
    }

    & .simple-product-card:nth-of-type(1),
    & .simple-product-card:nth-of-type(n + 2) {
      grid-column: auto;
      grid-row: auto;
      max-width: unset;
      min-width: unset;
      width: unset;
    }
  }

  /* Small phones (≤480px) – single column */
  @media ${n.down("XS")} {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
`,_=j.styled(i.SkeletonAnimationColumnContainer)`
  @media ${n.down("S")} {
    & .skeleton__cards {
      & > div {
        width: 100%;
        height: 100%;

        &:nth-of-type(even) {
          display: none;
        }
      }
    }
  }
`,z=({keyPrefix:o})=>t.jsx(_,{children:[1,2].map(s=>t.jsxs(i.SkeletonContainer,{className:"skeleton__cards",children:[t.jsx(i.SkeletonRect,{width:"100%",height:"11.125rem"}),t.jsx(i.SkeletonSquare,{size:"11.125rem"}),t.jsx(i.SkeletonSquare,{size:"11.125rem"}),t.jsx(i.SkeletonSquare,{size:"11.125rem"})]},`${o}-${s}`))}),T=({keyPrefix:o,isLoading:s=!1,fallbackComponent:a=t.jsx(t.Fragment,{}),children:c})=>t.jsx(l.Suspense,{fallbackComponent:a,children:s===!0?t.jsx(z,{keyPrefix:o}):c}),k=l.memo($.SimpleProductCard),R=l.forwardRef((o,s)=>{const{title:a,subtitle:c,description:y,buttonText:q,buttonLink:v,items:r,onButtonAction:N=()=>{},isLoading:C=!1,limit:d=6,getImage:m=()=>{},negotiableText:p,freeText:g,componentName:h,LinkComponent:S}=o,w=P.useDetectMobile(),M=l.useMemo(()=>{var b,f;return t.jsx(t.Fragment,{children:w===!0?(b=r==null?void 0:r.slice(0,4))==null?void 0:b.map((e,u)=>t.jsx(k,{title:e==null?void 0:e.name,price:e==null?void 0:e.price,isFree:e==null?void 0:e.isFree,isNegotiable:e==null?void 0:e.isNegotiable,currency:e==null?void 0:e.currency,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,nameSlug:e==null?void 0:e.nameSlug,image:m(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null,negotiableText:p,freeText:g,metadata:{name:h,accessor:e==null?void 0:e.accessor},LinkComponent:S},u)):(f=r==null?void 0:r.slice(0,9))==null?void 0:f.map((e,u)=>t.jsx(k,{title:e==null?void 0:e.name,price:e==null?void 0:e.price,isFree:e==null?void 0:e.isFree,isNegotiable:e==null?void 0:e.isNegotiable,currency:e==null?void 0:e.currency,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,nameSlug:e==null?void 0:e.nameSlug,image:m(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null,negotiableText:p,freeText:g,metadata:{name:h,accessor:e==null?void 0:e.accessor},LinkComponent:S},u))})},[r,w,d]);return t.jsx(T,{isLoading:C,keyPrefix:"simple-products-skeleton",children:t.jsxs(U,{ref:s,limit:d,className:"lp-section lp-simple-products-section",children:[t.jsx(F.TextBlockV1,{subtitle:c,title:a,description:y,buttonText:q,buttonLink:v,onButtonAction:N,className:"text-block-v1"}),M]})})});module.exports=R;