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

React component library

"use strict";const t=require("react/jsx-runtime"),d=require("react"),s=require("./utils-NZLCh-J5.cjs"),f=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),x=require("./consts-CtNoHdBj.cjs"),w=f.newStyled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;

  & .wrapper__card {
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
    position: relative;
    overflow: hidden;

    & .wrapper__image {
      width: 100%;
      object-fit: cover;
      height: auto;
      border-radius: 0.75rem;
      border: 1px solid var(--yellow-600, #d97706);

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

    & .wrapper__tag {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: -40%;
      top: 10%;
      filter: drop-shadow(1px 1px 0px #d97706);
      background: var(--yellow-500, #f59e0b);
      color: var(--white, #fff);
      width: 100%;
      height: 2rem;
      font-weight: 600;
      font-size: 0.875rem;

      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
  }

  & .wrapper__text {
    color: var(--gray-950, #14161a);
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
    width: 100%;
    ${s.truncateTextInRows(2)}
    transition: var(--transition, all 0.2s ease);
  }

  &:hover {
    & .wrapper__text {
      color: var(--primary-500, #f59e0b);
    }
  }
`,_=f.newStyled.div`
  width: 100%;
  height: 11.5rem;
  border-radius: 0.75rem;
  background: ${s.linearGradientAnimation("-90deg")};
`,h=d.forwardRef(({image:r,imageComponent:o,text:i,price:l,currency:p,onSelectCard:n=()=>{}},a)=>t.jsxs(w,{ref:a,onClick:n,children:[t.jsxs("div",{className:"wrapper__card",children:[s.isDefined(o)?o:t.jsx("img",{src:r,className:"wrapper__image"}),t.jsx("div",{className:"wrapper__tag",children:`${s.formatPrice(l)} ${s.GetCurrencySymbol(p)}`})]}),t.jsx("div",{className:"wrapper__text",children:i})]})),c=d.forwardRef(({},r)=>t.jsx(_,{})),u=f.newStyled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;

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

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

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

  @media (max-width: ${x.MOBILE_SIZE_PX+"px"}) {
    & .wrapper__cards {
      grid-template-columns: ${r=>`repeat(${r==null?void 0:r.limitCardsForMobile}, minmax(0, 1fr))`};
      gap: 1rem;
    }
  }
`,y=d.forwardRef(({title:r,subtitle:o,items:i,limit:l=4,limitForMobile:p=1,onSelectCard:n=()=>{}})=>{var g;const a=e=>{n==null||n(e==null?void 0:e.uuid)};return t.jsxs(u,{limitCards:l,limitCardsForMobile:p,children:[t.jsxs("div",{className:"wrapper__heading",children:[r&&t.jsx("div",{className:"wrapper__title",children:r}),o&&t.jsx("div",{className:"wrapper__subtitle",children:o})]}),t.jsx("div",{className:"wrapper__cards",children:i&&(i==null?void 0:i.length)>0?i==null?void 0:i.map((e,m)=>t.jsx(h,{uuid:e==null?void 0:e.uuid,text:e==null?void 0:e.text,price:e==null?void 0:e.price,currency:e==null?void 0:e.currency,image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:()=>a==null?void 0:a(e)},`gift-card__${m+1}`)):(g=Array.from("1234"))==null?void 0:g.map((e,m)=>t.jsx(c,{},`gift-card-skeleton__${m+1}`))})]})});module.exports=y;