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

React component library

import { jsx as t, Fragment as S } from "react/jsx-runtime";
import { Suspense as k, memo as $, forwardRef as B, useMemo as L } from "react";
import { s as f } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as a } from "./breakpoints-BubDitvo.js";
import { u as M } from "./useDetectMobile-B0Jog4jQ.js";
import { B as T } from "./index-Bdf71hkj.js";
import { S as U, a as w } from "./style-NhzYtIA7.js";
const y = f.div`
  display: grid;
  grid-template-columns: ${(o) => `repeat(${o.limit},  minmax(0, 1fr))`};
  gap: 1.25rem;

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

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

  @media ${a("XS")} {
    grid-template-columns: repeat(1, 1fr);
  }
`, v = f(U)`
  @media ${a("S")} {
    flex-direction: column;

    & > div {
    }
  }
`, z = ({ keyPrefix: o }) => /* @__PURE__ */ t(v, { children: [1, 2].map((i) => /* @__PURE__ */ t(
  w,
  {
    width: "100%",
    height: "11.25rem"
  },
  `${o}-${i}`
)) }), N = ({
  keyPrefix: o,
  isLoading: i = !1,
  fallbackComponent: r = /* @__PURE__ */ t(S, {}),
  children: l
}) => /* @__PURE__ */ t(k, { fallbackComponent: r, children: i === !0 ? /* @__PURE__ */ t(z, { keyPrefix: o }) : l }), p = $(T), I = B((o, i) => {
  const {
    items: r,
    onSelectCard: l = () => {
    },
    limit: n = 2,
    isLoading: C = !1,
    getImage: c = () => {
    },
    componentName: d,
    LinkComponent: g
  } = o, u = M(), b = L(() => /* @__PURE__ */ t(S, { children: u === !0 ? r == null ? void 0 : r.map((e, m) => /* @__PURE__ */ t(
    p,
    {
      title: e == null ? void 0 : e.title,
      imageUrl: c(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,
      buttonText: e == null ? void 0 : e.buttonText,
      onCardClick: (h, s) => l(e == null ? void 0 : e.titleSlug, s),
      metadata: { name: d, accessor: e == null ? void 0 : e.accessor },
      LinkComponent: g
    },
    m
  )) : r == null ? void 0 : r.slice(0, n).map((e, m) => /* @__PURE__ */ t(
    p,
    {
      title: e == null ? void 0 : e.title,
      imageUrl: c(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,
      buttonText: e == null ? void 0 : e.buttonText,
      onCardClick: (h, s) => l(e == null ? void 0 : e.titleSlug, s),
      metadata: { name: d, accessor: e == null ? void 0 : e.accessor },
      LinkComponent: g
    },
    m
  )) }), [r, u, n]);
  return /* @__PURE__ */ t(
    N,
    {
      isLoading: C,
      keyPrefix: "blogs-large-skeleton",
      children: /* @__PURE__ */ t(y, { ref: i, limit: n, className: "lp-section lp-blogs-section-large", children: b })
    }
  );
});
export {
  I as default
};