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

React component library

"use strict";const t=require("react/jsx-runtime"),s=require("react"),j=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),k=require("./consts-CtNoHdBj.cjs"),v=require("./useDetectMobile-D6d5LpdL.cjs"),M=require("./Button.cjs"),p=require("./suspense-product-card-detailed-DtzOxHaH.cjs"),P=j.newStyled.div`
  padding: 1.75rem 3rem;
  display: grid;
  grid-template-columns: ${i=>`repeat(${i.limit||5},  minmax(0, 1fr))`};

  gap: 2.97rem;

  border: 1.5px solid var(--danger-600, #e11d48);
  background-color: var(--danger-50, #fff1f2);
  position: relative;
  border-radius: 0.75rem;
  position: relative;

  & .urgent-tag {
    position: absolute;
    left: 1rem;
    top: -0.75rem;
    min-height: 1.5rem;
    max-height: 1.5rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem;
    gap: 0.12rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--white, #fff);
    background-color: var(--danger-600, #e11d48);
  }

  & .show-more {
    grid-column: 1 / 3;
  }

  & .product-card {
    max-width: ${i=>`calc(${100/i.desktopCols}% - ${(i.desktopCols-1)*i.columnGapRem/i.desktopCols}rem)`};

    animation-duration: 0.2s;
    animation-name: animate-fade;
    animation-delay: 0.2s;
    animation-fill-mode: backwards;
    transition: all 0.25s ease;

    @keyframes animate-fade {
      0% {
        transform: scale(0.9);
        -webkit-transform: scale(0.9);
      }
      100% {
        transform: scale(1);
        -webkit-transform: scale(1);
      }
    }
  }

  @media (max-width: ${k.MOBILE_SIZE_PX+"px"}) {
    grid-template-columns: repeat(2, 1fr);
    padding: 2rem 1.25rem;
    gap: 1.19rem;

    & .urgent-tag {
    }

    & .img-wrapper {
    }
  }
`,u=s.memo(p.DetailedProductCard),q=s.forwardRef((i,g)=>{const{items:r,limit:a=5,limitMobile:d=6,onSelectCard:o=()=>{},title:f="Urgent sale",showLessText:h="Show less",showMoreText:w="Show more",isLoading:b=!1}=i,c=v.useDetectMobile(),[n,y]=s.useState(!1),S=s.useMemo(()=>{var m;return t.jsx(t.Fragment,{children:c===!0?(m=r==null?void 0:r.slice(0,n===!0?r==null?void 0:r.length:d))==null?void 0:m.map((e,l)=>t.jsx(u,{title:e==null?void 0:e.title,price:e==null?void 0:e.price,currency:e==null?void 0:e.currency,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,isSponsored:e==null?void 0:e.isSponsored,onSelectCard:()=>o==null?void 0:o(e==null?void 0:e.uuid)},l)):r==null?void 0:r.slice(0,a).map((e,l)=>t.jsx(u,{title:e==null?void 0:e.title,price:e==null?void 0:e.price,currency:e==null?void 0:e.currency,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,location:e==null?void 0:e.location,isSponsored:e==null?void 0:e.isSponsored,onSelectCard:()=>o==null?void 0:o(e==null?void 0:e.uuid)},l))})},[r]);return t.jsxs(P,{ref:g,limit:a,children:[t.jsxs("div",{className:"urgent-tag",children:[t.jsx("i",{className:"mng mng-lnc-bolt-filled"}),t.jsx("span",{children:f})]}),t.jsx(p.SuspenseDetailedProductCard,{isLoading:b,limit:a,keyPrefix:"explore-landing",children:S}),c===!0&&d<(r==null?void 0:r.length)&&t.jsx(M,{className:"show-more",btnType:"basic",type:"button",color:"gray",onClick:()=>y(!n),children:n===!0?h:w})]})});module.exports=q;