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

React component library

"use strict";const t=require("react/jsx-runtime"),h=require("react"),m=require("./Button.cjs"),N=require("./index-msAq1Q_a.cjs"),$=require("./utils-BK6B_Y9X.cjs"),_=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),u=require("./breakpoints-CcVm-gVm.cjs"),g=require("./style-17Ie7d9D.cjs"),q=_.styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;

  & .wrapper__heading {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;

    & .wrapper__title {
      display: flex;
      justify-content: space-between;

      & .title__text {
        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;

        display: flex;
        align-items: center;
        gap: 0.5rem;

        & i {
          font-size: 1.5rem;
          color: var(--primary-500, #f59e0b);
        }
      }

      & .title__action {
        /* color: var(--gray-950, #14161a);
        background: var(--neutral-9504, rgba(20, 22, 26, 0.04)); */
        white-space: nowrap;

        /* &:hover {
          background: var(--neutral-9504, rgba(20, 22, 26, 0.12));
        } */

        &:focus {
          outline: none;
        }
      }
    }

    & .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__cards {
    display: grid;
    grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitCards}, minmax(0, 1fr))`};
    gap: 1.25rem;
    justify-items: center;
    align-items: center;
    width: 100%;
  }

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

  & .wrapper__view-all {
    align-self: center;
    color: var(--neutral-600, #0f2a46);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: -0.0056rem;

    &:focus {
      outline: none;
    }

    display: none;
  }

  @media ${u.down("S")} {
    gap: 1.25rem;

    & .wrapper__view-all {
      display: unset;
    }

    & .wrapper__heading {
      & .wrapper__title {
        & .title__action {
          &.grid {
            display: none;
          }
        }
      }
    }

    & .wrapper__cards {
      gap: 1rem;

      ${i=>i!=null&&i.gridView?`
            grid-template-columns: repeat(2, minmax(0, 1fr)); 
            & > div {
              min-width:100%;
             max-width:100%;
            }`:`
            display: flex;
            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 */
            }`}
    }
  }
`,R=_.styled(g.SkeletonContainer)``,z=({keyPrefix:i})=>t.jsx(R,{children:[1,2,3,4].map(n=>t.jsx(g.SkeletonRect,{height:"18rem",width:"100%"},`${i}-${n}`))}),M=({keyPrefix:i,isLoading:n=!1,fallbackComponent:s=t.jsx(t.Fragment,{}),children:r})=>t.jsx(h.Suspense,{fallbackComponent:s,children:n===!0?t.jsx(z,{keyPrefix:i}):r}),F=h.forwardRef(({title:i,subtitle:n,items:s,isLoading:r=!1,limit:w=4,limitForMobile:f=2,buttonText:a="Show More",onSelectCard:x=()=>{},onButtonAction:l=()=>{},icon:p,getImage:c=()=>{},getProductImage:y=()=>{},hideProducts:v=!1,showRating:d=!0,gridView:o=!1,componentName:b,LinkComponent:j},C)=>t.jsxs(q,{ref:C,limitCards:w,limitCardsForMobile:f,gridView:o,className:"lp-section lp-shop-cards-section",children:[t.jsxs("div",{className:"wrapper__heading",children:[t.jsxs("div",{className:"wrapper__title",children:[i&&t.jsxs("div",{className:"title__text",children:[$.isDefinedNotEmptyString(p)&&t.jsx("i",{className:p}),t.jsx("span",{children:i})]}),l&&!r&&t.jsx(m,{text:a,color:"neutral",borderRadius:"curved",btnType:"tinted",className:`title__action ${o?"grid":""}`,onClick:l})]}),n&&t.jsx("div",{className:"wrapper__subtitle",children:n})]}),t.jsx(M,{isLoading:r,keyPrefix:"shop-cards-skeleton",children:t.jsx("div",{className:"wrapper__cards",children:s==null?void 0:s.map((e,S)=>t.jsx(N.ShopCard,{showRating:d,uuid:e==null?void 0:e.uuid,title:e==null?void 0:e.name,subtitle:e==null?void 0:e.shortDescription,rating:e==null?void 0:e.ratingArithmeticMean,reviewCount:e==null?void 0:e.reviewCount,products:e==null?void 0:e.products,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:(P,k)=>x(e==null?void 0:e.uuid,k),image:c(e==null?void 0:e.profileImage,e==null?void 0:e.uuid)||null,getProductImage:y,canAcceptPayments:e==null?void 0:e.canAcceptPayments,hideProducts:v,metadata:{name:b,accessor:e==null?void 0:e.accessor},LinkComponent:j},`shop-card__${S+1}`))})}),o&&l&&!r&&t.jsx(m,{text:a,borderRadius:"curved",btnType:"basic",color:"neutral",className:"wrapper__view-all",onClick:l})]}));module.exports=F;