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

React component library

import { jsx as i, Fragment as N, jsxs as a } from "react/jsx-runtime";
import { Suspense as $, forwardRef as j } from "react";
import f from "./Button.js";
import { S as z } from "./index-C_jbF9UW.js";
import { l as M } from "./utils-BUdHa0nB.js";
import { s as h } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as u } from "./breakpoints-BubDitvo.js";
import { c as R, a as F } from "./style-NhzYtIA7.js";
const P = h.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)); */
        white-space: nowrap;

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

  @media ${u("M")} {
    & .wrapper__cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  & .wrapper__view-all {
    align-self: center;
    color: var(--neutral-600, #0f2a46);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: -0.0056rem;

    &:focus {
      outline: none;
    }

    display: none;
  }

  @media ${u("S")} {
    gap: 1.25rem;

    & .wrapper__view-all {
      display: unset;
    }

    & .wrapper__heading {
      & .wrapper__title {
        & .title__action {
          &.grid {
            display: none;
          }
        }
      }
    }

    & .wrapper__cards {
      gap: 1rem;

      ${(t) => t != null && t.gridView ? `
            grid-template-columns: repeat(2, minmax(0, 1fr)); 
            & > div {
              min-width:100%;
             max-width:100%;
            }` : `
            display: flex;
            overflow-x: auto;

            -webkit-overflow-scrolling: touch;
            ::-webkit-scrollbar {
              -webkit-appearance: none;
            }

            -ms-overflow-style: none;
            /* Internet Explorer 10+ */
            scrollbar-width: none;
            /* Firefox */

            &::-webkit-scrollbar {
              display: none;
              /* Safari and Chrome */
            }`}
    }
  }
`, D = h(R)``, E = ({ keyPrefix: t }) => /* @__PURE__ */ i(D, { children: [1, 2, 3, 4].map((r) => /* @__PURE__ */ i(F, { height: "18rem", width: "100%" }, `${t}-${r}`)) }), I = ({
  keyPrefix: t,
  isLoading: r = !1,
  fallbackComponent: l = /* @__PURE__ */ i(N, {}),
  children: n
}) => /* @__PURE__ */ i($, { fallbackComponent: l, children: r === !0 ? /* @__PURE__ */ i(E, { keyPrefix: t }) : n }), Q = j(
  ({
    title: t,
    subtitle: r,
    items: l,
    isLoading: n = !1,
    limit: g = 4,
    limitForMobile: _ = 2,
    buttonText: p = "Show More",
    onSelectCard: w = () => {
    },
    onButtonAction: o = () => {
    },
    icon: m,
    getImage: c = () => {
    },
    getProductImage: y = () => {
    },
    hideProducts: v = !1,
    showRating: x = !0,
    gridView: s = !1,
    componentName: d,
    LinkComponent: b
  }, C) => /* @__PURE__ */ a(
    P,
    {
      ref: C,
      limitCards: g,
      limitCardsForMobile: _,
      gridView: s,
      className: "lp-section lp-shop-cards-section",
      children: [
        /* @__PURE__ */ a("div", { className: "wrapper__heading", children: [
          /* @__PURE__ */ a("div", { className: "wrapper__title", children: [
            t && /* @__PURE__ */ a("div", { className: "title__text", children: [
              M(m) && /* @__PURE__ */ i("i", { className: m }),
              /* @__PURE__ */ i("span", { children: t })
            ] }),
            o && !n && /* @__PURE__ */ i(
              f,
              {
                text: p,
                color: "neutral",
                borderRadius: "curved",
                btnType: "tinted",
                className: `title__action ${s ? "grid" : ""}`,
                onClick: o
              }
            )
          ] }),
          r && /* @__PURE__ */ i("div", { className: "wrapper__subtitle", children: r })
        ] }),
        /* @__PURE__ */ i(
          I,
          {
            isLoading: n,
            keyPrefix: "shop-cards-skeleton",
            children: /* @__PURE__ */ i("div", { className: "wrapper__cards", children: l == null ? void 0 : l.map((e, S) => /* @__PURE__ */ i(
              z,
              {
                showRating: x,
                uuid: e == null ? void 0 : e.uuid,
                title: e == null ? void 0 : e.name,
                subtitle: e == null ? void 0 : e.shortDescription,
                rating: e == null ? void 0 : e.ratingArithmeticMean,
                reviewCount: e == null ? void 0 : e.reviewCount,
                products: e == null ? void 0 : e.products,
                imageComponent: e == null ? void 0 : e.imageComponent,
                onSelectCard: (T, k) => w(e == null ? void 0 : e.uuid, k),
                image: c(e == null ? void 0 : e.profileImage, e == null ? void 0 : e.uuid) || null,
                getProductImage: y,
                canAcceptPayments: e == null ? void 0 : e.canAcceptPayments,
                hideProducts: v,
                metadata: { name: d, accessor: e == null ? void 0 : e.accessor },
                LinkComponent: b
              },
              `shop-card__${S + 1}`
            )) })
          }
        ),
        s && o && !n && /* @__PURE__ */ i(
          f,
          {
            text: p,
            borderRadius: "curved",
            btnType: "basic",
            color: "neutral",
            className: "wrapper__view-all",
            onClick: o
          }
        )
      ]
    }
  )
);
export {
  Q as default
};