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

React component library

"use strict";const n=require("react/jsx-runtime"),h=require("react"),m=require("./Button.cjs"),u=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),a=require("./breakpoints-CcVm-gVm.cjs"),x=require("./index-BskHxjAq.cjs"),p=u.styled.a`
  text-decoration: none;
  color: var(--gray-950);
  display: flex;
  height: 28.75rem;
  padding: 2.25rem;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  width: 100%;
  min-width: 0;
  background: ${r=>r==null?void 0:r.backgroundColor}, url("${r=>r==null?void 0:r.backgroundImage}");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0.75rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  &:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 24px rgba(20, 22, 26, 0.12);
  }

  & .section__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;

    & .section__title {
      color: var(--white, #fff);
      font-size: 1rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.5rem;
    }

    & .section__description {
      color: var(--white, #fff);
      font-size: 1.375rem;
      font-style: normal;
      font-weight: 600;
      line-height: 1.75rem;
    }
  }

  & .section__action {
    background: var(--white, #fff);
    color: var(--gray-950, #14161a);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;

    &:hover {
      color: var(--gray-700, #4e555f);
    }

    &:focus {
      outline: none;
    }
  }

  @media ${a.down("S")} {
    padding: 2rem;
    min-height: 17.5rem;
    height: auto;

    & .section__text {
      gap: 0.5rem;

      & .section__title {
        font-size: 0.875rem;
        line-height: 1.25rem;
      }

      & .section__description {
        font-size: 1rem;
        line-height: 1.5rem;
      }
    }
  }
`,y=h.forwardRef(({title:r,description:o,buttonText:i,imageUrl:l,backgroundColor:c="none",handleSelectCard:d=()=>{},handleButtonAction:g=()=>{},selectAction:s,LinkComponent:e},f)=>{const _=e||"a";return n.jsxs(p,{ref:f,backgroundImage:l,backgroundColor:c,onClick:d,as:_,...e?{to:`/${s}`}:{href:`/${s}`},children:[n.jsxs("div",{className:"section__text",children:[r&&n.jsx("div",{className:"section__title",children:r}),o&&n.jsx("div",{className:"section__description",children:o})]}),n.jsx(m,{text:i,onClick:t=>{t==null||t.preventDefault(),t==null||t.stopPropagation(),g()},borderRadius:"regular",color:"gray",className:"section__action"})]})}),v=u.styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;

  & .section__title {
    color: var(--gray-950, #14161a);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2rem;
    letter-spacing: -0.0294rem;
  }

  & .section__items {
    display: grid;
    grid-template-columns: repeat(${r=>r==null?void 0:r.numOfColumns}, 1fr);
    gap: 1rem;
    width: 100%;
  }

  @media ${a.down("M")} {
    & .section__items {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media ${a.down("S")} {
    & .section__title {
      font-size: 1.375rem;
      line-height: 1.75rem;
    }
  }

  @media ${a.down("XS")} {
    & .section__items {
      grid-template-columns: 1fr;
    }
  }
`,b=h.forwardRef(({title:r,items:o,isLoading:i=!1,numOfColumns:l=4,onSelectCard:c=()=>{},onButtonAction:d=()=>{},LinkComponent:g},s)=>n.jsxs(v,{ref:s,numOfColumns:l,className:"lp-section lp-overlay-general-cards-section",children:[n.jsx("div",{className:"section__title",children:r}),n.jsx(x.SuspenseBlogsSectionDetailed,{isLoading:i,keyPrefix:"overlay-general-cards-skeleton",children:n.jsx("div",{className:"section__items",children:o==null?void 0:o.map((e,f)=>n.jsx(y,{title:e==null?void 0:e.title,description:e==null?void 0:e.description,imageUrl:e==null?void 0:e.imageUrl,buttonText:e==null?void 0:e.buttonText,backgroundColor:e==null?void 0:e.backgroundColor,handleSelectCard:()=>c(e),handleButtonAction:()=>d(e),selectAction:e==null?void 0:e.selectAction,LinkComponent:g},`overlay-general-card__${f+1}`))})})]}));module.exports=b;