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

React component library

import { jsxs as p, jsx as r, Fragment as T } from "react/jsx-runtime";
import { forwardRef as N, useRef as M, memo as L, useMemo as U } from "react";
import { s as S } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as v } from "./breakpoints-BubDitvo.js";
import { u as W } from "./useDetectMobile-B0Jog4jQ.js";
import { w as z, n as P, l as y } from "./utils-BUdHa0nB.js";
import { B as j, R as D } from "./style-CP_urKvc.js";
import I from "./Button.js";
import A from "./Link.js";
import { P as G } from "./index-DxYmn1al.js";
import { S as E } from "./index-CsBUrEws.js";
const F = S.div`
  display: grid;
  grid-template-columns: ${(n) => `repeat(${n.limit},  minmax(0, 1fr))`};
  gap: 1.25rem;

  @media ${v("M")} {
    grid-template-columns: repeat(2, 1fr);
  }

  @media ${v("S")} {
    grid-template-columns: repeat(2, 1fr);
  }

  @media ${v("XS")} {
    grid-template-columns: repeat(1, 1fr);
  }
`, X = S.a`
  text-decoration: none;
  color: var(--gray-950);
  display: flex;
  flex-direction: column;
  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;
  min-height: 21.5625rem;
  cursor: pointer;

  & img {
    max-height: 12.5625rem;
    min-height: 12.5625rem;
    object-fit: cover;
    width: 100%;
  }

  & .skeleton-img {
    width: 100%;
    max-height: 12.5625rem;
    min-height: 12.5625rem;
    background-color: ${z("-90deg")};
  }

  & .action {
    padding: 0 1rem 1rem 1rem;
    margin-top: auto;
    color: var(--gray-950, #14161a);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: -0.0056rem;

    &:hover {
      color: var(--gray-700, #4e555f);
    }
  }

  & .tags-wr {
    display: flex;
    flex-wrap: wrap;

    gap: 0.5rem;
    padding: 1rem;
  }
`, q = S.div`
  padding: 1rem 1rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--gray-950, #14161a);
  border-top: 1px solid var(--gray-95008);

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

  & .text-wr {
    font-weight: 400;
    font-size: 0.875rem;
    flex: 1;
    color: var(--gray-700, #4e555f);
    ${P(3)}
  }
`, H = N((n, k) => {
  const {
    title: g,
    imageUrl: h,
    text: b,
    options: a,
    onCardClick: m,
    readMoreText: o = "Read more",
    metadata: i,
    titleSlug: s,
    LinkComponent: c
  } = n, u = c || "a", d = M();
  return /* @__PURE__ */ p(
    X,
    {
      ref: d,
      name: i == null ? void 0 : i.name,
      "data-accessor": i == null ? void 0 : i.name,
      className: "blog-card",
      onClick: (t) => m(t, d),
      as: u,
      ...c ? { to: `/blog/${s}` } : { href: `/blog/${s}` },
      children: [
        /* @__PURE__ */ r(G, { src: h }),
        /* @__PURE__ */ p(q, { children: [
          /* @__PURE__ */ r("div", { className: "text-wr-title", children: g }),
          /* @__PURE__ */ r("div", { className: "text-wr", children: b })
        ] }),
        a && /* @__PURE__ */ r("div", { className: "tags-wr", children: a == null ? void 0 : a.map((t, f) => /* @__PURE__ */ r(j, { color: t == null ? void 0 : t.color, children: t == null ? void 0 : t.name }, f)) }),
        /* @__PURE__ */ r(A, { className: "action", color: "gray", onClick: m, children: o })
      ]
    }
  );
}), C = L(H), te = N((n, k) => {
  const {
    icon: g,
    title: h,
    onButtonAction: b = () => {
    },
    onSelectCard: a = () => {
    },
    buttonLink: m,
    items: o,
    buttonText: i,
    limit: s = 3,
    isLoading: c = !1,
    getImage: u = () => {
    },
    readMoreText: d = "Read more",
    componentName: t,
    LinkComponent: f
  } = n, B = W(), R = U(() => /* @__PURE__ */ r(T, { children: B === !0 ? o == null ? void 0 : o.map((e, l) => /* @__PURE__ */ r(
    C,
    {
      isBlog: !0,
      title: e == null ? void 0 : e.title,
      imageUrl: u(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
      text: e == null ? void 0 : e.description,
      titleSlug: e == null ? void 0 : e.titleSlug,
      readMoreText: d,
      options: e == null ? void 0 : e.options,
      onCardClick: ($, w) => a(e == null ? void 0 : e.titleSlug, w),
      metadata: { name: t, accessor: e == null ? void 0 : e.accessor },
      LinkComponent: f
    },
    l
  )) : o == null ? void 0 : o.slice(0, s).map((e, l) => /* @__PURE__ */ r(
    C,
    {
      isBlog: !0,
      title: e == null ? void 0 : e.title,
      imageUrl: u(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
      text: e == null ? void 0 : e.description,
      titleSlug: e == null ? void 0 : e.titleSlug,
      readMoreText: d,
      options: e == null ? void 0 : e.options,
      onCardClick: ($, w) => a(e == null ? void 0 : e.titleSlug, w),
      metadata: { name: t, accessor: e == null ? void 0 : e.accessor },
      LinkComponent: f
    },
    l
  )) }), [o]);
  return /* @__PURE__ */ p(D, { ref: k, className: "lp-section lp-blogs-section-simple", children: [
    /* @__PURE__ */ p("div", { className: "regular-title", children: [
      /* @__PURE__ */ p("div", { className: "regular-title-text", children: [
        y(g) && /* @__PURE__ */ r("i", { className: g }),
        /* @__PURE__ */ r("span", { children: h })
      ] }),
      y(i) && y(m) && !c && /* @__PURE__ */ r(
        I,
        {
          type: "button",
          btnType: "tinted",
          color: "neutral",
          onClick: (e) => {
            var l;
            (l = e == null ? void 0 : e.target) == null || l.blur(), b(m);
          },
          borderRadius: "curved",
          className: "button-link",
          children: i
        }
      )
    ] }),
    /* @__PURE__ */ r(
      E,
      {
        isLoading: c,
        keyPrefix: "blogs-simple-skeleton",
        children: /* @__PURE__ */ r(F, { limit: s, children: R })
      }
    )
  ] });
});
export {
  te as default
};