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

React component library

"use strict";const t=require("react/jsx-runtime"),s=require("react"),u=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),h=require("./consts-CtNoHdBj.cjs"),b=require("./useDetectMobile-D6d5LpdL.cjs"),g=require("./utils-NZLCh-J5.cjs"),p=require("./Button.cjs"),x=u.newStyled.div`
  display: grid;
  grid-template-columns: ${i=>`repeat(${i.limit},  minmax(0, 1fr))`};
  gap: 1.25rem;

  @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
    grid-template-columns: repeat(1, 1fr);
  }
`,f=u.newStyled.div`
  display: flex;
  width: 100%;
  gap: 1.25rem;
  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;
  max-height: 11.25rem;
  min-height: 11.25rem;

  & img {
    max-height: 11.25rem;
    min-height: 11.25rem;
    min-width: 11.25rem;
    max-width: 11.25rem;
    object-fit: cover;
    width: 100%;
    border-radius: 0.75rem 0 0 0.75rem;
  }

  & .skeleton-img {
    width: 100%;
    max-height: 11.25rem;
    min-height: 12.25rem;
    min-width: 11.25rem;
    max-width: 11.25rem;
    background-color: ${g.linearGradientAnimation("-90deg")};
    border-radius: 0.75rem 0 0 0.75rem;
  }

  @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
    padding: 1rem;
    column-gap: 1.5rem;
    row-gap: 1rem;
    display: grid;
    grid-template-columns: repeat(2, auto);
    max-height: 13.25rem;
    min-height: 13.25rem;
    & .action {
      grid-column: 1 / 3;
    }

    & img,
    .skeleton-img {
      max-height: 7.75rem;
      min-height: 7.75rem;
      min-width: 7.75rem;
      max-width: 7.75rem;
      border-radius: 0.75rem;
    }

    & button {
      width: 100%;
      margin-top: auto;
    }
  }
`,j=u.newStyled.div`
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--gray-950, #14161a);

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

  & .text-wr {
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--gray-700, #4e555f);
    ${g.truncateTextInRows(3)}
  }

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

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

  @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
    padding: 0;
  }
`,y=s.forwardRef((i,a)=>{const{title:r,image:n,text:o,onCardClick:l,buttonText:m}=i,d=b.useDetectMobile();return t.jsxs(f,{className:"blog-card",onClick:l,children:[t.jsx("img",{src:n}),t.jsxs(j,{children:[t.jsx("div",{className:"text-wr-title",children:r}),t.jsx("div",{className:"text-wr",children:o}),d!==!0&&t.jsx(p,{type:"button",btnType:"outline",size:"medium",color:"gray",onClick:l,children:m})]}),d===!0&&t.jsx(p,{className:"action",type:"button",btnType:"outline",size:"medium",color:"gray",onClick:l,children:m})]})}),k=s.forwardRef(({},i)=>t.jsxs(f,{className:"blog-card",children:[t.jsx("div",{className:"skeleton-img"}),t.jsx(j,{children:t.jsx("div",{className:"skeleton-title"})})]})),S=({limit:i=2,isLoading:a=!1,keyPrefix:r})=>t.jsx(t.Fragment,{children:Array.from({length:i},(n,o)=>t.jsx(k,{isLoading:a},`${r}-skeleton-product-card-${o}`))}),v=({children:i,fallbackComponent:a=t.jsx(t.Fragment,{}),isLoading:r=!1,limit:n,keyPrefix:o})=>t.jsx(s.Suspense,{fallbackComponent:a,children:r===!0?t.jsx(S,{isLoading:r,limit:n,keyPrefix:o}):i}),w=s.memo(y),C=s.forwardRef((i,a)=>{const{items:r,onSelectCard:n=()=>{},limit:o=2,isLoading:l=!1}=i,m=b.useDetectMobile(),d=s.useMemo(()=>t.jsx(t.Fragment,{children:m===!0?r==null?void 0:r.map((e,c)=>t.jsx(w,{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:()=>n(e)},c)):r==null?void 0:r.slice(0,o).map((e,c)=>t.jsx(w,{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:()=>n(e)},c))}),[r,m,o,n]);return t.jsx(x,{ref:a,limit:o,children:t.jsx(v,{isLoading:l,limit:o,keyPrefix:"explore-landing",children:d})})});module.exports=C;