@lanaco/lnc-react-ui/dist/index-C_jbF9UW.js

React component library

import { jsxs as l, jsx as r } from "react/jsx-runtime";
import { forwardRef as D, useRef as h, useEffect as L, Fragment as P } from "react";
import f from "./Icon.js";
import { n as d, m as w } from "./utils-BUdHa0nB.js";
import { s as I } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as W } from "./breakpoints-BubDitvo.js";
import { D as x } from "./ShopAvatar-4-fCYGEc.js";
import { P as A } from "./index-DxYmn1al.js";
const C = I.a`
  text-decoration: none;
  color: var(--gray-950);
  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%;
  height: 100%;
  justify-content: space-between;
  /* drop-shadow-sm */
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);

  &:hover {
    cursor: pointer;
  }

  & .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;
    }
  }

  & .wrapper_stars {
    display: flex;
  }

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

    & .wrapper__title {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      color: var(--gray-950, #14161a);
      font-size: 1rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.5rem;
      letter-spacing: -0.0112rem;
      ${d(2)}
      text-align: center;
    }

    & .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;
      ${d(2)}
    }

    & .wrapper__badges {
    }

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

      & .wrapper__star {
        & i {
          color: var(--warning-500);
        }

        & .gold-star {
          & i {
            color: var(--gray-500);
          }
        }
      }

      & .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;
      }

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

      & .product__image {
        width: 100%;
        aspect-ratio: 1 / 1;
        height: calc(100% / 3);
        max-height: 5.75rem;
        object-fit: cover;
      }
    }
  }

  @media ${W("S")} {
    max-width: 10rem;
    min-width: 10rem;

    & .wrapper__content {
      & .wrapper__image {
        max-height: 3rem;
      }
    }
  }
`, M = D(
  ({
    uuid: o,
    image: c,
    imageComponent: p,
    title: v,
    subtitle: y,
    badges: b,
    rating: N,
    reviewCount: m,
    products: t,
    onSelectCard: $ = () => {
    },
    getProductImage: S = () => {
    },
    canAcceptPayments: j,
    hideProducts: E = !1,
    showRating: k = !0,
    metadata: s = {},
    LinkComponent: g
  }, F) => {
    const z = g || "a", i = h(), _ = h();
    return L(() => {
      var n;
      const e = (a) => {
        a.target.src = x, a.onerror = null;
      };
      return (n = i == null ? void 0 : i.current) == null || n.addEventListener("error", e), () => {
        var a;
        (a = i == null ? void 0 : i.current) == null || a.removeEventListener("error", e);
      };
    }, []), /* @__PURE__ */ l(
      C,
      {
        ref: _,
        name: s == null ? void 0 : s.name,
        "data-accessor": s == null ? void 0 : s.accessor,
        onClick: (e) => $(e, _),
        as: z,
        ...g ? {
          to: `/shop/${o}`
        } : {
          href: `/shop/${o}`
        },
        children: [
          /* @__PURE__ */ l("div", { className: "wrapper__content", children: [
            w(p) ? p : c ? /* @__PURE__ */ r("img", { ref: i, src: c, className: "wrapper__image" }) : /* @__PURE__ */ r("img", { src: x, className: "wrapper__image" }),
            /* @__PURE__ */ l("div", { className: "wrapper__info", children: [
              /* @__PURE__ */ l("div", { className: "wrapper__title", children: [
                v,
                " ",
                j && /* @__PURE__ */ r(f, { color: "secondary", icon: "credit-card", className: "card" })
              ] }),
              /* @__PURE__ */ r("div", { className: "wrapper__subtitle", children: y }),
              b && /* @__PURE__ */ r("div", { className: "wrapper__badges" }),
              k && /* @__PURE__ */ l("div", { className: "wrapper__rating", children: [
                /* @__PURE__ */ r("div", { className: "wrapper_stars", children: [...Array(5).keys()].map((e, n) => /* @__PURE__ */ r(
                  f,
                  {
                    icon: " mng-lnc-star--filled",
                    className: `wrapper__star ${e >= N ? "gold-star" : ""}`
                  },
                  `shop-card-rating-star__${n + 1}`
                )) }),
                /* @__PURE__ */ l("div", { className: "wrapper__review-count", children: [
                  "(",
                  m == null ? void 0 : m.toLocaleString(),
                  ")"
                ] })
              ] })
            ] })
          ] }),
          E !== !0 && /* @__PURE__ */ r("div", { className: "wrapper__products", children: t && (t == null ? void 0 : t.map((e, n) => /* @__PURE__ */ r(P, { children: /* @__PURE__ */ r(
            "div",
            {
              className: "wrapper__product",
              onClick: () => {
                var a;
                return (a = e == null ? void 0 : e.onSelectProduct) == null ? void 0 : a.call(e, e == null ? void 0 : e.uuid);
              },
              children: w(e == null ? void 0 : e.imageComponent) ? e == null ? void 0 : e.imageComponent : /* @__PURE__ */ r(
                A,
                {
                  src: S(
                    e == null ? void 0 : e.image,
                    e == null ? void 0 : e.uuid,
                    o
                  ),
                  className: "product__image"
                }
              )
            }
          ) }, n))) })
        ]
      }
    );
  }
);
export {
  M as S
};