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

React component library

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

  @media (max-width: ${w.MOBILE_SIZE_PX+"px"}) {
    grid-template-columns: repeat(1, 1fr);
  }
`,x=h.newStyled.div`
  display: flex;
  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;
  gap: 0.75rem;
  padding: 1rem;
  min-height: 10.375rem;
  max-height: 10.375rem;

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

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

  & a {
    margin-top: auto;
  }

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

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

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

  & .skeleton-action {
    height: 1.25rem;
    width: 20%;
    background-color: ${a.linearGradientAnimation("-90deg")};
  }

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