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

React component library

"use strict";const e=require("react/jsx-runtime"),c=require("react"),x=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),u=require("./consts-CtNoHdBj.cjs"),p=require("./style-DN1qT8BE.cjs"),d=require("./utils-NZLCh-J5.cjs"),f=require("./Button.cjs"),m=require("./ThemeProvider.cjs"),j=x.newStyled.div`
  display: grid;
  grid-template-columns: ${n=>`repeat(${n.limit}, 1fr)`};
  gap: 1.25rem;
  justify-items: center;

  @media (max-width: ${u.MOBILE_SIZE_PX+"px"}) {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
`,g=x.newStyled.div`
  width: 100%;
  overflow: hidden;
  position: relative;

  border-radius: 0.75rem;
  background: ${n=>n==null?void 0:n.overlay};
  cursor: pointer;

  & .content-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    padding: 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
    height: 100%;
    width: 100%;
  }

  & button {
    width: fit-content;
    color: var(--gray-950, #14161a);

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

  & .content-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--white, #fff);
    font-size: 1rem;
    font-weight: 500;

    & .content-text-title {
      font-weight: 600;
      ${d.truncateTextInRows(2)}
    }
  }

  & img {
    aspect-ratio: 1 / 1;
    mix-blend-mode: multiply;
    width: 100%;
    object-fit: cover;
  }

  & .img-skeleton {
    background-color: ${d.linearGradientAnimation("-90deg")};
    min-height: 28.75rem;
  }

  &:hover {
    & .content-text {
      color: var(--primary-500, #f59e0b);
    }
  }

  @media (max-width: ${u.MOBILE_SIZE_PX+"px"}) {
    & img,
    .img.skeleton {
      aspect-ratio: unset;
      min-height: 28.75rem;
      max-height: 28.75rem;
    }
  }
`,v=c.forwardRef(({},n)=>e.jsx(g,{ref:n,children:e.jsx("div",{className:"img-skeleton"})})),y=({limit:n=2,isLoading:t=!1,keyPrefix:o})=>e.jsx(e.Fragment,{children:Array.from({length:n},(a,s)=>e.jsx(v,{isLoading:t},`${o}-skeleton-product-card-${s}`))}),w=({children:n,fallbackComponent:t=e.jsx(e.Fragment,{}),isLoading:o=!1,limit:a,keyPrefix:s})=>e.jsx(c.Suspense,{fallbackComponent:t,children:o===!0?e.jsx(y,{isLoading:o,limit:a,keyPrefix:s}):n}),k=c.forwardRef(({title:n,image:t,overlay:o,description:a,actionText:s,handleClick:i=()=>{}},l)=>{const{theme:r}=m.useTheme();return e.jsx(e.Fragment,{children:e.jsxs(g,{ref:l,theme:r,overlay:o,onClick:i,children:[e.jsx("img",{src:t}),e.jsxs("div",{className:"content-wrapper",children:[e.jsxs("div",{className:"content-text",children:[e.jsx("div",{children:n}),e.jsx("div",{className:"content-text-title",children:a})]}),e.jsx(f,{text:s,onClick:i,className:"text__action",size:"medium",color:"gray"})]})]})})}),_=c.memo(k),b=c.forwardRef(({title:n,items:t,limit:o=2,onSelectCard:a=()=>{},isLoading:s=!1},i)=>{const l=c.useMemo(()=>e.jsx(e.Fragment,{children:t&&(t==null?void 0:t.map((r,h)=>e.jsx(_,{title:r==null?void 0:r.title,image:r==null?void 0:r.image,description:r==null?void 0:r.description,actionText:r==null?void 0:r.actionText,overlay:r==null?void 0:r.overlay,handleClick:()=>a(r==null?void 0:r.uuid)},`landing-page-overlay-general-card__${h+1}`)))}),[t,a]);return e.jsxs(p.RegulatTitleSectionWrapper,{ref:i,children:[e.jsx("div",{className:"regular-title center",children:e.jsx("div",{className:"regular-title-text",children:e.jsx("span",{children:n})})}),e.jsx(j,{limit:o,children:e.jsx(w,{isLoading:s,limit:o,keyPrefix:"explore-landing",children:l})})]})});module.exports=b;