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

React component library

import { jsxs as s, jsx as r, Fragment as v } from "react/jsx-runtime";
import { forwardRef as N, useRef as P, Suspense as U, memo as W, useMemo as y } from "react";
import { s as g } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d } from "./breakpoints-BubDitvo.js";
import { u as R } from "./useDetectMobile-B0Jog4jQ.js";
import { R as j } from "./style-CP_urKvc.js";
import { n as M, m as z, l as b } from "./utils-BUdHa0nB.js";
import { P as B } from "./index-DxYmn1al.js";
import { b as _, a as h, c as C, e as D, d as I } from "./style-NhzYtIA7.js";
const L = g.div`
  width: 100%;
  height: 22.5rem;
  min-height: 22.5rem;
  max-height: 22.5rem;
  overflow: hidden;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--gray-95008, #14161a14);
  border-radius: 0.75rem;
  margin-bottom: 0.5rem;

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media ${d("S")} {
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;

    & .product-card {
      & img {
        width: 100%;
        height: 100%;
        min-width: 100%;
        min-height: 100%;
      }
    }
  }
`, T = g.div`
  display: grid;
  grid-template-columns: ${(t) => `repeat(${t.limit},  minmax(0, 1fr))`};
  gap: 1.25rem;

  @media ${d("M")} {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  @media ${d("S")} {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  @media ${d("XS")} {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
`, q = g.a`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  cursor: pointer;
  text-decoration: none;
  color: var(--gray-950);

  & img {
    width: 100%;
    aspect-ratio: 1 / 1; /* defining the aspect ratio of the image */
    object-fit: cover; /* making sure the image isn't distorted */
    border-radius: 0.75rem;
  }

  & .card-title {
    font-size: 0.875rem;
    font-weight: 600;
    ${M(2)}
  }

  @media ${d("S")} {
    & img {
      width: 8.875rem;
      height: 8.875rem;
      min-width: 8.875rem;
      min-height: 8.875rem;
      min-width: 8.875rem;
      min-height: 8.875rem;
      object-fit: cover;
    }
  }
`, A = N((t, n) => {
  const {
    uuid: o,
    title: i,
    image: c,
    sellerUuid: $,
    onSelectCard: f = () => {
    },
    imageComponent: u,
    metadata: a,
    nameSlug: m,
    LinkComponent: l
  } = t, p = l || "a", S = P(null);
  return /* @__PURE__ */ s(
    q,
    {
      ref: S,
      className: "product-card",
      name: a == null ? void 0 : a.name,
      "data-accessor": a == null ? void 0 : a.accessor,
      onClick: (e) => f(e, n),
      as: p,
      ...l ? {
        to: `/product/${b(m) ? `${m}-` : ""}${o}`
      } : {
        href: `/product/${b(m) ? `${m}-` : ""}${o}`
      },
      children: [
        z(u) ? u : /* @__PURE__ */ r(B, { src: c }),
        /* @__PURE__ */ r("div", { className: "card-title", children: i })
      ]
    }
  );
}), E = g(_)`
  @media ${d("S")} {
    & .skeleton__banner {
      height: 100%;
      aspect-ratio: 1 / 1;
    }
  }
`, F = ({ keyPrefix: t }) => /* @__PURE__ */ s(E, { children: [
  /* @__PURE__ */ r(h, { width: "100%", height: "10rem", className: "skeleton__banner" }),
  /* @__PURE__ */ r(C, { children: [1, 2, 3, 4].map((n) => /* @__PURE__ */ s(D, { gap: "0.5rem", children: [
    /* @__PURE__ */ r(I, { size: "6rem" }),
    /* @__PURE__ */ r(h, { width: "100%", height: "1rem" }),
    /* @__PURE__ */ s(C, { gap: "0.5rem", children: [
      /* @__PURE__ */ r(h, { width: "100%", height: "1.5rem" }),
      /* @__PURE__ */ r(h, { width: "100%", height: "1.5rem" })
    ] }),
    /* @__PURE__ */ r(h, { width: "100%", height: "1.5rem" })
  ] }, `${t}-${n}`)) })
] }), G = ({
  keyPrefix: t,
  isLoading: n = !1,
  fallbackComponent: o = /* @__PURE__ */ r(v, {}),
  children: i
}) => /* @__PURE__ */ r(U, { fallbackComponent: o, children: n === !0 ? /* @__PURE__ */ r(F, { keyPrefix: t }) : i }), k = W(A), x = N((t, n) => {
  const {
    icon: o,
    items: i,
    limit: c = 4,
    imageUrl: $,
    title: f = "Season inspiration",
    isLoading: u = !1,
    getImage: a = () => {
    },
    componentName: m,
    LinkComponent: l
  } = t, p = R(), S = y(() => /* @__PURE__ */ r(v, { children: p === !0 ? i == null ? void 0 : i.map((e, w) => /* @__PURE__ */ r(
    k,
    {
      title: e == null ? void 0 : e.name,
      sellerUuid: e == null ? void 0 : e.sellerUuid,
      uuid: e == null ? void 0 : e.uuid,
      nameSlug: e == null ? void 0 : e.nameSlug,
      image: a(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
      metadata: { name: m, accessor: e == null ? void 0 : e.accessor },
      LinkComponent: l
    },
    w
  )) : i == null ? void 0 : i.slice(0, c).map((e, w) => /* @__PURE__ */ r(
    k,
    {
      title: e == null ? void 0 : e.name,
      sellerUuid: e == null ? void 0 : e.sellerUuid,
      uuid: e == null ? void 0 : e.uuid,
      nameSlug: e == null ? void 0 : e.nameSlug,
      image: a(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
      metadata: { name: m, accessor: e == null ? void 0 : e.accessor },
      LinkComponent: l
    },
    w
  )) }), [i, p, c]);
  return /* @__PURE__ */ s(j, { ref: n, className: "lp-section lp-products-with-banner-section", children: [
    /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ s("div", { className: "regular-title-text", children: [
      b(o) && /* @__PURE__ */ r("i", { className: o }),
      /* @__PURE__ */ r("span", { children: f })
    ] }) }),
    /* @__PURE__ */ s(
      G,
      {
        isLoading: u,
        keyPrefix: "products-with-banner-skeleton",
        children: [
          /* @__PURE__ */ r(L, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: $ }) }),
          /* @__PURE__ */ r(T, { limit: c, children: S })
        ]
      }
    )
  ] });
});
export {
  x as default
};