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

React component library

"use strict";const t=require("react/jsx-runtime"),a=require("react"),S=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),j=require("./breakpoints-CcVm-gVm.cjs"),x=require("./useDetectMobile-DYV6V1yw.cjs"),w=require("./utils-BK6B_Y9X.cjs"),M=require("./style-cJUZrJoG.cjs"),z=require("./Button.cjs"),D=require("./Link.cjs"),F=require("./index-DOkcmaFO.cjs"),L=require("./index-RrqW9QBJ.cjs"),p=require("./style-17Ie7d9D.cjs"),A=S.styled.div`
  display: grid;
  grid-template-columns: ${n=>`repeat(${n.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);
  }
`,E=S.styled.a`
  text-decoration: none;
  color: var(--gray-950);
  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;

  &:hover {
    cursor: pointer;
  }

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

  & a {
    margin-top: auto;
  }
`,I=S.styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--gray-950, #14161a);

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

  & .text-wr {
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--gray-700, #4e555f);
    ${w.truncateTextInRows(3)}
  }
`,O=a.forwardRef((n,s)=>{const{title:l,imageUrl:c,text:i,buttonText:g,onCardClick:d,metadata:r,link:m,LinkComponent:h}=n,b=h||"a",u=a.useRef(),f=k=>{d(k,u)};return t.jsxs(E,{ref:u,name:r==null?void 0:r.name,"data-accessor":r==null?void 0:r.accessor,className:"blog-card",onClick:f,to:`/${m}`,as:b,...h?{to:`/${m}`}:{href:`/${m}`},children:[t.jsxs(I,{children:[t.jsx("div",{className:"text-wr-title",children:l}),t.jsx("div",{className:"text-wr",children:i}),t.jsx(D,{color:"gray",onClick:f,children:g})]}),t.jsx(F.ProductImageWrapper,{src:c})]})}),U=S.styled(p.SkeletonAnimationColumnContainer)`
  @media ${j.down("S")} {
    & .skeleton__tags {
      & > div {
        width: 100%;
      }
    }

    & .skeleton__cards {
      flex-direction: column;
    }
  }
`,K=({keyPrefix:n})=>t.jsxs(U,{children:[t.jsx(p.SkeletonContainer,{className:"skeleton__tags",children:[1,2,3].map(s=>t.jsx(p.SkeletonRect,{height:"2.25rem",width:"8rem",borderRadius:"1rem"},`${n}-tab-${s}`))}),t.jsx(p.SkeletonContainer,{className:"skeleton__cards",children:[1,2,3].map(s=>t.jsx(p.SkeletonRect,{height:"10.375rem",width:"100%",borderRadius:"1rem"},`${n}-card-${s}`))})]}),P=({keyPrefix:n,isLoading:s=!1,fallbackComponent:l=t.jsx(t.Fragment,{}),children:c})=>t.jsx(a.Suspense,{fallbackComponent:l,children:s===!0?t.jsx(K,{keyPrefix:n}):c}),q=a.memo(O),G=a.forwardRef((n,s)=>{const{icon:l,title:c,items:i,buttonText:g,limit:d=3,options:r,selectedOption:m=[],onButtonAction:h=()=>{},buttonLink:b,onSelectOption:u=()=>{},onSelectAll:f=()=>{},isLoading:k=!1,onSelectCard:v=()=>{},productsToolbarName:T="All",allButton:_=!1,componentName:$,LinkComponent:N}=n,R=x.useDetectMobile(),B=a.useMemo(()=>{var o;return t.jsx(t.Fragment,{children:R===!0?i==null?void 0:i.map((e,y)=>t.jsx(q,{title:e==null?void 0:e.title,imageUrl:(e==null?void 0:e.image)||null,text:e==null?void 0:e.text,buttonText:e==null?void 0:e.buttonText,onCardClick:(W,C)=>v(e,C),metadata:{name:$,accessor:e==null?void 0:e.accessor},link:e==null?void 0:e.link,LinkComponent:N},y)):(o=i==null?void 0:i.slice(0,d))==null?void 0:o.map((e,y)=>t.jsx(q,{title:e==null?void 0:e.title,imageUrl:(e==null?void 0:e.image)||null,text:e==null?void 0:e.text,buttonText:e==null?void 0:e.buttonText,onCardClick:(W,C)=>v(e,C),metadata:{name:$,accessor:e==null?void 0:e.accessor},link:e==null?void 0:e.link,LinkComponent:N},y))})},[i,R,d]);return t.jsxs(M.TitleWithOptionsSectionWrapper,{ref:s,className:"lp-section lp-blogs-section-with-filters",children:[t.jsxs("div",{className:"regular-title",children:[t.jsxs("div",{className:"regular-title-text",children:[w.isDefinedNotEmptyString(l)&&t.jsx("i",{className:l}),t.jsx("span",{children:c})]}),w.isDefinedNotEmptyString(g)&&w.isDefinedNotEmptyString(b)&&!k&&t.jsx(z,{type:"button",btnType:"tinted",color:"neutral",onClick:o=>{var e;(e=o==null?void 0:o.target)==null||e.blur(),h(b)},borderRadius:"curved",children:g})]}),t.jsxs(P,{isLoading:k,keyPrefix:"blogs-with-filters-skeleton",children:[(r==null?void 0:r.length)>0&&t.jsx(L.SelectBar,{items:r,selectedIds:m,onRemove:o=>{u(o)},onSelect:o=>{u(o)},onSelectAll:f,labelKey:"name",valueKey:"code",noMargin:!0,productsToolbarName:T,allButton:_}),t.jsx(A,{limit:d,children:B})]})]})});module.exports=G;