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

React component library

"use strict";const n=require("react/jsx-runtime"),x=require("react"),oe=require("./useDetectMobile-DYV6V1yw.cjs"),M=require("./utils-BK6B_Y9X.cjs"),le=require("./TextInput.cjs"),k=require("./Icon.cjs"),de=require("./Link.cjs"),T=require("./IconButton.cjs"),V=require("./DropdownMenu.cjs"),W=require("./DropdownItem.cjs"),me=require("./tag-CWcvCQcz.cjs"),he=require("./BlogProductCardsSection.cjs"),F=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),_e=require("./index-DOkcmaFO.cjs"),L=require("./BlogListSection.cjs"),ue=require("./breakpoints-CcVm-gVm.cjs"),fe=F.styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  width: 100%;

  & .pagination__per-page {
    & button {
      border-radius: 8px;
      border: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
      background: transparent;
      color: var(---gray-950, #14161a);
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.25rem;
    }
  }

  & .pagination__pages {
    display: flex;
    align-items: center;
    border-radius: 0.375rem;

    & .pagination__page {
      display: flex;
      width: 2.5rem;
      height: 2.25rem;
      padding: 0.5rem 1rem;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-top: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
      border-right: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
      border-bottom: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
      color: var(--gray-600, #676e79);
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.25rem;

      &:hover {
        cursor: pointer;
        background: var(--gray-200, #e4e9f0);
      }

      &.active {
        border: 1px solid var(--teal-500, #009ea8);
        background: var(--teal-50, #f4fdff);
        color: var(--teal-500, #009ea8);
      }

      &.disabled {
        cursor: unset;
        border: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
        opacity: 0.4;

        &:hover {
          background: transparent;
        }
      }

      &.ellipsis {
        cursor: unset;

        &:hover {
          background: transparent;
        }
      }

      &:first-of-type {
        border-radius: 0.5rem 0 0 0.5rem;
        border-left: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
      }

      &:last-of-type {
        border-radius: 0 0.5rem 0.5rem 0;
      }
    }
  }
`,xe=x.forwardRef(({perPageOptions:o=[{code:10,name:"Show 10 items"},{code:25,name:"Show 25 items"},{code:50,name:"Show 50 items"}],perPage:u,handlePerPage:p=()=>{},page:a=1,handlePage:l=()=>{},totalPage:t},h)=>{var d,y;const f=()=>{a>1&&(l==null||l(a-1))},w=()=>{a<t&&(l==null||l(a+1))},_=(()=>{const r=[];if(t<=7)for(let i=1;i<=t;i++)r.push(i);else a<=3?r.push(1,2,3,"...",t):a>=t-2?r.push(1,"...",t-2,t-1,t):r.push(1,2,3,"...",t);return r==null?void 0:r.map((i,v)=>i==="..."?n.jsx("div",{className:"pagination__page ellipsis",children:i},`pagination-ellipsis__${v}`):n.jsx("div",{onClick:()=>l(i),className:`pagination__page ${a===i?"active":""}`,children:i},`pagination-page__${v}`))})();return n.jsxs(fe,{className:"pagination",children:[n.jsx(V,{color:"neutral",control:((d=o==null?void 0:o.find(r=>(r==null?void 0:r.code)===u))==null?void 0:d.name)||((y=o[0])==null?void 0:y.name),placement:"bottom",zIndex:1001,className:"pagination__per-page",children:o==null?void 0:o.map((r,i)=>n.jsx(W,{active:(r==null?void 0:r.code)===(u==null?void 0:u.code),className:"sort-by__item",onClick:()=>p(r),children:r==null?void 0:r.name},`blog-epxlore-section-per-page-option__${i+1}`))}),(_==null?void 0:_.length)>1&&n.jsxs("div",{className:"pagination__pages",children:[n.jsx("div",{className:`pagination__page ${a===1?"disabled":""}`,onClick:f,children:n.jsx(k,{icon:" mng-lnc-chevron--left"})}),_,n.jsx("div",{className:`pagination__page ${a===t?"disabled":""}`,onClick:w,children:n.jsx(k,{icon:" mng-lnc-chevron--right"})})]})]})}),ve=F.styled.div`
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  align-self: stretch;

  & button {
    &:focus {
      outline: none;
    }
  }

  & .landing__main-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    max-width: 50rem;

    border-right: 1px solid var(--gray-200, #dddfe4);
    padding-right: 2rem;

    & .section__tags {
      flex-wrap: nowrap;
      width: 100%;
      overflow-x: hidden;
      white-space: nowrap;
    }

    & .pagination {
      padding: 1.25rem 0;
    }

    & .main-content__heading {
      display: flex;
      justify-content: space-between;
      width: 100%;

      & .main-content__tags-nav {
        display: flex;
        gap: 0.25rem;

        & .main-content__tag-nav {
          &:not(:disabled) {
            color: var(--gray-950, #14161a);
            background: var(--neutral-95004, rgba(20, 22, 26, 0.04));

            &:hover {
              background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
            }
          }
        }
      }
    }

    & .main-content__title {
      color: var(--gray-950, #14161a);
      font-size: 1.5rem;
      font-style: normal;
      font-weight: 600;
      line-height: 2rem;
    }

    & .tags__item {
      &:not(.active) {
        background: var(--neutral-95004, rgba(20, 22, 26, 0.04));

        &:hover {
          background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
        }
      }
    }

    & .main-content__items {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;

      & .main-content__divider {
        content: "";
        display: block;
        height: 1px;
        width: 100%;
        background: var(--gray-200, #dddfe4);
      }

      & .blog-card-item {
        background: transparent;
        border: none;
        padding: 0;
      }
    }

    & .main-content__actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      align-self: stretch;
      width: 100%;

      & .main-content__search {
        border-radius: 999px;
        height: 2.5rem;
        min-height: 2.5rem;
        max-width: 23.75rem;
        width: 100%;

        border: 1px solid var(--gray-200, #e4e9f0);
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        outline: none;

        & input::placeholder {
          color: var(--gray-500, #7a8594);
          font-size: 0.875rem;
          font-style: normal;
          font-weight: 400;
          line-height: 1.25rem;
          letter-spacing: 0.0156rem;
        }

        & .main-content__search-prefix {
          color: var(--gray-500, #7a8594);
        }
      }

      & .main-content__sort-by {
        & button {
          border-radius: 999px;
          color: var(--gray-950, #14161a);
          background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
          font-size: 0.875rem;
          font-style: normal;
          font-weight: 500;
          line-height: 1.25rem;
          letter-spacing: -0.0056rem;
        }
      }
    }
  }

  & .landing__side-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    align-self: stretch;

    & .side-content__title {
      color: var(--gray-950, #14161a);
      font-size: 1rem;
      font-style: normal;
      font-weight: 600;
      line-height: 1.5rem;
    }

    & .side-content__link {
      color: var(--gray-950, #14161a);
      font-size: 0.75rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1rem;

      &:hover {
        cursor: pointer;
        text-decoration: underline;
      }
    }

    & .side-content__items {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.25rem;
      align-self: stretch;

      & .side-content__item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        align-self: stretch;
        text-decoration: none;

        &:hover {
          cursor: pointer;
        }

        & .item__image {
          width: 100%;
          max-width: 6rem;
          height: 100%;
          max-height: 3.75rem;
          object-fit: cover;
          border-radius: 0.375rem;
        }

        & .item__content {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 0.25rem;

          & .item__title {
            color: var(--gray-950, #14161a);
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 500;
            line-height: 1.25rem;
            ${M.truncateTextInRows(2)}
          }

          & .item__description {
            color: var(--gray-600, #676e79);
            font-size: 0.75rem;
            font-style: normal;
            font-weight: 400;
            line-height: 1rem;
          }
        }
      }
    }
  }

  @media ${ue.down("S")} {
    flex-direction: column;

    & .landing__main-content {
      width: 100%;
      max-width: 100%;
      padding-right: 0;
      border-right: none;

      & .section__tags {
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
      }

      & .main-content__actions {
        gap: 0.5rem;
      }

      & .main-content__items {
        width: 100%;

        & .main-content__divider {
          display: none;
        }

        & .separated {
          gap: 1.25rem;

          & > div:not(:last-of-type)::after {
            display: none;
          }
        }

        & .blog-product-cards-section {
          border-radius: 0;
        }
      }

      & .pagination {
        justify-content: center;

        & .pagination__per-page {
          display: none;
        }
      }
    }

    & .landing__side-content {
      display: none;
    }
  }
`,ge=x.forwardRef(({mainTitle:o,sideTitle:u,tags:p,selectedTag:a,handleSelectTag:l=()=>{},blogs:t,miniBlogs:h,products:f,blogsLoading:w=!1,productsLoading:q=!1,sortingOptions:_,sortBy:d,handleSortBy:y=()=>{},allTagText:r="All",searchPlaceholderText:i="Search blogs",timeToReadText:v="{0} min read",getBlogImageUrl:b=()=>{},handleSelectBlog:j=()=>{},handleSelectBlogTag:C=()=>{},handleShareBlog:$=()=>{},showAllButtonLink:R,showAllButtonText:E="Show all products",viewAllButtonText:H="View all (11)",handleViewAll:G=()=>{},handleShowAll:J=()=>{},handleSelectProduct:K=()=>{},getProductImageUrl:Q=()=>{},page:U,handlePage:N=()=>{},perPage:X,handlePerPage:Y=()=>{},totalPage:z=0,perPageOptions:Z,handleSearch:O=()=>{},onBookmark:D=()=>{},bookmarkComponent:A=n.jsx(n.Fragment,{}),componentName:S,LinkComponent:g,showPerPage:B=!1},P)=>{const ee=e=>{document.getElementById("landing__container").scrollIntoView({behavior:"smooth",block:"start"}),N==null||N(e)},s=x.useRef(null),ne=oe.useDetectMobile(),[m,te]=x.useState({arrowsVisible:!1,leftArrowDisabled:!1,rightArrowDisabled:!1});x.useEffect(()=>{const e=s==null?void 0:s.current;if(!e)return;const c=()=>{const se=e.scrollWidth-e.clientWidth;te(ce=>({...ce,arrowsVisible:e.clientWidth<e.scrollWidth,leftArrowDisabled:e.scrollLeft<=0,rightArrowDisabled:e.scrollLeft>=se}))},I=new ResizeObserver(c);return I.observe(e),c(),e.addEventListener("scroll",c),()=>{I.disconnect(),e.removeEventListener("scroll",c)}},[]);const re=()=>{var e;(e=s==null?void 0:s.current)==null||e.scrollBy({left:100,behavior:"smooth"})},ie=()=>{var e;(e=s==null?void 0:s.current)==null||e.scrollBy({left:-100,behavior:"smooth"})},ae=g||"a";return n.jsxs(ve,{ref:P,id:"landing__container",className:"lp-section lp-blog-explore-section",children:[n.jsxs("div",{className:"landing__main-content",children:[n.jsxs("div",{className:"main-content__heading",children:[n.jsx("div",{className:"main-content__title",children:o}),!ne&&(m==null?void 0:m.arrowsVisible)&&n.jsxs("div",{className:"main-content__tags-nav",children:[n.jsx(T,{icon:"chevron-left",borderRadius:"curved",btnType:"tinted",color:"neutral",disabled:m==null?void 0:m.leftArrowDisabled,className:"main-content__tag-nav",onClick:ie}),n.jsx(T,{icon:"chevron-right",borderRadius:"curved",btnType:"tinted",color:"neutral",disabled:m==null?void 0:m.rightArrowDisabled,className:"main-content__tag-nav",onClick:re})]})]}),p&&n.jsx(me.FaqSectionTags,{ref:s,tags:p,allTagText:r,selectedTagCode:a,onSelectTag:l}),n.jsxs("div",{className:"main-content__actions",children:[n.jsx(le,{className:"main-content__search",placeholder:i,debounceTime:200,prefix:n.jsx(k,{icon:" mng-lnc-search",sizeInUnits:"1.25rem",className:"main-content__search-prefix"}),color:"neutral",onChange:O}),n.jsx(V,{color:"neutral",control:d==null?void 0:d.name,zIndex:1001,className:"main-content__sort-by",children:_==null?void 0:_.map((e,c)=>n.jsx(W,{active:(e==null?void 0:e.code)===(d==null?void 0:d.code),className:"sort-by__item",onClick:()=>y(e),children:e==null?void 0:e.name},`blog-epxlore-section-sorting-option__${c+1}`))})]}),n.jsxs("div",{className:"main-content__items",children:[t&&(t==null?void 0:t.length)>0&&n.jsx(L,{timeToReadText:v,items:t==null?void 0:t.slice(0,5),isLoading:w,getImage:b,onSelectCard:j,onSelectOption:C,onShare:$,onBookmark:D,bookmarkComponent:A,componentName:S,LinkComponent:g}),n.jsx("div",{className:"main-content__divider"}),f&&(f==null?void 0:f.length)>0&&n.jsx(he,{buttonText:E,buttonLink:R,onButtonAction:J,onSelectCard:K,items:f,isLoading:q,getImage:Q,isHighlight:!0,componentName:S,LinkComponent:g}),n.jsx("div",{className:"main-content__divider"}),t&&(t==null?void 0:t.length)>0&&n.jsx(L,{timeToReadText:v,items:t==null?void 0:t.slice(5),isLoading:w,getImage:b,onSelectCard:j,onSelectOption:C,onShare:$,onBookmark:D,bookmarkComponent:A,componentName:S,LinkComponent:g})]}),(z>1||B)&&n.jsx(xe,{perPageOptions:Z,perPage:X,handlePerPage:Y,page:U,handlePage:ee,totalPage:z})]}),n.jsxs("div",{className:"landing__side-content",children:[u&&n.jsx("div",{className:"side-content__title",children:u}),h&&(h==null?void 0:h.length)>0&&n.jsxs(n.Fragment,{children:[n.jsx("div",{className:"side-content__items",children:h==null?void 0:h.map((e,c)=>n.jsx(x.Fragment,{children:n.jsxs(ae,{className:"side-content__item",onClick:()=>j(e),...g?{to:`/blog/${e==null?void 0:e.titleSlug}`}:{href:`/blog/${e==null?void 0:e.titleSlug}`},children:[n.jsx(_e.ProductImageWrapper,{src:b(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null,alt:`Mini blog ${c+1}`,className:"item__image"}),n.jsxs("div",{className:"item__content",children:[n.jsx("div",{className:"item__title",children:e==null?void 0:e.title}),n.jsx("div",{className:"item__description",children:M.formatLocaleDateString(e==null?void 0:e.publishedAt)})]})]})},`mini_blg_${c}`))}),n.jsx(de,{onClick:G,className:"side-content__link",children:H})]})]})]})});module.exports=ge;