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

React component library

"use strict";const r=require("react/jsx-runtime"),p=require("react"),S=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),j=require("./breakpoints-CcVm-gVm.cjs"),$=require("./useDetectMobile-DYV6V1yw.cjs"),g=require("./utils-BK6B_Y9X.cjs"),C=require("./style-cJUZrJoG.cjs"),B=require("./Button.cjs"),M=require("./Link.cjs"),T=require("./index-DOkcmaFO.cjs"),D=require("./index-BskHxjAq.cjs"),L=S.styled.div`
  display: grid;
  grid-template-columns: ${s=>`repeat(${s.limit},  minmax(0, 1fr))`};
  gap: 1.25rem;

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

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

  @media ${j.down("XS")} {
    grid-template-columns: repeat(1, 1fr);
  }
`,U=S.styled.a`
  text-decoration: none;
  color: var(--gray-950);
  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;
  min-height: 21.5625rem;
  cursor: pointer;

  & 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: ${g.linearGradientAnimation("-90deg")};
  }

  & .action {
    padding: 0 1rem 1rem 1rem;
    margin-top: auto;
    color: var(--gray-950, #14161a);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: -0.0056rem;

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

  & .tags-wr {
    display: flex;
    flex-wrap: wrap;

    gap: 0.5rem;
    padding: 1rem;
  }
`,W=S.styled.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);
    ${g.truncateTextInRows(3)}
  }
`,z=p.forwardRef((s,v)=>{const{title:u,imageUrl:b,text:w,options:n,onCardClick:a,readMoreText:i="Read more",metadata:o,titleSlug:c,LinkComponent:d}=s,h=d||"a",m=p.useRef();return r.jsxs(U,{ref:m,name:o==null?void 0:o.name,"data-accessor":o==null?void 0:o.name,className:"blog-card",onClick:t=>a(t,m),as:h,...d?{to:`/blog/${c}`}:{href:`/blog/${c}`},children:[r.jsx(T.ProductImageWrapper,{src:b}),r.jsxs(W,{children:[r.jsx("div",{className:"text-wr-title",children:u}),r.jsx("div",{className:"text-wr",children:w})]}),n&&r.jsx("div",{className:"tags-wr",children:n==null?void 0:n.map((t,f)=>r.jsx(C.BlogTag,{color:t==null?void 0:t.color,children:t==null?void 0:t.name},f))}),r.jsx(M,{className:"action",color:"gray",onClick:a,children:i})]})}),k=p.memo(z),E=p.forwardRef((s,v)=>{const{icon:u,title:b,onButtonAction:w=()=>{},onSelectCard:n=()=>{},buttonLink:a,items:i,buttonText:o,limit:c=3,isLoading:d=!1,getImage:h=()=>{},readMoreText:m="Read more",componentName:t,LinkComponent:f}=s,N=$.useDetectMobile(),q=p.useMemo(()=>r.jsx(r.Fragment,{children:N===!0?i==null?void 0:i.map((e,l)=>r.jsx(k,{isBlog:!0,title:e==null?void 0:e.title,imageUrl:h(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null,text:e==null?void 0:e.description,titleSlug:e==null?void 0:e.titleSlug,readMoreText:m,options:e==null?void 0:e.options,onCardClick:(R,y)=>n(e==null?void 0:e.titleSlug,y),metadata:{name:t,accessor:e==null?void 0:e.accessor},LinkComponent:f},l)):i==null?void 0:i.slice(0,c).map((e,l)=>r.jsx(k,{isBlog:!0,title:e==null?void 0:e.title,imageUrl:h(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null,text:e==null?void 0:e.description,titleSlug:e==null?void 0:e.titleSlug,readMoreText:m,options:e==null?void 0:e.options,onCardClick:(R,y)=>n(e==null?void 0:e.titleSlug,y),metadata:{name:t,accessor:e==null?void 0:e.accessor},LinkComponent:f},l))}),[i]);return r.jsxs(C.RegulatTitleSectionWrapper,{ref:v,className:"lp-section lp-blogs-section-simple",children:[r.jsxs("div",{className:"regular-title",children:[r.jsxs("div",{className:"regular-title-text",children:[g.isDefinedNotEmptyString(u)&&r.jsx("i",{className:u}),r.jsx("span",{children:b})]}),g.isDefinedNotEmptyString(o)&&g.isDefinedNotEmptyString(a)&&!d&&r.jsx(B,{type:"button",btnType:"tinted",color:"neutral",onClick:e=>{var l;(l=e==null?void 0:e.target)==null||l.blur(),w(a)},borderRadius:"curved",className:"button-link",children:o})]}),r.jsx(D.SuspenseBlogsSectionDetailed,{isLoading:d,keyPrefix:"blogs-simple-skeleton",children:r.jsx(L,{limit:c,children:q})})]})});module.exports=E;