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

React component library

"use strict";const t=require("react/jsx-runtime"),g=require("react"),h=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),c=require("./breakpoints-CcVm-gVm.cjs"),y=require("./useDetectMobile-DYV6V1yw.cjs"),j=require("./utils-BK6B_Y9X.cjs"),k=require("./Button.cjs"),S=require("./index-DOkcmaFO.cjs"),b=require("./style-17Ie7d9D.cjs"),$=h.styled.div`
  display: grid;
  grid-template-columns: ${n=>`repeat(${n.limit},  minmax(0, 1fr))`};
  gap: 1.25rem;
  margin: auto;
  width: fit-content;

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

  @media ${c.down("S")} {
    grid-template-columns: repeat(2, 1fr);
  }

  @media ${c.down("XS")} {
    grid-template-columns: repeat(1, 1fr);
  }
`,v=h.styled.a`
  text-decoration: none;
  color: var(--gray-950);
  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;
  align-items: center;

  & button {
    width: fit-content;
    margin-top: 1.5rem;
    color: var(--gray-950, #14161a);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: -0.09px;
  }

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

  @media ${c.down("S")} {
    max-width: unset;
  }
`,q=h.styled.div`
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--gray-950, #14161a);

  & .text-wr-title {
    text-align: center;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.75rem;
  }

  & .text-wr {
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: 0.0156rem;
    ${j.truncateTextInRows(3)}
  }
`,w=g.forwardRef((n,o)=>{const{title:r,image:s,text:m,buttonText:f,onCardClick:d,metadata:i,link:p,LinkComponent:e}=n,l=e||"a",u=g.useRef(),a=C=>{d(C,u)};return t.jsxs(v,{ref:u,name:i==null?void 0:i.name,"data-accessor":i==null?void 0:i.accessor,className:"blog-card",onClick:a,as:l,...e?{to:`/${p}`}:{href:`/${p}`},children:[t.jsx(S.ProductImageWrapper,{src:s}),t.jsxs(q,{children:[t.jsx("div",{className:"text-wr-title",children:r}),t.jsx("div",{className:"text-wr",children:m})]}),t.jsx(k,{borderRadius:"curved",color:"gray",type:"button",btnType:"outline",onClick:a,size:"medium",children:f})]})}),R=h.styled(b.SkeletonAnimationContainer)`
  @media ${c.down("S")} {
    flex-direction: column;
  }
`,T=({keyPrefix:n})=>t.jsx(R,{justifyContent:"center",alignItems:"center",children:[1,2,3].map(o=>t.jsx(b.SkeletonRect,{height:"24.75rem",width:"18.5rem"},`${n}-${o}`))}),B=({keyPrefix:n,isLoading:o=!1,fallbackComponent:r=t.jsx(t.Fragment,{}),children:s})=>t.jsx(g.Suspense,{fallbackComponent:r,children:o===!0?t.jsx(T,{keyPrefix:n}):s}),N=g.forwardRef((n,o)=>{const{items:r,limit:s=3,onSelectCard:m=()=>{},isLoading:f=!1,componentName:d,LinkComponent:i}=n,p=y.useDetectMobile();return t.jsx(B,{isLoading:f,keyPrefix:"blogs-simple-centered-skeleton",children:t.jsx($,{ref:o,limit:s,className:"lp-section lp-blogs-section-simple-centered",children:t.jsx(t.Fragment,{children:p===!0?r==null?void 0:r.map((e,l)=>t.jsx(w,{title:e==null?void 0:e.title,image:(e==null?void 0:e.image)||null,text:e==null?void 0:e.text,buttonText:e==null?void 0:e.buttonText,onCardClick:(u,a)=>m(e,a),metadata:{name:d,accessor:e==null?void 0:e.accessor},link:e==null?void 0:e.link,LinkComponent:i},l)):r==null?void 0:r.slice(0,s).map((e,l)=>t.jsx(w,{title:e==null?void 0:e.title,image:(e==null?void 0:e.image)||null,text:e==null?void 0:e.text,buttonText:e==null?void 0:e.buttonText,onCardClick:(u,a)=>m(e,a),metadata:{name:d,accessor:e==null?void 0:e.accessor},link:e==null?void 0:e.link,LinkComponent:i},l))})})})});module.exports=N;