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

React component library

import { jsxs as s, jsx as t, Fragment as $ } from "react/jsx-runtime";
import { forwardRef as w, Suspense as G } from "react";
import { u as N } from "./useDetectMobile-B0Jog4jQ.js";
import { R as A } from "./style-CP_urKvc.js";
import { p as R, G as T, l as h } from "./utils-BUdHa0nB.js";
import j from "./Button.js";
import { s as u } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as f } from "./breakpoints-BubDitvo.js";
import { S as z, e as L, a as C } from "./style-NhzYtIA7.js";
const W = u.div`
  display: grid;
  grid-template-columns: ${(r) => `repeat(${r.limit},  minmax(0, 1fr))`};
  gap: 1.25rem;

  @media ${f("M")} {
    grid-template-columns: repeat(2, 1fr);
  }

  @media ${f("S")} {
    grid-template-columns: repeat(2, 1fr);
  }

  @media ${f("XS")} {
    grid-template-columns: repeat(1, 1fr);
  }
`, I = u.a`
  text-decoration: none;
  color: var(--gray-950);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);

  & .text-wrap {
    text-align: center;
  }
  & img {
    transition: var(--transition, all 0.3s ease);
    overflow: hidden;
  }
  &:hover {
    & img {
      transform: scale(1.1);
    }
  }
`, M = u.div`
  width: 100%;
  min-height: 11rem;
  max-height: 11rem;
  position: relative;
  border-radius: 0.75rem;
  border: 1px solid var(--warning-500, #f59e0b);
  overflow: hidden;

  & img {
    min-height: 11rem;
    max-height: 11rem;
    width: 100%;
    object-fit: cover;
  }

  & .price-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(1px 1px 0px #b45309);
    background-color: var(--warning-500, #f59e0b);
    color: var(--white, #fff);
    width: 75.35525%;
    height: 2.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    position: absolute;
    left: -4.5rem;
    top: 1rem;
    z-index: 2;

    -moz-transform: rotate(315deg);
    -o-transform: rotate(315deg);
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
  }
`, v = w((r, o) => {
  const {
    image: n,
    text: l,
    price: a,
    currency: i,
    onSelectGiftCard: p = () => {
    },
    selectAction: m,
    LinkComponent: d
  } = r;
  return /* @__PURE__ */ s(
    I,
    {
      ref: o,
      className: "simple-gift-card",
      onClick: () => p(a),
      as: d || "a",
      ...d ? {
        to: `${m}`
      } : {
        href: `${m}`
      },
      children: [
        /* @__PURE__ */ s(M, { children: [
          /* @__PURE__ */ t("div", { className: "price-tag", children: a && i && `${R(a)} ${T(i)}` }),
          /* @__PURE__ */ t("img", { src: n })
        ] }),
        /* @__PURE__ */ t("div", { className: "text-wrap", children: l })
      ]
    }
  );
}), B = u(z)`
  @media ${f("S")} {
    flex-direction: column;

    & > div {
      flex-direction: column;
    }
  }
`, D = ({ keyPrefix: r }) => /* @__PURE__ */ t(B, { children: [1, 2, 3, 4].map((o) => /* @__PURE__ */ s(L, { alignItems: "center", children: [
  /* @__PURE__ */ t(C, { width: "100%", height: "11rem", borderRadius: "0.75rem" }),
  /* @__PURE__ */ t(C, { height: "1.25rem", borderRadius: "0.75rem", width: "5rem" })
] }, `${r}-${o}`)) }), E = ({
  keyPrefix: r,
  isLoading: o = !1,
  fallbackComponent: n = /* @__PURE__ */ t($, {}),
  children: l
}) => /* @__PURE__ */ t(G, { fallbackComponent: n, children: o === !0 ? /* @__PURE__ */ t(D, { keyPrefix: r }) : l }), Q = w((r, o) => {
  const {
    icon: n,
    title: l,
    buttonLink: a,
    items: i,
    isLoading: p = !1,
    buttonText: m,
    limit: d = 4,
    onSelectCard: g = () => {
    },
    onButtonAction: S = () => {
    },
    LinkComponent: b
  } = r, y = N();
  return /* @__PURE__ */ s(A, { ref: o, className: "lp-section lp-gift-cards-section", children: [
    /* @__PURE__ */ s("div", { className: "regular-title", children: [
      /* @__PURE__ */ s("div", { className: "regular-title-text", children: [
        h(n) && /* @__PURE__ */ t("i", { className: n }),
        /* @__PURE__ */ t("span", { children: l })
      ] }),
      h(m) && h(a) && !p && /* @__PURE__ */ t(
        j,
        {
          type: "button",
          btnType: "tinted",
          color: "neutral",
          onClick: (e) => {
            var c;
            (c = e == null ? void 0 : e.target) == null || c.blur(), S(a);
          },
          borderRadius: "curved",
          className: "button-link",
          children: m
        }
      )
    ] }),
    /* @__PURE__ */ t(E, { isLoading: p, keyPrefix: "gift-cards-skeleton", children: /* @__PURE__ */ t(W, { limit: d, children: y === !0 ? i == null ? void 0 : i.map((e, c) => /* @__PURE__ */ t(
      v,
      {
        text: e == null ? void 0 : e.text,
        price: e == null ? void 0 : e.priceTo,
        currency: e == null ? void 0 : e.currencyIsoCode,
        image: e == null ? void 0 : e.imageUrl,
        uuid: e == null ? void 0 : e.uuid,
        selectAction: e == null ? void 0 : e.selectAction,
        onSelectGiftCard: (k) => g(e),
        LinkComponent: b
      },
      c
    )) : i == null ? void 0 : i.slice(0, d).map((e, c) => /* @__PURE__ */ t(
      v,
      {
        text: e == null ? void 0 : e.text,
        price: e == null ? void 0 : e.priceTo,
        currency: e == null ? void 0 : e.currencyIsoCode,
        image: e == null ? void 0 : e.imageUrl,
        uuid: e == null ? void 0 : e.uuid,
        selectAction: e == null ? void 0 : e.selectAction,
        onSelectGiftCard: (k) => g(e),
        LinkComponent: b
      },
      c
    )) }) })
  ] });
});
export {
  Q as default
};