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

React component library

import { jsxs as t, jsx as i } from "react/jsx-runtime";
import { forwardRef as c, Fragment as y } from "react";
import u from "./Button.js";
import N from "./Icon.js";
import { t as x, m as v, l as b, k } from "./utils-DtRLzzTZ.js";
import { n as f } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as $ } from "./consts-C1uHV4xc.js";
const S = f.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 1.25rem;
  border: 1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08));
  background: var(--Lanaco-Gray-white, #fff);
  width: 100%;

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

  & .wrapper__content {
    display: flex;
    padding: 1.25rem;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    align-self: strech;

    & .wrapper__image {
      object-fit: cover;
      aspect-ratio: 1 / 1;
      max-height: 4rem;
      border-radius: 999px;

      &:hover {
        cursor: pointer;
      }
    }
  }

  & .wrapper__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;

    & .wrapper__title {
      color: var(--gray-950, #14161a);
      font-size: 1rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.5rem;
      letter-spacing: -0.0112rem;
      ${x(2)}
    }

    & .wrapper__subtitle {
      color: var(--gray-600, #676e79);
      text-align: center;
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1.25rem;
      letter-spacing: -0.0056rem;
      ${x(2)}
    }

    & .wrapper__badges {
    }

    & .wrapper__rating {
      display: flex;
      align-items: center;
      gap: 0.25rem;

      & .wrapper__star {
        color: var(--gray-950, #14161a);
      }

      & .wrapper__review-count {
        color: var(--gray-600, #676e79);
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1rem;
        letter-spacing: 0.01px;
      }
    }
  }

  & .wrapper__products {
    display: flex;
    align-items: flex-start;
    column-gap: 1px;
    width: 100%;

    & .wrapper__product {
      overflow: hidden;
      cursor: pointer;
      width: 100%;
      max-height: 5.75rem;

      &:first-child {
        border-radius: 0 0 0 1.25rem;
      }

      &:last-child {
        border-radius: 0 0 1.25rem 0;
      }

      & .product__image {
        width: 100%;
        aspect-ratio: 1 / 1;
        height: calc(100% / 3);
        max-height: 5.75rem;
        object-fit: cover;
      }
    }
  }
`, j = f.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 0 0;
  border-radius: 1.25rem;
  border: 1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08));
  background: var(--Lanaco-Gray-white, #fff);
  width: 100%;

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

  & .wrapper__content {
    display: flex;
    padding: 1.25rem;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    align-self: strech;
    width: 100%;

    & .wrapper__image {
      width: 4rem;
      height: 4rem;
      border-radius: 999px;
      background-color: ${v("-90deg")};
    }
  }

  & .wrapper__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    width: 100%;

    & .wrapper__info-item {
      background-color: ${v("-90deg")};
      height: 1rem;
      width: 100%;
    }
  }
`, z = c(
  ({
    image: a,
    imageComponent: m,
    title: l,
    subtitle: g,
    badges: d,
    rating: o,
    reviewCount: n,
    products: s,
    onSelectCard: _ = () => {
    }
  }, w) => /* @__PURE__ */ t(S, { onClick: _, children: [
    /* @__PURE__ */ t("div", { className: "wrapper__content", children: [
      b(m) ? m : /* @__PURE__ */ i("img", { src: a, className: "wrapper__image" }),
      /* @__PURE__ */ t("div", { className: "wrapper__info", children: [
        /* @__PURE__ */ i("div", { className: "wrapper__title", children: l }),
        /* @__PURE__ */ i("div", { className: "wrapper__subtitle", children: g }),
        d && /* @__PURE__ */ i("div", { className: "wrapper__badges" }),
        o && n && /* @__PURE__ */ t("div", { className: "wrapper__rating", children: [
          /* @__PURE__ */ i("div", { className: "wrapper_stars", children: [...Array(5).keys()].map((r, p) => /* @__PURE__ */ i(
            N,
            {
              icon: r < o ? " mng-lnc-star--filled" : " mng-lnc-star",
              className: "wrapper__star"
            },
            `shop-card-rating-star__${p + 1}`
          )) }),
          /* @__PURE__ */ t("div", { className: "wrapper__review-count", children: [
            "(",
            n == null ? void 0 : n.toLocaleString(),
            ")"
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ i("div", { className: "wrapper__products", children: s && (s == null ? void 0 : s.map((r, p) => /* @__PURE__ */ i(y, { children: /* @__PURE__ */ i(
      "div",
      {
        className: "wrapper__product",
        onClick: () => {
          var e;
          return (e = r == null ? void 0 : r.onSelectProduct) == null ? void 0 : e.call(r, r == null ? void 0 : r.uuid);
        },
        children: b(r == null ? void 0 : r.imageComponent) ? r == null ? void 0 : r.imageComponent : /* @__PURE__ */ i("img", { src: r == null ? void 0 : r.image, className: "product__image" })
      }
    ) }, p))) })
  ] })
), C = c(({}, a) => /* @__PURE__ */ i(j, { children: /* @__PURE__ */ t("div", { className: "wrapper__content", children: [
  /* @__PURE__ */ i("div", { className: "wrapper__image" }),
  /* @__PURE__ */ t("div", { className: "wrapper__info", children: [
    /* @__PURE__ */ i("div", { className: "wrapper__info-item" }),
    /* @__PURE__ */ i("div", { className: "wrapper__info-item" }),
    /* @__PURE__ */ i("div", { className: "wrapper__info-item" }),
    /* @__PURE__ */ i("div", { className: "wrapper__info-item" })
  ] })
] }) })), M = f.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;

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

    & .wrapper__title {
      display: flex;
      justify-content: space-between;

      & .title__text {
        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;

        display: flex;
        align-items: center;
        gap: 0.5rem;

        & i {
          font-size: 1.5rem;
          color: var(--primary-500, #f59e0b);
        }
      }

      & .title__action {
        color: var(--gray-950, #14161a);
        background: var(--neutral-9504, rgba(20, 22, 26, 0.04));

        &:hover {
          background: var(--neutral-9504, rgba(20, 22, 26, 0.12));
        }

        &:focus {
          outline: none;
        }
      }
    }

    & .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: ${(a) => `repeat(${a == null ? void 0 : a.limitCards}, minmax(0, 1fr))`};
    gap: 1.25rem;
    justify-items: center;
    align-items: center;
    width: 100%;
  }

  @media (max-width: ${$ + "px"}) {
    & .wrapper__heading {
      & .wrapper__title {
        & .title__action {
          display: none;
        }
      }
    }

    & .wrapper__cards {
      grid-template-columns: ${(a) => `repeat(${a == null ? void 0 : a.limitCardsForMobile}, minmax(0, 1fr))`};
      gap: 1rem;
    }
  }

  @media (max-width: 400px) {
    & .wrapper__cards {
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap: 1rem;
    }
  }
`, A = c(
  ({
    title: a,
    subtitle: m,
    items: l,
    limit: g = 4,
    limitForMobile: d = 2,
    buttonText: o = "Show More",
    onSelectCard: n = () => {
    },
    onButtonAction: s = () => {
    },
    icon: _
  }, w) => {
    var p;
    const r = (e) => {
      n == null || n(e == null ? void 0 : e.uuid);
    };
    return /* @__PURE__ */ t(
      M,
      {
        ref: w,
        limitCards: g,
        limitCardsForMobile: d,
        children: [
          /* @__PURE__ */ t("div", { className: "wrapper__heading", children: [
            /* @__PURE__ */ t("div", { className: "wrapper__title", children: [
              a && /* @__PURE__ */ t("div", { className: "title__text", children: [
                k(_) && /* @__PURE__ */ i("i", { className: _ }),
                /* @__PURE__ */ i("span", { children: a })
              ] }),
              s && /* @__PURE__ */ i(
                u,
                {
                  text: o,
                  borderRadius: "curved",
                  btnType: "tinted",
                  className: "title__action",
                  onClick: s
                }
              )
            ] }),
            m && /* @__PURE__ */ i("div", { className: "wrapper__subtitle", children: m })
          ] }),
          /* @__PURE__ */ i("div", { className: "wrapper__cards", children: l && (l == null ? void 0 : l.length) > 0 ? l == null ? void 0 : l.map((e, h) => /* @__PURE__ */ i(
            z,
            {
              uuid: e == null ? void 0 : e.uuid,
              title: e == null ? void 0 : e.title,
              subtitle: e == null ? void 0 : e.subtitle,
              image: e == null ? void 0 : e.image,
              rating: e == null ? void 0 : e.rating,
              reviewCount: e == null ? void 0 : e.reviewCount,
              products: e == null ? void 0 : e.products,
              imageComponent: e == null ? void 0 : e.imageComponent,
              onSelectCard: () => r == null ? void 0 : r(e)
            },
            `shop-card__${h + 1}`
          )) : (p = Array.from("1234")) == null ? void 0 : p.map((e, h) => /* @__PURE__ */ i(C, {}, `shop-card-skeleton__${h + 1}`)) })
        ]
      }
    );
  }
);
export {
  A as default
};