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

React component library

"use strict";const t=require("react/jsx-runtime"),a=require("react"),u=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),h=require("./consts-CtNoHdBj.cjs"),b=require("./useDetectMobile-D6d5LpdL.cjs"),m=require("./utils-NZLCh-J5.cjs"),j=require("./Button.cjs"),S=u.newStyled.div`
  display: grid;
  grid-template-columns: ${i=>`repeat(${i.limit},  minmax(0, 1fr))`};
  gap: 1.25rem;
  margin: auto;
  width: fit-content;
  @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
    grid-template-columns: repeat(1, 1fr);
  }
`,p=u.newStyled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 18.125rem;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
  background-color: var(--white);
  border-radius: 0.75rem;
  border: 1px solid var(--gray-95008);
  overflow: hidden;
  gap: 1.5rem;
  padding: 2rem 1.25rem;
  min-height: 22.5rem;
  max-height: 22.5rem;
  align-items: center;

  & button {
    width: fit-content;
    margin-top: auto;
  }

  & img {
    max-width: 6rem;
    min-width: 6rem;
    min-height: 6rem;
    max-height: 6rem;
    border-radius: 0.75rem;
    object-fit: cover;
  }

  & .skeleton-img {
    max-width: 6rem;
    min-width: 6rem;
    min-height: 6rem;
    max-height: 6rem;
    border-radius: 0.75rem;
    background-color: ${m.linearGradientAnimation("-90deg")};
  }

  @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
    max-width: unset;
  }
`,f=u.newStyled.div`
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--gray-950, #14161a);

  & .text-wr-title {
    font-weight: 600;
    font-size: 1.375rem;
  }

  & .skeleton-title {
    height: 1.75rem;
    width: 80%;
    background-color: ${m.linearGradientAnimation("-90deg")};
  }

  & .text-wr {
    font-weight: 400;
    font-size: 0.875rem;
    flex: 1;
    color: var(--gray-700, #4e555f);
    ${m.truncateTextInRows(3)}
  }
`,C=a.forwardRef((i,l)=>{const{onCardClick:r}=i;return t.jsxs(p,{className:"product-card",onClick:r,children:[t.jsx("div",{"skeleton-img":!0}),t.jsx(f,{children:t.jsx("div",{className:"skeleton-title"})})]})}),k=a.forwardRef((i,l)=>{const{title:r,image:n,text:o,buttonText:s,onCardClick:d}=i;return t.jsxs(p,{className:"blog-card",onClick:d,children:[t.jsx("img",{src:n}),t.jsxs(f,{children:[t.jsx("div",{className:"text-wr-title",children:r}),t.jsx("div",{className:"text-wr",children:o})]}),t.jsx(j,{borderRadius:"curved",color:"gray",type:"button",btnType:"outline",onClick:d,size:"medium",children:s})]})}),y=({limit:i=3,isLoading:l=!1,keyPrefix:r})=>t.jsx(t.Fragment,{children:Array.from({length:i},(n,o)=>t.jsx(C,{isLoading:l},`${r}-skeleton-product-card-${o}`))}),v=({children:i,fallbackComponent:l=t.jsx(t.Fragment,{}),isLoading:r=!1,limit:n,keyPrefix:o})=>t.jsx(a.Suspense,{fallbackComponent:l,children:r===!0?t.jsx(y,{isLoading:r,limit:n,keyPrefix:o}):i}),g=a.memo(k),x=a.forwardRef((i,l)=>{const{items:r,limit:n=3,onSelectCard:o=()=>{},isLoading:s=!1}=i,d=b.useDetectMobile(),w=a.useMemo(()=>t.jsx(t.Fragment,{children:d===!0?r==null?void 0:r.map((e,c)=>t.jsx(g,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,text:e==null?void 0:e.text,titleSlug:e==null?void 0:e.titleSlug,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>o(e==null?void 0:e.uuid)},c)):r==null?void 0:r.slice(0,n).map((e,c)=>t.jsx(g,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,text:e==null?void 0:e.text,titleSlug:e==null?void 0:e.titleSlug,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>o(e==null?void 0:e.uuid)},c))}),[r,d,n,o]);return t.jsx(S,{ref:l,limit:n,children:t.jsx(v,{isLoading:s,limit:n,keyPrefix:"explore-landing",children:w})})});module.exports=x;