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

React component library

"use strict";const e=require("react/jsx-runtime"),a=require("react"),I=require("./Icon.cjs"),b=require("./IconButton.cjs"),d=require("./utils-BK6B_Y9X.cjs"),x=require("./index-DOkcmaFO.cjs"),L=require("./style-cJUZrJoG.cjs"),S=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),T=require("./breakpoints-CcVm-gVm.cjs"),o=require("./style-17Ie7d9D.cjs"),F=S.styled.a`
  text-decoration: none;
  color: var(--gray-950);
  display: flex;
  padding: 1rem 0 1rem 1rem;
  align-items: center;
  gap: 1.25rem;
  border-radius: 1.25rem;
  align-items: stretch;
  border: 1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08));
  background: var(--white, #fff);
  min-height: 9.5rem;
  position: relative;
  width: 100%;

  & .image-container {
    position: relative;
    display: inline-block;
  }

  .image-container .action {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;

    & .mobile-only {
      display: none;
    }
  }

  & .mobile-only {
    display: none;
  }

  &:hover {
    cursor: pointer;
  }

  & .wrapper__image {
    width: 100%;
    object-fit: cover;
    height: auto;
    max-height: 9.5rem;
    max-width: 17.75rem;
    min-width: 17.75rem;
    border-radius: 0.75rem;
  }

  & .wrapper__content {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;

    & .wrapper__subcontent {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
      width: 100%;

      & .wrapper__title {
        color: var(--gray-950, #14161a);
        font-size: 1rem;
        font-style: normal;
        font-weight: 600;
        line-height: 1.5rem;
        letter-spacing: 0.1px;
        ${d.truncateTextInRows(3)}
      }

      & .wrapper__tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
      }
    }

    & .wrapper__info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      & .action {
        align-self: flex-start;
        & > button {
          min-height: 1rem;
        }
      }

      & .info__content {
        display: flex;
        align-items: center;
        padding-right: 1rem;

        &:first-of-type {
          flex-grow: 1;
          gap: 1rem;
        }

        & .info__text {
          display: flex;
          gap: 0.5rem;
          color: var(--gray-600, #676e79);
          font-size: 0.75rem;
          font-style: normal;
          font-weight: 400;
          line-height: 1rem;
          letter-spacing: 0.4px;

          & i {
            color: var(--gray-300, #bcc4cf);
          }
        }
      }
    }
  }

  @media ${T.down("S")} {
    flex-direction: column;
    padding: 0;
    background: transparent;
    border: none;

    & .wrapper__image {
      max-width: 100%;
      min-width: 100%;
    }

    & .desktop-only {
      display: none !important;
    }

    & .mobile-only {
      display: block;
    }

    & .wrapper__subcontent {
      order: 1;
    }

    & .wrapper__tags-action {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
    }

    & .wrapper__tags {
      flex: 1;
    }

    & .wrapper__content {
      gap: 1rem;

      & .wrapper__info {
        gap: 0.5rem;
        justify-content: space-between;
        width: 100%;
        order: 0;

        & .info__content {
          align-items: flex-start;
          justify-content: space-between;
          width: 100%;
        }
      }
    }
  }
`,O=a.forwardRef(({blogUuid:s,title:t,imageUrl:m,options:i,publishedAt:p,timeToReadText:w="{0} min read",timeToRead:j=0,numberOfLikes:y=0,numberOfComments:k=0,isBookmarked:u=!1,onSelectCard:v=()=>{},onBookmark:C=()=>{},onShare:f=()=>{},bookmarkComponent:c=e.jsx(e.Fragment,{}),metadata:l,titleSlug:h,LinkComponent:r,hasShare:_=!0,hasDelete:g=!1,onDelete:N=()=>{}},R)=>{const z=r||"a",B=()=>d.isDefined(c)?a.cloneElement(c,{key:`bookmark_blog__${s}__${u}`,isBookmarked:u,blogUuid:s,onBookmark:($,P)=>C($,P),ref:R,componentName:"ExploreBlogSectionCard"}):e.jsx(e.Fragment,{}),q=a.useRef();return e.jsxs(F,{ref:q,name:l==null?void 0:l.name,"data-accessor":l==null?void 0:l.accessor,onClick:n=>v(n,q),className:"blog-card-item",as:z,...r?{to:`/blog/${h}`}:{href:`/blog/${h}`},children:[e.jsxs("div",{className:"image-container",children:[g&&e.jsx("div",{className:"action mobile-only",onClick:n=>{n==null||n.preventDefault(),n==null||n.stopPropagation()},children:e.jsx(b,{icon:" mng-lnc-close",borderRadius:"curved",type:"button",btnType:"filled",color:"neutral",size:"medium",onClick:()=>{N()}})}),e.jsx(x.ProductImageWrapper,{src:m,className:"wrapper__image"})]}),e.jsxs("div",{className:"wrapper__content",children:[e.jsxs("div",{className:"wrapper__subcontent",children:[e.jsxs("div",{className:"wrapper__info",children:[e.jsx("div",{className:"wrapper__title",children:t}),g&&e.jsx("div",{className:"action desktop-only",onClick:n=>{n==null||n.preventDefault(),n==null||n.stopPropagation()},children:e.jsx(b,{icon:" mng-lnc-close",borderRadius:"curved",btnType:"basic",color:"neutral",onClick:()=>{N()}})})]}),e.jsxs("div",{className:"wrapper__tags-action",children:[e.jsx("div",{className:"wrapper__tags",children:i&&(i==null?void 0:i.map((n,$)=>e.jsx(L.BlogTag,{color:n==null?void 0:n.color,children:n==null?void 0:n.name},`blog-card-sponsored-option__${$+1}`)))}),e.jsxs("div",{className:"info__content mobile-only",onClick:n=>{n.stopPropagation(),n.preventDefault()},children:[e.jsx(B,{}),_&&e.jsx(b,{icon:" mng-lnc-share",borderRadius:"curved",btnType:"basic",color:"neutral",onClick:()=>{f()}})]})]})]}),e.jsxs("div",{className:"wrapper__info",children:[e.jsxs("div",{className:"info__content",children:[e.jsx("div",{className:"info__text",children:`${d.formatLocaleDateString(p)} • ${d.formatString(w,j)}`}),e.jsxs("div",{className:"info__text",children:[e.jsxs("div",{children:[e.jsx(I,{icon:" mng-lnc-thumbs-up--filled",sizeInUnits:"1rem"}),d.getRoundedNumber(y)]}),e.jsxs("div",{children:[e.jsx(I,{icon:" mng-lnc-messages-filled",sizeInUnits:"1rem"}),d.getRoundedNumber(k)]})]})]}),e.jsxs("div",{className:"info__content desktop-only",onClick:n=>{n==null||n.preventDefault(),n==null||n.stopPropagation()},children:[e.jsx(B,{}),_&&e.jsx(b,{icon:" mng-lnc-share",borderRadius:"curved",btnType:"basic",color:"neutral",onClick:()=>{f()}})]})]})]})]})}),U=S.styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;

  &.separated {
    gap: 2.5rem;

    & > div {
      position: relative;
    }

    & > div:not(:last-of-type)::after {
      content: "";
      display: block;
      height: 1px;
      width: 100%;
      background: var(--gray-200, #dddfe4);
      position: absolute;
      left: 0;
      bottom: -1.25rem;
    }
  }
`,A=S.styled(o.SkeletonAnimationColumnContainer)`
  @media ${T.down("S")} {
    & > div {
      flex-direction: column;
    }
  }
`,W=({keyPrefix:s})=>e.jsx(A,{children:[1,2,3,4,5].map(t=>e.jsxs(o.SkeletonContainer,{children:[e.jsx(o.SkeletonRect,{height:"9.5rem",width:"17.75rem"}),e.jsxs(o.SkeletonColumnContainer,{children:[e.jsx(o.SkeletonRect,{height:"1.5rem",width:"100%"}),e.jsxs(o.SkeletonContainer,{children:[e.jsx(o.SkeletonRect,{width:"5rem",height:"1.25rem"}),e.jsx(o.SkeletonRect,{width:"5rem",height:"1.25rem"}),e.jsx(o.SkeletonRect,{width:"5rem",height:"1.25rem"}),e.jsx(o.SkeletonRect,{width:"5rem",height:"1.25rem"})]})]})]},`${s}-${t}`))}),E=({keyPrefix:s,isLoading:t=!1,fallbackComponent:m=e.jsx(e.Fragment,{}),children:i})=>e.jsx(a.Suspense,{fallbackComponent:m,children:t===!0?e.jsx(W,{keyPrefix:s}):i}),M=a.memo(O),D=a.forwardRef(({timeToReadText:s="{0} min read",items:t,isLoading:m=!1,onSelectCard:i=()=>{},onShare:p=()=>{},onBookmark:w=()=>{},getImage:j=()=>{},isSeparated:y=!0,bookmarkComponent:k=e.jsx(e.Fragment,{}),componentName:u,LinkComponent:v,hasShare:C=!0,hasDelete:f=!1,onDelete:c=()=>{}},l)=>{const h=a.useMemo(()=>t==null?void 0:t.map((r,_)=>{var g;return e.jsx(M,{blogUuid:r==null?void 0:r.uuid,title:r==null?void 0:r.title,titleSlug:r==null?void 0:r.titleSlug,options:r==null?void 0:r.options,publishedAt:r==null?void 0:r.publishedAt,timeToReadText:s,timeToRead:r==null?void 0:r.timeToRead,numberOfLikes:r==null?void 0:r.numberOfLikes,numberOfComments:r==null?void 0:r.numberOfComments,isSponsored:r==null?void 0:r.isSponsored,isBookmarked:r==null?void 0:r.isBookmarked,onSelectCard:(N,R)=>i==null?void 0:i(r,R),hasShare:C,hasDelete:f,onDelete:()=>c==null?void 0:c(r),onShare:()=>p==null?void 0:p(r),onBookmark:w,imageUrl:j(r==null?void 0:r.imageUrl,r==null?void 0:r.uuid)||null,bookmarkComponent:k,metadata:{name:u,accessor:r==null?void 0:r.accessor},LinkComponent:v},`blog-card-item__${_+1}__${(g=r==null?void 0:r.isBookmarked)==null?void 0:g.toString()}`)}),[t]);return e.jsx(E,{isLoading:m,keyPrefix:"blog-list-skeleton",children:e.jsx(U,{ref:l,className:`lp-section lp-blog-list-section${y?" separated":""}`,children:h})})});module.exports=D;