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

React component library

import { jsxs as a, jsx as n, Fragment as L } from "react/jsx-runtime";
import { forwardRef as W, useRef as se, useState as de, useEffect as me, Fragment as he } from "react";
import { u as _e } from "./useDetectMobile-B0Jog4jQ.js";
import { n as fe, q as ue } from "./utils-BUdHa0nB.js";
import ve from "./TextInput.js";
import C from "./Icon.js";
import pe from "./Link.js";
import F from "./IconButton.js";
import M from "./DropdownMenu.js";
import q from "./DropdownItem.js";
import { F as ge } from "./tag-CHNc7DhI.js";
import xe from "./BlogProductCardsSection.js";
import { s as E } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { P as we } from "./index-DxYmn1al.js";
import V from "./BlogListSection.js";
import { d as ye } from "./breakpoints-BubDitvo.js";
const be = E.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;
      }
    }
  }
`, Ne = W(
  ({
    perPageOptions: s = [
      { code: 10, name: "Show 10 items" },
      { code: 25, name: "Show 25 items" },
      { code: 50, name: "Show 50 items" }
    ],
    perPage: u,
    handlePerPage: x = () => {
    },
    page: c = 1,
    handlePage: d = () => {
    },
    totalPage: t
  }, _) => {
    var m, y;
    const v = () => {
      c > 1 && (d == null || d(c - 1));
    }, w = () => {
      c < t && (d == null || d(c + 1));
    }, f = (() => {
      const r = [];
      if (t <= 7)
        for (let i = 1; i <= t; i++)
          r.push(i);
      else
        c <= 3 ? r.push(1, 2, 3, "...", t) : c >= t - 2 ? r.push(1, "...", t - 2, t - 1, t) : r.push(1, 2, 3, "...", t);
      return r == null ? void 0 : r.map((i, p) => i === "..." ? /* @__PURE__ */ n(
        "div",
        {
          className: "pagination__page ellipsis",
          children: i
        },
        `pagination-ellipsis__${p}`
      ) : /* @__PURE__ */ n(
        "div",
        {
          onClick: () => d(i),
          className: `pagination__page ${c === i ? "active" : ""}`,
          children: i
        },
        `pagination-page__${p}`
      ));
    })();
    return /* @__PURE__ */ a(be, { className: "pagination", children: [
      /* @__PURE__ */ n(
        M,
        {
          color: "neutral",
          control: ((m = s == null ? void 0 : s.find((r) => (r == null ? void 0 : r.code) === u)) == null ? void 0 : m.name) || ((y = s[0]) == null ? void 0 : y.name),
          placement: "bottom",
          zIndex: 1001,
          className: "pagination__per-page",
          children: s == null ? void 0 : s.map((r, i) => /* @__PURE__ */ n(
            q,
            {
              active: (r == null ? void 0 : r.code) === (u == null ? void 0 : u.code),
              className: "sort-by__item",
              onClick: () => x(r),
              children: r == null ? void 0 : r.name
            },
            `blog-epxlore-section-per-page-option__${i + 1}`
          ))
        }
      ),
      (f == null ? void 0 : f.length) > 1 && /* @__PURE__ */ a("div", { className: "pagination__pages", children: [
        /* @__PURE__ */ n(
          "div",
          {
            className: `pagination__page ${c === 1 ? "disabled" : ""}`,
            onClick: v,
            children: /* @__PURE__ */ n(C, { icon: " mng-lnc-chevron--left" })
          }
        ),
        f,
        /* @__PURE__ */ n(
          "div",
          {
            className: `pagination__page ${c === t ? "disabled" : ""}`,
            onClick: w,
            children: /* @__PURE__ */ n(C, { icon: " mng-lnc-chevron--right" })
          }
        )
      ] })
    ] });
  }
), Se = E.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;
            ${fe(2)}
          }

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

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