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

React component library

"use strict";const r=require("react/jsx-runtime"),l=require("react"),u=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),p=require("./consts-CtNoHdBj.cjs"),v=require("./useDetectMobile-D6d5LpdL.cjs"),k=require("./style-DN1qT8BE.cjs"),d=require("./utils-NZLCh-J5.cjs"),y=u.newStyled.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;
  }
`,S=u.newStyled.div`
  display: grid;
  grid-template-columns: ${t=>`repeat(${t.limit},  minmax(0, 1fr))`};
  gap: 1.25rem;

  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
    display: flex;
    gap: 1rem;
    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
    ::-webkit-scrollbar {
      -webkit-appearance: none;
    }
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */

    &::-webkit-scrollbar {
      display: none;
      /* Safari and Chrome */
    }
  }
`,f=u.newStyled.div`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  cursor: pointer;

  & 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;
     ${d.truncateTextInRows(2)}
  }

  &:hover {
    & .card-title {
      color: var(--primary-500, #F59E0B);
    }
  }

  & .skeleton-img {
    background-color: ${d.linearGradientAnimation("-90deg")};
    border-radius: 0.75rem;
    border: 1px solid white;
  }

  & .skeleton-title {
    background-color: ${d.linearGradientAnimation("-90deg")};
    width: 100%;
    height: 1.25rem;
  }

  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
    & 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;
    }
  }
`,P=l.forwardRef((t,a)=>{const{uuid:o,title:i,image:s,sellerUuid:g,onSelectCard:n=()=>{},imageComponent:c}=t;return r.jsxs(f,{className:"product-card",onClick:n,children:[d.isDefined(c)?c:r.jsx("img",{src:s}),r.jsx("div",{className:"card-title",children:i})]})}),C=l.forwardRef(({},t)=>r.jsxs(f,{className:"product-card",children:[r.jsx("img",{className:"skeleton-img"}),r.jsx("div",{className:"skeleton-title"})]})),N=({limit:t=4,isLoading:a=!1,keyPrefix:o})=>r.jsx(r.Fragment,{children:Array.from({length:t},(i,s)=>r.jsx(C,{isLoading:a},`${o}-skeleton-product-card-${s}`))}),$=({children:t,fallbackComponent:a=r.jsx(r.Fragment,{}),isLoading:o=!1,limit:i,keyPrefix:s})=>r.jsx(l.Suspense,{fallbackComponent:a,children:o===!0?r.jsx(N,{isLoading:o,limit:i,keyPrefix:s}):t}),h=l.memo(P),q=l.forwardRef((t,a)=>{const{icon:o,items:i,limit:s=4,imageUrl:g,onSelectCard:n=()=>{},title:c="Season inspiration",isLoading:w=!1}=t,j=v.useDetectMobile(),b=l.useMemo(()=>r.jsx(r.Fragment,{children:j===!0?i==null?void 0:i.map((e,m)=>r.jsx(h,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>n==null?void 0:n(e==null?void 0:e.uuid)},m)):i==null?void 0:i.slice(0,s).map((e,m)=>r.jsx(h,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>n==null?void 0:n(e==null?void 0:e.uuid)},m))}),[i]);return r.jsxs(k.RegulatTitleSectionWrapper,{ref:a,children:[r.jsx("div",{className:"regular-title",children:r.jsxs("div",{className:"regular-title-text",children:[d.isDefinedNotEmptyString(o)&&r.jsx("i",{className:o}),r.jsx("span",{children:c})]})}),r.jsx(y,{className:"products-banner",children:r.jsx("img",{src:g})}),r.jsx(S,{limit:s,children:r.jsx($,{isLoading:w,limit:s,keyPrefix:"explore-landing",children:b})})]})});module.exports=q;