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

React component library

"use strict";const e=require("react/jsx-runtime"),g=require("react"),f=require("./Button.cjs"),v=require("./Icon.cjs"),l=require("./utils-NZLCh-J5.cjs"),h=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),y=require("./consts-CtNoHdBj.cjs"),j=h.newStyled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 1.25rem;
  border: 1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08));
  background: var(--Lanaco-Gray-white, #fff);
  width: 100%;

  /* drop-shadow-sm */
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);

  & .wrapper__content {
    display: flex;
    padding: 1.25rem;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    align-self: strech;

    & .wrapper__image {
      object-fit: cover;
      aspect-ratio: 1 / 1;
      max-height: 4rem;
      border-radius: 999px;

      &:hover {
        cursor: pointer;
      }
    }
  }

  & .wrapper__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;

    & .wrapper__title {
      color: var(--gray-950, #14161a);
      font-size: 1rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.5rem;
      letter-spacing: -0.0112rem;
      ${l.truncateTextInRows(2)}
    }

    & .wrapper__subtitle {
      color: var(--gray-600, #676e79);
      text-align: center;
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1.25rem;
      letter-spacing: -0.0056rem;
      ${l.truncateTextInRows(2)}
    }

    & .wrapper__badges {
    }

    & .wrapper__rating {
      display: flex;
      align-items: center;
      gap: 0.25rem;

      & .wrapper__star {
        color: var(--gray-950, #14161a);
      }

      & .wrapper__review-count {
        color: var(--gray-600, #676e79);
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1rem;
        letter-spacing: 0.01px;
      }
    }
  }

  & .wrapper__products {
    display: flex;
    align-items: flex-start;
    column-gap: 1px;
    width: 100%;

    & .wrapper__product {
      overflow: hidden;
      cursor: pointer;
      width: 100%;
      max-height: 5.75rem;

      &:first-child {
        border-radius: 0 0 0 1.25rem;
      }

      &:last-child {
        border-radius: 0 0 1.25rem 0;
      }

      & .product__image {
        width: 100%;
        aspect-ratio: 1 / 1;
        height: calc(100% / 3);
        max-height: 5.75rem;
        object-fit: cover;
      }
    }
  }
`,u=h.newStyled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 0 0;
  border-radius: 1.25rem;
  border: 1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08));
  background: var(--Lanaco-Gray-white, #fff);
  width: 100%;

  /* drop-shadow-sm */
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);

  & .wrapper__content {
    display: flex;
    padding: 1.25rem;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    align-self: strech;
    width: 100%;

    & .wrapper__image {
      width: 4rem;
      height: 4rem;
      border-radius: 999px;
      background-color: ${l.linearGradientAnimation("-90deg")};
    }
  }

  & .wrapper__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    width: 100%;

    & .wrapper__info-item {
      background-color: ${l.linearGradientAnimation("-90deg")};
      height: 1rem;
      width: 100%;
    }
  }
`,b=g.forwardRef(({image:a,imageComponent:p,title:s,subtitle:c,badges:x,rating:m,reviewCount:t,products:n,onSelectCard:_=()=>{}},w)=>e.jsxs(j,{onClick:_,children:[e.jsxs("div",{className:"wrapper__content",children:[l.isDefined(p)?p:e.jsx("img",{src:a,className:"wrapper__image"}),e.jsxs("div",{className:"wrapper__info",children:[e.jsx("div",{className:"wrapper__title",children:s}),e.jsx("div",{className:"wrapper__subtitle",children:c}),x&&e.jsx("div",{className:"wrapper__badges"}),m&&t&&e.jsxs("div",{className:"wrapper__rating",children:[e.jsx("div",{className:"wrapper_stars",children:[...Array(5).keys()].map((i,o)=>e.jsx(v,{icon:i<m?" mng-lnc-star--filled":" mng-lnc-star",className:"wrapper__star"},`shop-card-rating-star__${o+1}`))}),e.jsxs("div",{className:"wrapper__review-count",children:["(",t==null?void 0:t.toLocaleString(),")"]})]})]})]}),e.jsx("div",{className:"wrapper__products",children:n&&(n==null?void 0:n.map((i,o)=>e.jsx(g.Fragment,{children:e.jsx("div",{className:"wrapper__product",onClick:()=>{var r;return(r=i==null?void 0:i.onSelectProduct)==null?void 0:r.call(i,i==null?void 0:i.uuid)},children:l.isDefined(i==null?void 0:i.imageComponent)?i==null?void 0:i.imageComponent:e.jsx("img",{src:i==null?void 0:i.image,className:"product__image"})})},o)))})]})),N=g.forwardRef(({},a)=>e.jsx(u,{children:e.jsxs("div",{className:"wrapper__content",children:[e.jsx("div",{className:"wrapper__image"}),e.jsxs("div",{className:"wrapper__info",children:[e.jsx("div",{className:"wrapper__info-item"}),e.jsx("div",{className:"wrapper__info-item"}),e.jsx("div",{className:"wrapper__info-item"}),e.jsx("div",{className:"wrapper__info-item"})]})]})})),k=h.newStyled.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));

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

  @media (max-width: ${y.MOBILE_SIZE_PX+"px"}) {
    & .wrapper__heading {
      & .wrapper__title {
        & .title__action {
          display: none;
        }
      }
    }

    & .wrapper__cards {
      grid-template-columns: ${a=>`repeat(${a==null?void 0:a.limitCardsForMobile}, minmax(0, 1fr))`};
      gap: 1rem;
    }
  }

  @media (max-width: 400px) {
    & .wrapper__cards {
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap: 1rem;
    }
  }
`,$=g.forwardRef(({title:a,subtitle:p,items:s,limit:c=4,limitForMobile:x=2,buttonText:m="Show More",onSelectCard:t=()=>{},onButtonAction:n=()=>{},icon:_},w)=>{var o;const i=r=>{t==null||t(r==null?void 0:r.uuid)};return e.jsxs(k,{ref:w,limitCards:c,limitCardsForMobile:x,children:[e.jsxs("div",{className:"wrapper__heading",children:[e.jsxs("div",{className:"wrapper__title",children:[a&&e.jsxs("div",{className:"title__text",children:[l.isDefinedNotEmptyString(_)&&e.jsx("i",{className:_}),e.jsx("span",{children:a})]}),n&&e.jsx(f,{text:m,borderRadius:"curved",btnType:"tinted",className:"title__action",onClick:n})]}),p&&e.jsx("div",{className:"wrapper__subtitle",children:p})]}),e.jsx("div",{className:"wrapper__cards",children:s&&(s==null?void 0:s.length)>0?s==null?void 0:s.map((r,d)=>e.jsx(b,{uuid:r==null?void 0:r.uuid,title:r==null?void 0:r.title,subtitle:r==null?void 0:r.subtitle,image:r==null?void 0:r.image,rating:r==null?void 0:r.rating,reviewCount:r==null?void 0:r.reviewCount,products:r==null?void 0:r.products,imageComponent:r==null?void 0:r.imageComponent,onSelectCard:()=>i==null?void 0:i(r)},`shop-card__${d+1}`)):(o=Array.from("1234"))==null?void 0:o.map((r,d)=>e.jsx(N,{},`shop-card-skeleton__${d+1}`))})]})});module.exports=$;