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

React component library

import { jsxs as l, jsx as i } from "react/jsx-runtime";
import { forwardRef as f } from "react";
import { t as _, m as h, l as w, n as x, G as c } from "./utils-DtRLzzTZ.js";
import { n as g } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as u } from "./consts-C1uHV4xc.js";
const v = g.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;

  & .wrapper__card {
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
    position: relative;
    overflow: hidden;

    & .wrapper__image {
      width: 100%;
      object-fit: cover;
      height: auto;
      border-radius: 0.75rem;
      border: 1px solid var(--yellow-600, #d97706);

      /* drop-shadow-sm */
      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    }

    & .wrapper__tag {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: -40%;
      top: 10%;
      filter: drop-shadow(1px 1px 0px #d97706);
      background: var(--yellow-500, #f59e0b);
      color: var(--white, #fff);
      width: 100%;
      height: 2rem;
      font-weight: 600;
      font-size: 0.875rem;

      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
  }

  & .wrapper__text {
    color: var(--gray-950, #14161a);
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
    width: 100%;
    ${_(2)}
    transition: var(--transition, all 0.2s ease);
  }

  &:hover {
    & .wrapper__text {
      color: var(--primary-500, #f59e0b);
    }
  }
`, y = g.div`
  width: 100%;
  height: 11.5rem;
  border-radius: 0.75rem;
  background: ${h("-90deg")};
`, b = f(
  ({ image: r, imageComponent: a, text: t, price: s, currency: p, onSelectCard: o = () => {
  } }, n) => /* @__PURE__ */ l(v, { ref: n, onClick: o, children: [
    /* @__PURE__ */ l("div", { className: "wrapper__card", children: [
      w(a) ? a : /* @__PURE__ */ i("img", { src: r, className: "wrapper__image" }),
      /* @__PURE__ */ i("div", { className: "wrapper__tag", children: `${x(
        s
      )} ${c(p)}` })
    ] }),
    /* @__PURE__ */ i("div", { className: "wrapper__text", children: t })
  ] })
), $ = f(({}, r) => /* @__PURE__ */ i(y, {})), N = g.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;

  & .wrapper__heading {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    & .wrapper__title {
      color: var(--gray-950, #14161a);
      text-align: center;
      font-size: 1.5rem;
      font-style: normal;
      font-weight: 600;
      line-height: 2rem;
      letter-spacing: -0.47px;
    }

    & .wrapper__subtitle {
      color: var(---gray-600, #676e79);
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1.25rem;
      letter-spacing: 0.25px;
    }
  }

  & .wrapper__cards {
    display: grid;
    grid-template-columns: ${(r) => `repeat(${r == null ? void 0 : r.limitCards}, minmax(0, 1fr))`};
    gap: 1.25rem;
    justify-items: center;
    align-items: center;
    width: 100%;
  }

  @media (max-width: ${u + "px"}) {
    & .wrapper__cards {
      grid-template-columns: ${(r) => `repeat(${r == null ? void 0 : r.limitCardsForMobile}, minmax(0, 1fr))`};
      gap: 1rem;
    }
  }
`, M = f(
  ({
    title: r,
    subtitle: a,
    items: t,
    limit: s = 4,
    limitForMobile: p = 1,
    onSelectCard: o = () => {
    }
  }) => {
    var d;
    const n = (e) => {
      o == null || o(e == null ? void 0 : e.uuid);
    };
    return /* @__PURE__ */ l(
      N,
      {
        limitCards: s,
        limitCardsForMobile: p,
        children: [
          /* @__PURE__ */ l("div", { className: "wrapper__heading", children: [
            r && /* @__PURE__ */ i("div", { className: "wrapper__title", children: r }),
            a && /* @__PURE__ */ i("div", { className: "wrapper__subtitle", children: a })
          ] }),
          /* @__PURE__ */ i("div", { className: "wrapper__cards", children: t && (t == null ? void 0 : t.length) > 0 ? t == null ? void 0 : t.map((e, m) => /* @__PURE__ */ i(
            b,
            {
              uuid: e == null ? void 0 : e.uuid,
              text: e == null ? void 0 : e.text,
              price: e == null ? void 0 : e.price,
              currency: e == null ? void 0 : e.currency,
              image: e == null ? void 0 : e.image,
              imageComponent: e == null ? void 0 : e.imageComponent,
              onSelectCard: () => n == null ? void 0 : n(e)
            },
            `gift-card__${m + 1}`
          )) : (d = Array.from("1234")) == null ? void 0 : d.map((e, m) => /* @__PURE__ */ i($, {}, `gift-card-skeleton__${m + 1}`)) })
        ]
      }
    );
  }
);
export {
  M as default
};