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

React component library

import { jsx as r, Fragment as d, jsxs as c } from "react/jsx-runtime";
import { forwardRef as p, Suspense as f, memo as x, useMemo as v } from "react";
import { n as g } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as h } from "./consts-C1uHV4xc.js";
import { R as y } from "./style-CiePxaJ_.js";
import { t as w, m as k } from "./utils-DtRLzzTZ.js";
import $ from "./Button.js";
import { useTheme as b } from "./ThemeProvider.js";
const N = g.div`
  display: grid;
  grid-template-columns: ${(t) => `repeat(${t.limit}, 1fr)`};
  gap: 1.25rem;
  justify-items: center;

  @media (max-width: ${h + "px"}) {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
`, m = g.div`
  width: 100%;
  overflow: hidden;
  position: relative;

  border-radius: 0.75rem;
  background: ${(t) => t == null ? void 0 : t.overlay};
  cursor: pointer;

  & .content-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    padding: 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
    height: 100%;
    width: 100%;
  }

  & button {
    width: fit-content;
    color: var(--gray-950, #14161a);

    &:hover {
      color: var(--gray-700, #4e555f);
    }
  }

  & .content-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--white, #fff);
    font-size: 1rem;
    font-weight: 500;

    & .content-text-title {
      font-weight: 600;
      ${w(2)}
    }
  }

  & img {
    aspect-ratio: 1 / 1;
    mix-blend-mode: multiply;
    width: 100%;
    object-fit: cover;
  }

  & .img-skeleton {
    background-color: ${k("-90deg")};
    min-height: 28.75rem;
  }

  &:hover {
    & .content-text {
      color: var(--primary-500, #f59e0b);
    }
  }

  @media (max-width: ${h + "px"}) {
    & img,
    .img.skeleton {
      aspect-ratio: unset;
      min-height: 28.75rem;
      max-height: 28.75rem;
    }
  }
`, P = p(({}, t) => /* @__PURE__ */ r(m, { ref: t, children: /* @__PURE__ */ r("div", { className: "img-skeleton" }) })), S = ({ limit: t = 2, isLoading: n = !1, keyPrefix: o }) => /* @__PURE__ */ r(d, { children: Array.from({ length: t }, (a, l) => /* @__PURE__ */ r(
  P,
  {
    isLoading: n
  },
  `${o}-skeleton-product-card-${l}`
)) }), _ = ({
  children: t,
  fallbackComponent: n = /* @__PURE__ */ r(d, {}),
  isLoading: o = !1,
  limit: a,
  keyPrefix: l
}) => /* @__PURE__ */ r(f, { fallbackComponent: n, children: o === !0 ? /* @__PURE__ */ r(
  S,
  {
    isLoading: o,
    limit: a,
    keyPrefix: l
  }
) : t }), C = p(
  ({ title: t, image: n, overlay: o, description: a, actionText: l, handleClick: i = () => {
  } }, s) => {
    const { theme: e } = b();
    return /* @__PURE__ */ r(d, { children: /* @__PURE__ */ c(
      m,
      {
        ref: s,
        theme: e,
        overlay: o,
        onClick: i,
        children: [
          /* @__PURE__ */ r("img", { src: n }),
          /* @__PURE__ */ c("div", { className: "content-wrapper", children: [
            /* @__PURE__ */ c("div", { className: "content-text", children: [
              /* @__PURE__ */ r("div", { children: t }),
              /* @__PURE__ */ r("div", { className: "content-text-title", children: a })
            ] }),
            /* @__PURE__ */ r(
              $,
              {
                text: l,
                onClick: i,
                className: "text__action",
                size: "medium",
                color: "gray"
              }
            )
          ] })
        ]
      }
    ) });
  }
), j = x(C), A = p(
  ({ title: t, items: n, limit: o = 2, onSelectCard: a = () => {
  }, isLoading: l = !1 }, i) => {
    const s = v(() => /* @__PURE__ */ r(d, { children: n && (n == null ? void 0 : n.map((e, u) => /* @__PURE__ */ r(
      j,
      {
        title: e == null ? void 0 : e.title,
        image: e == null ? void 0 : e.image,
        description: e == null ? void 0 : e.description,
        actionText: e == null ? void 0 : e.actionText,
        overlay: e == null ? void 0 : e.overlay,
        handleClick: () => a(e == null ? void 0 : e.uuid)
      },
      `landing-page-overlay-general-card__${u + 1}`
    ))) }), [n, a]);
    return /* @__PURE__ */ c(y, { ref: i, children: [
      /* @__PURE__ */ r("div", { className: "regular-title center", children: /* @__PURE__ */ r("div", { className: "regular-title-text", children: /* @__PURE__ */ r("span", { children: t }) }) }),
      /* @__PURE__ */ r(N, { limit: o, children: /* @__PURE__ */ r(
        _,
        {
          isLoading: l,
          limit: o,
          keyPrefix: "explore-landing",
          children: s
        }
      ) })
    ] });
  }
);
export {
  A as default
};