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

React component library

import { jsx as r, Fragment as C, jsxs as a } from "react/jsx-runtime";
import { memo as h, forwardRef as w, useMemo as k } from "react";
import { n as v } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as P } from "./consts-C1uHV4xc.js";
import D from "./Button.js";
import { k as c } from "./utils-DtRLzzTZ.js";
import { u as M } from "./useDetectMobile-BC6EGaBc.js";
import { R as E } from "./style-CiePxaJ_.js";
import { D as N, S as R } from "./suspense-product-card-detailed-BETmfKMT.js";
const U = v.div`
  display: grid;
  grid-template-columns: ${(o) => `repeat(${o.limit},  minmax(0, 1fr))`};
  gap: 1.25rem;

  @media (max-width: ${P + "px"}) {
    display: flex;
    gap: 1rem;
    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
    ::-webkit-scrollbar {
      -webkit-appearance: none;
    }
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */

    &::-webkit-scrollbar {
      display: none;
      /* Safari and Chrome */
    }
  }
`, m = h(N), _ = w((o, u) => {
  const {
    icon: l,
    title: p,
    buttonLink: d,
    items: i,
    buttonText: f,
    limit: t = 4,
    onSelectCard: s = () => {
    },
    onButtonAction: g = () => {
    },
    isLoading: S = !1
  } = o, b = M(), y = k(() => /* @__PURE__ */ r(C, { children: b === !0 ? i == null ? void 0 : i.map((e, n) => /* @__PURE__ */ r(
    m,
    {
      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,
      isSponsored: e == null ? void 0 : e.isSponsored,
      imageComponent: e == null ? void 0 : e.imageComponent,
      onSelectCard: () => s(e == null ? void 0 : e.uuid)
    },
    n
  )) : i == null ? void 0 : i.slice(0, t).map((e, n) => /* @__PURE__ */ r(
    m,
    {
      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,
      location: e == null ? void 0 : e.location,
      isSponsored: e == null ? void 0 : e.isSponsored,
      imageComponent: e == null ? void 0 : e.imageComponent,
      onSelectCard: () => s(e == null ? void 0 : e.uuid)
    },
    n
  )) }), [i]);
  return /* @__PURE__ */ a(E, { ref: u, children: [
    /* @__PURE__ */ a("div", { className: "regular-title", children: [
      /* @__PURE__ */ a("div", { className: "regular-title-text", children: [
        c(l) && /* @__PURE__ */ r("i", { className: l }),
        /* @__PURE__ */ r("span", { children: p })
      ] }),
      c(d) && /* @__PURE__ */ r(
        D,
        {
          type: "button",
          btnType: "tinted",
          color: "gray",
          onClick: () => g(d),
          borderRadius: "curved",
          children: f
        }
      )
    ] }),
    /* @__PURE__ */ r(U, { limit: t, children: /* @__PURE__ */ r(
      R,
      {
        isLoading: S,
        itemsCount: t,
        keyPrefix: "explore-landing",
        children: y
      }
    ) })
  ] });
});
export {
  _ as default
};