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

React component library

"use strict";const r=require("react/jsx-runtime"),m=require("react"),x=require("./Button.cjs"),d=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),i=require("./utils-NZLCh-J5.cjs"),h=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),g=require("./consts-CtNoHdBj.cjs"),f=d.newStyled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 0.75rem;
  position: relative;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
  cursor: pointer;

  grid-column: ${t=>{var e;return((e=t.position)==null?void 0:e.columnStart)||"1"}} /
    ${t=>{var e;return((e=t.position)==null?void 0:e.columnEnd)||"6"}};
  grid-row: ${t=>{var e;return((e=t.position)==null?void 0:e.rowStart)||"1"}} /
    ${t=>{var e;return((e=t.position)==null?void 0:e.rowEnd)||"1"}};

  background: linear-gradient(
    178deg,
    rgba(0, 0, 0, 0) 1.5%,
    rgba(0, 0, 0, 0.16) 8.95%,
    #000 98.39%
  );

  & .wrapper__image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 0.75rem;
    mix-blend-mode: multiply;
  }

  & .wrapper__image--skeleton {
    width: 24.5rem;
    height: 30rem;
    border-radius: 0.75rem;
    background-color: ${i.linearGradientAnimation("-90deg")};
  }

  & .wrapper__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
    position: absolute;
    bottom: 0;
    left: 0;
    gap: 0.75rem;

    & .text__title {
      transition: var(--transiton, all 0.2s ease);
      color: var(--white, #ffffff);
      font-size: 1rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.5rem;
      ${i.truncateTextInRows(2)}
    }

    & .text__tag {
      background-color: var(--warning-600, #d97706);
      color: var(--white, #ffffff);
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.25rem;
      padding: 0.25rem 0.5rem;

      border-radius: 0.375rem;
      background: var(--warning-600, #d97706);
    }

    & .text__description {
      color: var(--white);
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1.25rem;
      ${i.truncateTextInRows(2)}
    }

    & .text__action {
      background: var(--white);
      color: var(--black);

      &:hover {
        background: var(--primary-500, #f59e0b);
        color: var(--white);
      }
    }

    & .text__title--skeleton {
      background-color: ${i.linearGradientAnimation("-90deg")};
      height: 1rem;
      width: 9rem;
    }

    & .text__description--skeleton {
      background-color: ${i.linearGradientAnimation("-90deg")};
      height: 1rem;
      width: 12rem;
    }

    & .text__action--skeleton {
      background-color: ${i.linearGradientAnimation("-90deg")};
      height: 2rem;
      width: 9rem;
    }
  }

  &:hover {
    cursor: pointer;

    & .wrapper__text {
      & .text__title {
        color: var(--primary-500, #e87722);
      }
    }
  }
`,u=m.forwardRef(({title:t,image:e,description:a,actionText:o,onSelectCard:l=()=>{},className:n,position:s,tag:c},v)=>{const p=h.useTheme();return r.jsx(r.Fragment,{children:r.jsxs(f,{theme:p,className:n,onClick:l,position:s,children:[r.jsx("img",{src:e,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__text",children:[c&&r.jsx("div",{className:"text__tag",children:c}),r.jsx("div",{className:"text__title",children:t}),i.isDefinedNotEmptyString(a)&&r.jsx("div",{className:"text__description",children:a}),i.isDefinedNotEmptyString(o)&&r.jsx(x,{text:o,onClick:l,className:"text__action"})]})]})})}),_=d.newStyled.div`
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

  & .regular-title {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    font-size: 1.5rem;
    font-weight: 600;
    & .regular-title-text {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }

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

  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
    gap: 1.25rem;

    & .regular-title {
      font-size: 1.375rem;

      &.center {
        justify-content: center;
      }
    }
  }
`,w=d.newStyled.div`
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 15rem 15rem;
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  height: 30rem;
  max-height: 30rem;

  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0 1rem;
  }
`,b=m.forwardRef(({title:t,items:e,limit:a=3,onSelectCard:o=()=>{}},l)=>r.jsxs(_,{children:[r.jsx("div",{className:"regular-title",children:r.jsx("div",{className:"regular-title-text",children:r.jsx("span",{children:t})})}),r.jsx(w,{limit:a,children:e&&(e==null?void 0:e.map((n,s)=>r.jsx(u,{...n,onSelectCard:()=>o(n==null?void 0:n.uuid)},`landing-page-masonry-general-card__${s+1}`)))})]}));module.exports=b;