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

React component library

import { jsx as t, jsxs as k, Fragment as y } from "react/jsx-runtime";
import { Suspense as $, memo as z, forwardRef as F, useMemo as _ } from "react";
import { s as v } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as l } from "./breakpoints-BubDitvo.js";
import { u as L } from "./useDetectMobile-B0Jog4jQ.js";
import { S as j } from "./index-BDBTaPXr.js";
import { T as q } from "./index-DdfMcHz0.js";
import { b as A, c as B, a as R, d as m } from "./style-NhzYtIA7.js";
const D = v.div`
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;

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

  /* Tablet (768–1024px) – text 3/4 left, 1 card top-right, 4 equal product cols below */
  @media ${l("M")} {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;

    & .text-block-v1 {
      grid-column: 1 / 4;
      grid-row: 1;
      max-width: unset;
      margin: 0;
      align-self: start;
    }

    & .simple-product-card:nth-of-type(1) {
      grid-column: 4;
      grid-row: 1;
    }

    & .simple-product-card:nth-of-type(n + 2) {
      grid-column: span 1;
      grid-row: auto;
    }
  }

  /* Mobile (≤767px) – title full width above, 2-col product grid below */
  @media ${l("S")} {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;

    & .text-block-v1 {
      grid-column: 1 / -1;
      grid-row: 1;
      max-width: unset;
      margin: 0 0 1rem 0;
      align-self: stretch;
    }

    & .simple-product-card:nth-of-type(1),
    & .simple-product-card:nth-of-type(n + 2) {
      grid-column: auto;
      grid-row: auto;
      max-width: unset;
      min-width: unset;
      width: unset;
    }
  }

  /* Small phones (≤480px) – single column */
  @media ${l("XS")} {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
`, G = v(A)`
  @media ${l("S")} {
    & .skeleton__cards {
      & > div {
        width: 100%;
        height: 100%;

        &:nth-of-type(even) {
          display: none;
        }
      }
    }
  }
`, I = ({ keyPrefix: i }) => /* @__PURE__ */ t(G, { children: [1, 2].map((o) => /* @__PURE__ */ k(
  B,
  {
    className: "skeleton__cards",
    children: [
      /* @__PURE__ */ t(R, { width: "100%", height: "11.125rem" }),
      /* @__PURE__ */ t(m, { size: "11.125rem" }),
      /* @__PURE__ */ t(m, { size: "11.125rem" }),
      /* @__PURE__ */ t(m, { size: "11.125rem" })
    ]
  },
  `${i}-${o}`
)) }), V = ({
  keyPrefix: i,
  isLoading: o = !1,
  fallbackComponent: a = /* @__PURE__ */ t(y, {}),
  children: n
}) => /* @__PURE__ */ t($, { fallbackComponent: a, children: o === !0 ? /* @__PURE__ */ t(I, { keyPrefix: i }) : n }), w = z(j), Y = F((i, o) => {
  const {
    title: a,
    subtitle: n,
    description: N,
    buttonText: C,
    buttonLink: P,
    items: r,
    onButtonAction: M = () => {
    },
    isLoading: T = !1,
    limit: c = 6,
    getImage: d = () => {
    },
    negotiableText: u,
    freeText: p,
    componentName: g,
    LinkComponent: f
  } = i, h = L(), U = _(() => {
    var S, b;
    return /* @__PURE__ */ t(y, { children: h === !0 ? (S = r == null ? void 0 : r.slice(0, 4)) == null ? void 0 : S.map((e, s) => /* @__PURE__ */ t(
      w,
      {
        title: e == null ? void 0 : e.name,
        price: e == null ? void 0 : e.price,
        isFree: e == null ? void 0 : e.isFree,
        isNegotiable: e == null ? void 0 : e.isNegotiable,
        currency: e == null ? void 0 : e.currency,
        sellerUuid: e == null ? void 0 : e.sellerUuid,
        uuid: e == null ? void 0 : e.uuid,
        nameSlug: e == null ? void 0 : e.nameSlug,
        image: d(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
        negotiableText: u,
        freeText: p,
        metadata: { name: g, accessor: e == null ? void 0 : e.accessor },
        LinkComponent: f
      },
      s
    )) : (b = r == null ? void 0 : r.slice(0, 9)) == null ? void 0 : b.map((e, s) => /* @__PURE__ */ t(
      w,
      {
        title: e == null ? void 0 : e.name,
        price: e == null ? void 0 : e.price,
        isFree: e == null ? void 0 : e.isFree,
        isNegotiable: e == null ? void 0 : e.isNegotiable,
        currency: e == null ? void 0 : e.currency,
        sellerUuid: e == null ? void 0 : e.sellerUuid,
        uuid: e == null ? void 0 : e.uuid,
        nameSlug: e == null ? void 0 : e.nameSlug,
        image: d(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
        negotiableText: u,
        freeText: p,
        metadata: { name: g, accessor: e == null ? void 0 : e.accessor },
        LinkComponent: f
      },
      s
    )) });
  }, [r, h, c]);
  return /* @__PURE__ */ t(
    V,
    {
      isLoading: T,
      keyPrefix: "simple-products-skeleton",
      children: /* @__PURE__ */ k(D, { ref: o, limit: c, className: "lp-section lp-simple-products-section", children: [
        /* @__PURE__ */ t(
          q,
          {
            subtitle: n,
            title: a,
            description: N,
            buttonText: C,
            buttonLink: P,
            onButtonAction: M,
            className: "text-block-v1"
          }
        ),
        U
      ] })
    }
  );
});
export {
  Y as default
};