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

React component library

import { jsxs as n, jsx as i, Fragment as b } from "react/jsx-runtime";
import { forwardRef as L, useRef as W, cloneElement as E, Suspense as M, memo as q, useMemo as D } from "react";
import z from "./Icon.js";
import _ from "./IconButton.js";
import { n as F, q as G, s as H, v as I, m as J } from "./utils-BUdHa0nB.js";
import { P as K } from "./index-DxYmn1al.js";
import { B as Q } from "./style-CP_urKvc.js";
import { s as S } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as O } from "./breakpoints-BubDitvo.js";
import { b as V, c as P, a as c, e as X } from "./style-NhzYtIA7.js";
const Y = S.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;
        ${F(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 ${O("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%;
        }
      }
    }
  }
`, Z = L(
  ({
    blogUuid: a,
    title: t,
    imageUrl: m,
    options: o,
    publishedAt: d,
    timeToReadText: w = "{0} min read",
    timeToRead: y = 0,
    numberOfLikes: v = 0,
    numberOfComments: k = 0,
    isBookmarked: g = !1,
    onSelectCard: C = () => {
    },
    onBookmark: N = () => {
    },
    onShare: f = () => {
    },
    bookmarkComponent: s = /* @__PURE__ */ i(b, {}),
    metadata: l,
    titleSlug: h,
    LinkComponent: e,
    hasShare: u = !0,
    hasDelete: p = !1,
    onDelete: $ = () => {
    }
  }, B) => {
    const U = e || "a", j = () => J(s) ? E(s, {
      key: `bookmark_blog__${a}__${g}`,
      isBookmarked: g,
      blogUuid: a,
      onBookmark: (R, A) => N(R, A),
      ref: B,
      componentName: "ExploreBlogSectionCard"
    }) : /* @__PURE__ */ i(b, {}), T = W();
    return /* @__PURE__ */ n(
      Y,
      {
        ref: T,
        name: l == null ? void 0 : l.name,
        "data-accessor": l == null ? void 0 : l.accessor,
        onClick: (r) => C(r, T),
        className: "blog-card-item",
        as: U,
        ...e ? { to: `/blog/${h}` } : { href: `/blog/${h}` },
        children: [
          /* @__PURE__ */ n("div", { className: "image-container", children: [
            p && /* @__PURE__ */ i(
              "div",
              {
                className: "action mobile-only",
                onClick: (r) => {
                  r == null || r.preventDefault(), r == null || r.stopPropagation();
                },
                children: /* @__PURE__ */ i(
                  _,
                  {
                    icon: " mng-lnc-close",
                    borderRadius: "curved",
                    type: "button",
                    btnType: "filled",
                    color: "neutral",
                    size: "medium",
                    onClick: () => {
                      $();
                    }
                  }
                )
              }
            ),
            /* @__PURE__ */ i(K, { src: m, className: "wrapper__image" })
          ] }),
          /* @__PURE__ */ n("div", { className: "wrapper__content", children: [
            /* @__PURE__ */ n("div", { className: "wrapper__subcontent", children: [
              /* @__PURE__ */ n("div", { className: "wrapper__info", children: [
                /* @__PURE__ */ i("div", { className: "wrapper__title", children: t }),
                p && /* @__PURE__ */ i(
                  "div",
                  {
                    className: "action desktop-only",
                    onClick: (r) => {
                      r == null || r.preventDefault(), r == null || r.stopPropagation();
                    },
                    children: /* @__PURE__ */ i(
                      _,
                      {
                        icon: " mng-lnc-close",
                        borderRadius: "curved",
                        btnType: "basic",
                        color: "neutral",
                        onClick: () => {
                          $();
                        }
                      }
                    )
                  }
                )
              ] }),
              /* @__PURE__ */ n("div", { className: "wrapper__tags-action", children: [
                /* @__PURE__ */ i("div", { className: "wrapper__tags", children: o && (o == null ? void 0 : o.map((r, R) => /* @__PURE__ */ i(
                  Q,
                  {
                    color: r == null ? void 0 : r.color,
                    children: r == null ? void 0 : r.name
                  },
                  `blog-card-sponsored-option__${R + 1}`
                ))) }),
                /* @__PURE__ */ n(
                  "div",
                  {
                    className: "info__content mobile-only",
                    onClick: (r) => {
                      r.stopPropagation(), r.preventDefault();
                    },
                    children: [
                      /* @__PURE__ */ i(j, {}),
                      u && /* @__PURE__ */ i(
                        _,
                        {
                          icon: " mng-lnc-share",
                          borderRadius: "curved",
                          btnType: "basic",
                          color: "neutral",
                          onClick: () => {
                            f();
                          }
                        }
                      )
                    ]
                  }
                )
              ] })
            ] }),
            /* @__PURE__ */ n("div", { className: "wrapper__info", children: [
              /* @__PURE__ */ n("div", { className: "info__content", children: [
                /* @__PURE__ */ i("div", { className: "info__text", children: `${G(
                  d
                )} • ${H(w, y)}` }),
                /* @__PURE__ */ n("div", { className: "info__text", children: [
                  /* @__PURE__ */ n("div", { children: [
                    /* @__PURE__ */ i(z, { icon: " mng-lnc-thumbs-up--filled", sizeInUnits: "1rem" }),
                    I(v)
                  ] }),
                  /* @__PURE__ */ n("div", { children: [
                    /* @__PURE__ */ i(z, { icon: " mng-lnc-messages-filled", sizeInUnits: "1rem" }),
                    I(k)
                  ] })
                ] })
              ] }),
              /* @__PURE__ */ n(
                "div",
                {
                  className: "info__content desktop-only",
                  onClick: (r) => {
                    r == null || r.preventDefault(), r == null || r.stopPropagation();
                  },
                  children: [
                    /* @__PURE__ */ i(j, {}),
                    u && /* @__PURE__ */ i(
                      _,
                      {
                        icon: " mng-lnc-share",
                        borderRadius: "curved",
                        btnType: "basic",
                        color: "neutral",
                        onClick: () => {
                          f();
                        }
                      }
                    )
                  ]
                }
              )
            ] })
          ] })
        ]
      }
    );
  }
), x = S.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;
    }
  }
`, ee = S(V)`
  @media ${O("S")} {
    & > div {
      flex-direction: column;
    }
  }
`, re = ({ keyPrefix: a }) => /* @__PURE__ */ i(ee, { children: [1, 2, 3, 4, 5].map((t) => /* @__PURE__ */ n(P, { children: [
  /* @__PURE__ */ i(c, { height: "9.5rem", width: "17.75rem" }),
  /* @__PURE__ */ n(X, { children: [
    /* @__PURE__ */ i(c, { height: "1.5rem", width: "100%" }),
    /* @__PURE__ */ n(P, { children: [
      /* @__PURE__ */ i(c, { width: "5rem", height: "1.25rem" }),
      /* @__PURE__ */ i(c, { width: "5rem", height: "1.25rem" }),
      /* @__PURE__ */ i(c, { width: "5rem", height: "1.25rem" }),
      /* @__PURE__ */ i(c, { width: "5rem", height: "1.25rem" })
    ] })
  ] })
] }, `${a}-${t}`)) }), ie = ({
  keyPrefix: a,
  isLoading: t = !1,
  fallbackComponent: m = /* @__PURE__ */ i(b, {}),
  children: o
}) => /* @__PURE__ */ i(M, { fallbackComponent: m, children: t === !0 ? /* @__PURE__ */ i(re, { keyPrefix: a }) : o }), ne = q(Z), fe = L(
  ({
    timeToReadText: a = "{0} min read",
    items: t,
    isLoading: m = !1,
    onSelectCard: o = () => {
    },
    onShare: d = () => {
    },
    onBookmark: w = () => {
    },
    getImage: y = () => {
    },
    isSeparated: v = !0,
    bookmarkComponent: k = /* @__PURE__ */ i(b, {}),
    componentName: g,
    LinkComponent: C,
    hasShare: N = !0,
    hasDelete: f = !1,
    onDelete: s = () => {
    }
  }, l) => {
    const h = D(() => t == null ? void 0 : t.map((e, u) => {
      var p;
      return /* @__PURE__ */ i(
        ne,
        {
          blogUuid: e == null ? void 0 : e.uuid,
          title: e == null ? void 0 : e.title,
          titleSlug: e == null ? void 0 : e.titleSlug,
          options: e == null ? void 0 : e.options,
          publishedAt: e == null ? void 0 : e.publishedAt,
          timeToReadText: a,
          timeToRead: e == null ? void 0 : e.timeToRead,
          numberOfLikes: e == null ? void 0 : e.numberOfLikes,
          numberOfComments: e == null ? void 0 : e.numberOfComments,
          isSponsored: e == null ? void 0 : e.isSponsored,
          isBookmarked: e == null ? void 0 : e.isBookmarked,
          onSelectCard: ($, B) => o == null ? void 0 : o(e, B),
          hasShare: N,
          hasDelete: f,
          onDelete: () => s == null ? void 0 : s(e),
          onShare: () => d == null ? void 0 : d(e),
          onBookmark: w,
          imageUrl: y(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
          bookmarkComponent: k,
          metadata: { name: g, accessor: e == null ? void 0 : e.accessor },
          LinkComponent: C
        },
        `blog-card-item__${u + 1}__${(p = e == null ? void 0 : e.isBookmarked) == null ? void 0 : p.toString()}`
      );
    }), [t]);
    return /* @__PURE__ */ i(ie, { isLoading: m, keyPrefix: "blog-list-skeleton", children: /* @__PURE__ */ i(x, { ref: l, className: `lp-section lp-blog-list-section${v ? " separated" : ""}`, children: h }) });
  }
);
export {
  fe as default
};