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

React component library

import { jsxs as s, jsx as r, Fragment as c } from "react/jsx-runtime";
import { forwardRef as u, Suspense as S, memo as C, useMemo as N } from "react";
import { n as p } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as b } from "./consts-C1uHV4xc.js";
import { u as P } from "./useDetectMobile-BC6EGaBc.js";
import { R as $ } from "./style-CiePxaJ_.js";
import { t as M, m as g, l as U, k as j } from "./utils-DtRLzzTZ.js";
const E = p.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;
  }
`, W = p.div`
  display: grid;
  grid-template-columns: ${(t) => `repeat(${t.limit},  minmax(0, 1fr))`};
  gap: 1.25rem;

  @media (max-width: ${b + "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 */
    }
  }
`, w = p.div`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  cursor: pointer;

  & 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)}
  }

  &:hover {
    & .card-title {
      color: var(--primary-500, #F59E0B);
    }
  }

  & .skeleton-img {
    background-color: ${g("-90deg")};
    border-radius: 0.75rem;
    border: 1px solid white;
  }

  & .skeleton-title {
    background-color: ${g("-90deg")};
    width: 100%;
    height: 1.25rem;
  }

  @media (max-width: ${b + "px"}) {
    & 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;
    }
  }
`, B = u((t, n) => {
  const {
    uuid: a,
    title: i,
    image: o,
    sellerUuid: h,
    onSelectCard: l = () => {
    },
    imageComponent: d
  } = t;
  return /* @__PURE__ */ s(w, { className: "product-card", onClick: l, children: [
    U(d) ? d : /* @__PURE__ */ r("img", { src: o }),
    /* @__PURE__ */ r("div", { className: "card-title", children: i })
  ] });
}), I = u(({}, t) => /* @__PURE__ */ s(w, { className: "product-card", children: [
  /* @__PURE__ */ r("img", { className: "skeleton-img" }),
  /* @__PURE__ */ r("div", { className: "skeleton-title" })
] })), R = ({ limit: t = 4, isLoading: n = !1, keyPrefix: a }) => /* @__PURE__ */ r(c, { children: Array.from({ length: t }, (i, o) => /* @__PURE__ */ r(
  I,
  {
    isLoading: n
  },
  `${a}-skeleton-product-card-${o}`
)) }), z = ({
  children: t,
  fallbackComponent: n = /* @__PURE__ */ r(c, {}),
  isLoading: a = !1,
  limit: i,
  keyPrefix: o
}) => /* @__PURE__ */ r(S, { fallbackComponent: n, children: a === !0 ? /* @__PURE__ */ r(
  R,
  {
    isLoading: a,
    limit: i,
    keyPrefix: o
  }
) : t }), f = C(B), O = u((t, n) => {
  const {
    icon: a,
    items: i,
    limit: o = 4,
    imageUrl: h,
    onSelectCard: l = () => {
    },
    title: d = "Season inspiration",
    isLoading: k = !1
  } = t, v = P(), y = N(() => /* @__PURE__ */ r(c, { children: v === !0 ? i == null ? void 0 : i.map((e, m) => /* @__PURE__ */ r(
    f,
    {
      title: e == null ? void 0 : e.title,
      image: e == null ? void 0 : e.image,
      sellerUuid: e == null ? void 0 : e.sellerUuid,
      uuid: e == null ? void 0 : e.uuid,
      onSelectCard: () => l == null ? void 0 : l(e == null ? void 0 : e.uuid)
    },
    m
  )) : i == null ? void 0 : i.slice(0, o).map((e, m) => /* @__PURE__ */ r(
    f,
    {
      title: e == null ? void 0 : e.title,
      image: e == null ? void 0 : e.image,
      sellerUuid: e == null ? void 0 : e.sellerUuid,
      uuid: e == null ? void 0 : e.uuid,
      onSelectCard: () => l == null ? void 0 : l(e == null ? void 0 : e.uuid)
    },
    m
  )) }), [i]);
  return /* @__PURE__ */ s($, { ref: n, children: [
    /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ s("div", { className: "regular-title-text", children: [
      j(a) && /* @__PURE__ */ r("i", { className: a }),
      /* @__PURE__ */ r("span", { children: d })
    ] }) }),
    /* @__PURE__ */ r(E, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: h }) }),
    /* @__PURE__ */ r(W, { limit: o, children: /* @__PURE__ */ r(
      z,
      {
        isLoading: k,
        limit: o,
        keyPrefix: "explore-landing",
        children: y
      }
    ) })
  ] });
});
export {
  O as default
};