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

React component library

import { jsxs as m, jsx as r, Fragment as g } from "react/jsx-runtime";
import { forwardRef as u, Suspense as $, memo as B, useMemo as M } from "react";
import { n as h } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as b } from "./consts-C1uHV4xc.js";
import { u as R } from "./useDetectMobile-BC6EGaBc.js";
import { m as T, t as P, k as f } from "./utils-DtRLzzTZ.js";
import { R as z } from "./style-CiePxaJ_.js";
import W from "./Button.js";
import j from "./Link.js";
const A = h.div`
  display: grid;
  grid-template-columns: ${(t) => `repeat(${t.limit},  minmax(0, 1fr))`};
  gap: 1.25rem;

  @media (max-width: ${b + "px"}) {
    grid-template-columns: repeat(1, 1fr);
  }
`, w = h.div`
  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;
  max-height: 21.5625rem;
  min-height: 21.5625rem;
  cursor: pointer;

  &:hover {
    & .text-wr-title {
      color: var(--primary-500, #f59e0b);
      transition: var(--transition);
    }
  }

  & 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: ${T("-90deg")};
  }

  & .action {
    padding: 0 1rem 1rem 1rem;
    margin-top: auto;
  }

  @media (max-width: ${b + "px"}) {
  }
`, S = h.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)}
  }
`, E = u(({}, t) => (
  // <LandingPageClearProductCardSkeleton />
  /* @__PURE__ */ m(w, { className: "product-card", children: [
    /* @__PURE__ */ r("div", { className: "skeleton-img" }),
    /* @__PURE__ */ r("div", { className: "card-title" }),
    /* @__PURE__ */ r(S, {})
  ] })
)), I = u((t, l) => {
  const { title: i, image: n, text: o, onCardClick: d, readMoreText: c = "Read more" } = t;
  return (
    // <SimpleBlogCardSkeleton />
    /* @__PURE__ */ m(w, { className: "blog-card", onClick: d, children: [
      /* @__PURE__ */ r("img", { src: n }),
      /* @__PURE__ */ m(S, { children: [
        /* @__PURE__ */ r("div", { className: "text-wr-title", children: i }),
        /* @__PURE__ */ r("div", { className: "text-wr", children: o })
      ] }),
      /* @__PURE__ */ r(j, { className: "action", color: "gray", onClick: d, children: c })
    ] })
  );
}), L = ({ limit: t = 3, isLoading: l = !1, keyPrefix: i }) => /* @__PURE__ */ r(g, { children: Array.from({ length: t }, (n, o) => /* @__PURE__ */ r(
  E,
  {
    isLoading: l
  },
  `${i}-skeleton-product-card-${o}`
)) }), _ = ({
  children: t,
  fallbackComponent: l = /* @__PURE__ */ r(g, {}),
  isLoading: i = !1,
  limit: n,
  keyPrefix: o
}) => /* @__PURE__ */ r($, { fallbackComponent: l, children: i === !0 ? /* @__PURE__ */ r(
  L,
  {
    isLoading: i,
    limit: n,
    keyPrefix: o
  }
) : t }), v = B(I), K = u((t, l) => {
  const {
    icon: i,
    title: n,
    onButtonAction: o = () => {
    },
    onSelectCard: d = () => {
    },
    buttonLink: c,
    items: a,
    buttonText: k,
    limit: s = 3,
    isLoading: y = !1
  } = t, C = R(), N = M(() => /* @__PURE__ */ r(g, { children: C === !0 ? a == null ? void 0 : a.map((e, p) => /* @__PURE__ */ r(
    v,
    {
      title: e == null ? void 0 : e.title,
      image: e == null ? void 0 : e.image,
      text: e == null ? void 0 : e.text,
      titleSlug: e == null ? void 0 : e.titleSlug,
      onCardClick: () => d(e == null ? void 0 : e.uuid)
    },
    p
  )) : a == null ? void 0 : a.slice(0, s).map((e, p) => /* @__PURE__ */ r(
    v,
    {
      title: e == null ? void 0 : e.title,
      image: e == null ? void 0 : e.image,
      text: e == null ? void 0 : e.text,
      titleSlug: e == null ? void 0 : e.titleSlug,
      onCardClick: () => d(e == null ? void 0 : e.uuid)
    },
    p
  )) }), [a]);
  return /* @__PURE__ */ m(z, { ref: l, children: [
    /* @__PURE__ */ m("div", { className: "regular-title", children: [
      /* @__PURE__ */ m("div", { className: "regular-title-text", children: [
        f(i) && /* @__PURE__ */ r("i", { className: i }),
        /* @__PURE__ */ r("span", { children: n })
      ] }),
      f(c) && /* @__PURE__ */ r(
        W,
        {
          type: "button",
          btnType: "tinted",
          color: "gray",
          onClick: () => o(c),
          borderRadius: "curved",
          children: k
        }
      )
    ] }),
    /* @__PURE__ */ r(A, { limit: s, children: /* @__PURE__ */ r(
      _,
      {
        isLoading: y,
        limit: s,
        keyPrefix: "explore-landing",
        children: N
      }
    ) })
  ] });
});
export {
  K as default
};