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

React component library

import { jsx as r, Fragment as m, jsxs as b } from "react/jsx-runtime";
import { forwardRef as f, Suspense as y, memo as M, useMemo as v } from "react";
import { n as U } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as B } from "./consts-C1uHV4xc.js";
import { u as C } from "./useDetectMobile-BC6EGaBc.js";
import { S as T, a as _ } from "./index-BT55M3t6.js";
import { T as $ } from "./index-DxdBg_r_.js";
const j = U.div`
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;

  & .text-block-v1 {
    grid-column: 1 / 4;
    max-width: 27rem;
    margin: auto;
  }

  @media (max-width: ${B + "px"}) {
    grid-template-columns: repeat(2, 1fr);

    & .text-block-v1 {
      grid-column: 1 / 3;
      max-width: unset;
      margin: unset;
    }

    & .simple-product-card {
      max-width: unset;
      min-width: unset;
      width: unset;
    }

    & .img-wrapper {

    }
  }
`, z = f((i, o) => /* @__PURE__ */ r(T, {})), A = ({ limit: i = 6, isLoading: o = !1, keyPrefix: u }) => /* @__PURE__ */ r(m, { children: Array.from({ length: i }, (l, d) => /* @__PURE__ */ r(
  z,
  {
    isLoading: o
  },
  `${u}-skeleton-product-card-${d}`
)) }), E = ({
  children: i,
  fallbackComponent: o = /* @__PURE__ */ r(m, {}),
  isLoading: u = !1,
  limit: l,
  keyPrefix: d
}) => /* @__PURE__ */ r(y, { fallbackComponent: o, children: u === !0 ? /* @__PURE__ */ r(
  A,
  {
    isLoading: u,
    limit: l,
    keyPrefix: d
  }
) : i }), p = M(_), O = f((i, o) => {
  const {
    title: u,
    subtitle: l,
    description: d,
    buttonText: g,
    buttonLink: h,
    items: t,
    onButtonAction: S = () => {
    },
    onSelectCard: n = () => {
    },
    isLoading: k = !1,
    limit: s = 6
  } = i, w = C(), P = v(() => {
    var a;
    return /* @__PURE__ */ r(m, { children: w === !0 ? (a = t == null ? void 0 : t.slice(0, 4)) == null ? void 0 : a.map((e, c) => /* @__PURE__ */ r(
      p,
      {
        title: e == null ? void 0 : e.title,
        price: e == null ? void 0 : e.price,
        currency: e == null ? void 0 : e.currency,
        image: e == null ? void 0 : e.image,
        sellerUuid: e == null ? void 0 : e.sellerUuid,
        uuid: e == null ? void 0 : e.uuid,
        onSelectCard: () => n == null ? void 0 : n(e == null ? void 0 : e.uuid)
      },
      c
    )) : t == null ? void 0 : t.map((e, c) => /* @__PURE__ */ r(
      p,
      {
        title: e == null ? void 0 : e.title,
        price: e == null ? void 0 : e.price,
        currency: e == null ? void 0 : e.currency,
        image: e == null ? void 0 : e.image,
        sellerUuid: e == null ? void 0 : e.sellerUuid,
        uuid: e == null ? void 0 : e.uuid,
        onSelectCard: () => n == null ? void 0 : n(e == null ? void 0 : e.uuid)
      },
      c
    )) });
  }, [t]);
  return /* @__PURE__ */ b(j, { ref: o, limit: s, children: [
    /* @__PURE__ */ r(
      $,
      {
        subtitle: l,
        title: u,
        description: d,
        buttonText: g,
        buttonLink: h,
        onButtonAction: S,
        className: "text-block-v1"
      }
    ),
    /* @__PURE__ */ r(
      E,
      {
        isLoading: k,
        limit: s,
        keyPrefix: "explore-landing",
        children: P
      }
    )
  ] });
});
export {
  O as default
};