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

React component library

"use strict";const r=require("react/jsx-runtime"),d=require("react"),m=require("./utils-BK6B_Y9X.cjs"),g=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),p=require("./breakpoints-CcVm-gVm.cjs"),f=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),_=require("./styled-components.browser.esm-BaNxtZgB.cjs"),h=require("./index-xecdLwlt.cjs"),b=g.styled.div`
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 1;

  background: -moz-linear-gradient(
    top,
    rgba(35, 42, 33, 0.45) 0%,
    rgba(35, 42, 33, 0.45) 100%
  );
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, rgba(35, 42, 33, 0.45)),
    color-stop(100%, rgba(35, 42, 33, 0.45))
  );
  background: -webkit-linear-gradient(
    top,
    rgba(35, 42, 33, 0.45) 0%,
    rgba(35, 42, 33, 0.45) 100%
  );
  background: -o-linear-gradient(
    top,
    rgba(35, 42, 33, 0.45) 0%,
    rgba(35, 42, 33, 0.45) 100%
  );
  background: -ms-linear-gradient(
    top,
    rgba(35, 42, 33, 0.45) 0%,
    rgba(35, 42, 33, 0.45) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(35, 42, 33, 0.45) 0%,
    rgba(35, 42, 33, 0.45) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
  border-radius: 0.75rem;
  z-index: 2;
`,w=g.styled.a`
  text-decoration: none;
  color: var(--gray-950);
  cursor: pointer;
  position: relative;
  border-radius: 0.75rem;
  position: relative;
  width: 100%;
  min-width: 10rem;
  height: 11.875rem;

  &:hover .quattro-card__gradient {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  & img {
    width: 100%;
    height: 100%;
    border-radius: 0.75rem;
    object-fit: cover;
  }
  & .quattro-card__text {
    z-index: 3;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    color: var(--white, #fff);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
    text-align: center;

    & .quattro-card__title {
      font-size: 1.25rem;
      font-style: normal;
      font-weight: 600;
      line-height: 1.75rem;
      ${m.truncateText()}
    }

    & .quattro-card__description {
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.25rem;
      ${m.truncateTextInRows(2)}
    }
  }

  @media ${p.down("S")} {
    width: 100%;

    img {
      object-fit: fill;
    }

    & .quattro-card__title {
      font-size: 1rem;
      font-weight: 700;
      width: 100%;
    }

    & .quattro-card__description {
      display: block;
    }
  }
`,y=d.forwardRef(({title:o,description:t,imageUrl:l,onSelectCard:i=()=>{},link:n,LinkComponent:s},c)=>{const{theme:a}=f.useTheme(),e=s||"a";return r.jsxs(w,{ref:c,theme:a,onClick:i,as:e,...s?{to:`/${n}`}:{href:`/${n}`},children:[r.jsx("img",{loading:"lazy",src:l}),r.jsx(b,{theme:a,className:"quattro-card__gradient",children:r.jsxs("div",{className:"quattro-card__text",children:[r.jsx("div",{className:"quattro-card__title",children:o}),r.jsx("div",{className:"quattro-card__description",children:t})]})})]})}),q=_.qe.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);
        }
      }
    }
  }

  & .wrapper__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    justify-items: center;
    align-items: center;
    width: 100%;
  }

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

  @media ${p.down("XS")} {
    & .wrapper__cards {
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap: 1rem;
    }
  }
`,x=d.memo(y),j=d.forwardRef(({title:o,items:t,isLoading:l=!1,onSelectCard:i=()=>{},LinkComponent:n},s)=>{const c=d.useMemo(()=>{var a;return(a=t==null?void 0:t.slice(0,4))==null?void 0:a.map((e,u)=>r.jsx(x,{title:e==null?void 0:e.title,description:e==null?void 0:e.description,imageUrl:e==null?void 0:e.imageUrl,onSelectCard:()=>i==null?void 0:i(e),link:e==null?void 0:e.link,LinkComponent:n},`quattro-card__${u+1}`))},[t]);return r.jsxs(q,{ref:s,className:"lp-section lp-general-section lp-quattro-cards-section",children:[r.jsx("div",{className:"wrapper__heading",children:r.jsx("div",{className:"wrapper__title",children:m.isDefinedNotEmptyString(o)&&r.jsx("div",{className:"title__text",children:r.jsx("span",{children:o})})})}),r.jsx(h.SuspenseBlogCardsSponsored,{isLoading:l,keyPrefix:"quattro-cards-skeleton",children:r.jsx("div",{className:"wrapper__cards",children:c})})]})});module.exports=j;