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

React component library

import { jsx as r, jsxs as m, Fragment as C } from "react/jsx-runtime";
import { Suspense as $, memo as M, forwardRef as R, useMemo as _, createElement as h } from "react";
import { s as w } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as p } from "./breakpoints-BubDitvo.js";
import { u as E } from "./useDetectMobile-B0Jog4jQ.js";
import { l as d } from "./utils-BUdHa0nB.js";
import { R as L } from "./style-CP_urKvc.js";
import T from "./Button.js";
import { C as j } from "./CategorySimpleCard-BE6F0PFT.js";
import { b as A, c as B, d as n } from "./style-NhzYtIA7.js";
const D = w.div`
  display: grid;
  grid-template-columns: ${() => "repeat(6,  minmax(0, 1fr))"};
  gap: 2rem;

  @media ${p("M")} {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  @media ${p("S")} {
    display: flex;
    gap: 1rem;
    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 */
    }
  }
`, F = w(A)`
  @media ${p("S")} {
    & .skeleton__cards {
      overflow-x: hidden;
    }
  }
`, I = ({ keyPrefix: a }) => /* @__PURE__ */ r(F, { children: [1, 2].map((l) => /* @__PURE__ */ m(
  B,
  {
    className: "skeleton__cards",
    children: [
      /* @__PURE__ */ r(n, { size: "8.25rem" }),
      /* @__PURE__ */ r(n, { size: "8.25rem" }),
      /* @__PURE__ */ r(n, { size: "8.25rem" }),
      /* @__PURE__ */ r(n, { size: "8.25rem" }),
      /* @__PURE__ */ r(n, { size: "8.25rem" }),
      /* @__PURE__ */ r(n, { size: "8.25rem" })
    ]
  },
  `${a}-${l}`
)) }), P = ({
  keyPrefix: a,
  isLoading: l = !1,
  fallbackComponent: s = /* @__PURE__ */ r(C, {}),
  children: c
}) => /* @__PURE__ */ r($, { fallbackComponent: s, children: l === !0 ? /* @__PURE__ */ r(I, { keyPrefix: a }) : c }), y = M(j), X = R((a, l) => {
  const {
    icon: s,
    title: c = "Shop by category",
    items: o,
    buttonText: u = "Shop now",
    buttonLink: g,
    limit: f = 12,
    onButtonAction: v = () => {
    },
    onSelectCard: t = () => {
    },
    isLoading: k = !1,
    getImage: S = () => {
    },
    LinkComponent: b
  } = a, z = E(), N = _(() => /* @__PURE__ */ r(C, { children: z === !0 ? o == null ? void 0 : o.map((e, i) => /* @__PURE__ */ h(
    y,
    {
      ...e,
      key: i,
      uuid: e == null ? void 0 : e.uuid,
      image: S(e == null ? void 0 : e.image) || null,
      name: e == null ? void 0 : e.name,
      code: e == null ? void 0 : e.code,
      onSelectCard: () => t == null ? void 0 : t(e == null ? void 0 : e.uuid),
      LinkComponent: b
    }
  )) : o == null ? void 0 : o.slice(0, f).map((e, i) => /* @__PURE__ */ h(
    y,
    {
      ...e,
      key: i,
      uuid: e == null ? void 0 : e.uuid,
      image: S(e == null ? void 0 : e.image) || null,
      name: e == null ? void 0 : e.name,
      code: e == null ? void 0 : e.code,
      onSelectCard: () => t == null ? void 0 : t(e == null ? void 0 : e.uuid),
      LinkComponent: b
    }
  )) }), [o]);
  return /* @__PURE__ */ m(L, { ref: l, className: "lp-section lp-simple-categories-section", children: [
    /* @__PURE__ */ m("div", { className: "regular-title", children: [
      /* @__PURE__ */ m("div", { className: "regular-title-text", children: [
        d(s) && /* @__PURE__ */ r("i", { className: s }),
        /* @__PURE__ */ r("span", { children: c })
      ] }),
      d(u) && d(g) && !k && /* @__PURE__ */ r(
        T,
        {
          type: "button",
          btnType: "tinted",
          color: "neutral",
          onClick: (e) => {
            var i;
            (i = e == null ? void 0 : e.target) == null || i.blur(), v(g);
          },
          borderRadius: "curved",
          className: "button-link",
          children: u
        }
      )
    ] }),
    /* @__PURE__ */ r(
      P,
      {
        isLoading: k,
        keyPrefix: "simple-categories-skeleton",
        children: /* @__PURE__ */ r(D, { limit: f, children: N })
      }
    )
  ] });
});
export {
  X as default
};