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

React component library

"use strict";const t=require("react/jsx-runtime"),a=require("react"),p=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),f=require("./consts-CtNoHdBj.cjs"),v=require("./useDetectMobile-D6d5LpdL.cjs"),m=require("./utils-NZLCh-J5.cjs"),k=require("./style-DN1qT8BE.cjs"),C=require("./Button.cjs"),N=require("./Link.cjs"),q=p.newStyled.div`
  display: grid;
  grid-template-columns: ${r=>`repeat(${r.limit},  minmax(0, 1fr))`};
  gap: 1.25rem;

  @media (max-width: ${f.MOBILE_SIZE_PX+"px"}) {
    grid-template-columns: repeat(1, 1fr);
  }
`,j=p.newStyled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  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: 21.5625rem;
  min-height: 21.5625rem;
  cursor: pointer;

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

  & img {
    max-height: 12.5625rem;
    min-height: 12.5625rem;
    object-fit: cover;
    width: 100%;
  }

  & .skeleton-img {
    width: 100%;
    max-height: 12.5625rem;
    min-height: 12.5625rem;
    background-color: ${m.linearGradientAnimation("-90deg")};
  }

  & .action {
    padding: 0 1rem 1rem 1rem;
    margin-top: auto;
  }

  @media (max-width: ${f.MOBILE_SIZE_PX+"px"}) {
  }
`,w=p.newStyled.div`
  padding: 1rem 1rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--gray-950, #14161a);
  border-top: 1px solid var(--gray-95008);

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

  & .text-wr {
    font-weight: 400;
    font-size: 0.875rem;
    flex: 1;
    color: var(--gray-700, #4e555f);
    ${m.truncateTextInRows(3)}
  }
`,R=a.forwardRef(({},r)=>t.jsxs(j,{className:"product-card",children:[t.jsx("div",{className:"skeleton-img"}),t.jsx("div",{className:"card-title"}),t.jsx(w,{})]})),B=a.forwardRef((r,s)=>{const{title:i,image:l,text:o,onCardClick:c,readMoreText:d="Read more"}=r;return t.jsxs(j,{className:"blog-card",onClick:c,children:[t.jsx("img",{src:l}),t.jsxs(w,{children:[t.jsx("div",{className:"text-wr-title",children:i}),t.jsx("div",{className:"text-wr",children:o})]}),t.jsx(N,{className:"action",color:"gray",onClick:c,children:d})]})}),M=({limit:r=3,isLoading:s=!1,keyPrefix:i})=>t.jsx(t.Fragment,{children:Array.from({length:r},(l,o)=>t.jsx(R,{isLoading:s},`${i}-skeleton-product-card-${o}`))}),$=({children:r,fallbackComponent:s=t.jsx(t.Fragment,{}),isLoading:i=!1,limit:l,keyPrefix:o})=>t.jsx(a.Suspense,{fallbackComponent:s,children:i===!0?t.jsx(M,{isLoading:i,limit:l,keyPrefix:o}):r}),h=a.memo(B),_=a.forwardRef((r,s)=>{const{icon:i,title:l,onButtonAction:o=()=>{},onSelectCard:c=()=>{},buttonLink:d,items:n,buttonText:S,limit:u=3,isLoading:x=!1}=r,y=v.useDetectMobile(),b=a.useMemo(()=>t.jsx(t.Fragment,{children:y===!0?n==null?void 0:n.map((e,g)=>t.jsx(h,{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,onCardClick:()=>c(e==null?void 0:e.uuid)},g)):n==null?void 0:n.slice(0,u).map((e,g)=>t.jsx(h,{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,onCardClick:()=>c(e==null?void 0:e.uuid)},g))}),[n]);return t.jsxs(k.RegulatTitleSectionWrapper,{ref:s,children:[t.jsxs("div",{className:"regular-title",children:[t.jsxs("div",{className:"regular-title-text",children:[m.isDefinedNotEmptyString(i)&&t.jsx("i",{className:i}),t.jsx("span",{children:l})]}),m.isDefinedNotEmptyString(d)&&t.jsx(C,{type:"button",btnType:"tinted",color:"gray",onClick:()=>o(d),borderRadius:"curved",children:S})]}),t.jsx(q,{limit:u,children:t.jsx($,{isLoading:x,limit:u,keyPrefix:"explore-landing",children:b})})]})});module.exports=_;