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

React component library

import { jsxs as d, jsx as r, Fragment as p } from "react/jsx-runtime";
import { forwardRef as g, Suspense as $, memo as R, useMemo as M } from "react";
import { n as b } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as v } from "./consts-C1uHV4xc.js";
import { u as E } from "./useDetectMobile-BC6EGaBc.js";
import { t as h, m as I, k as f } from "./utils-DtRLzzTZ.js";
import { R as P } from "./style-CiePxaJ_.js";
import T from "./Button.js";
const j = b.div`
  display: grid;
  grid-template-columns: ${(t) => "repeat(6,  minmax(0, 1fr))"};
  gap: 2rem;

  @media (max-width: ${v + "px"}) {
    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 */
    }
  }
`, y = b.div`
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-950, #14161a);
  min-height: 12.25rem;
  max-height: 12.25rem;
  border-radius: 0.75rem;
  border: 1px solid var(--gray-95008, rgba(20, 22, 26, 0.08));
  background: var(--white, #fff);
  cursor: pointer;

  transition: var(--transition);
  &:hover {
    color: var(--primary-500, #f59e0b);
  }

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

  & .card-content {
    padding: 0.75rem;
    ${h(2)}
  }

  & .card-content-2 {
    ${h(2)}
  }

  & img {
    width: 100%;
    object-fit: cover;
    min-height: 8.25rem;
    max-height: 8.25rem;
  }

  & .skeleton-img {
    width: 100%;
    min-height: 8.25rem;
    max-height: 8.25rem;
    ${I("-90deg")}
  }

  @media (max-width: ${v + "px"}) {
    min-width: 8.75rem;
    max-width: 8.75rem;

    & .img,
    .skeleton-img {
      min-height: 5.375rem;
      max-height: 5.375rem;
    }
  }
`, z = g((t, o) => {
  const { uuid: a, image: n, name: i, onSelectCard: l = () => {
  } } = t;
  return /* @__PURE__ */ d(
    y,
    {
      className: "simple-category-card",
      onClick: () => l(a),
      children: [
        /* @__PURE__ */ r("img", { src: n }),
        /* @__PURE__ */ r("div", { className: "card-content", children: /* @__PURE__ */ r("div", { className: "card-content-2", children: i }) })
      ]
    }
  );
}), A = g(({}, t) => /* @__PURE__ */ d(y, { className: "simple-category-card", children: [
  /* @__PURE__ */ r("div", { className: "skeleton-img" }),
  /* @__PURE__ */ r("div", { className: "card-content" })
] })), B = ({ limit: t = 12, isLoading: o = !1, keyPrefix: a }) => /* @__PURE__ */ r(p, { children: Array.from({ length: t }, (n, i) => /* @__PURE__ */ r(
  A,
  {
    isLoading: o
  },
  `${a}-skeleton-category-card-${i}`
)) }), W = ({
  children: t,
  fallbackComponent: o = /* @__PURE__ */ r(p, {}),
  isLoading: a = !1,
  limit: n,
  keyPrefix: i
}) => /* @__PURE__ */ r($, { fallbackComponent: o, children: a === !0 ? /* @__PURE__ */ r(
  B,
  {
    isLoading: a,
    limit: n,
    keyPrefix: i
  }
) : t }), w = R(z), q = g((t, o) => {
  const {
    icon: a,
    title: n = "Shop by category",
    items: i,
    buttonText: l,
    buttonLink: u,
    limit: s = 12,
    onButtonAction: k = () => {
    },
    onSelectCard: m = () => {
    },
    isLoading: S = !1
  } = t, C = E(), N = M(() => /* @__PURE__ */ r(p, { children: C === !0 ? i == null ? void 0 : i.map((e, c) => /* @__PURE__ */ r(
    w,
    {
      uuid: e == null ? void 0 : e.uuid,
      image: e == null ? void 0 : e.image,
      name: e == null ? void 0 : e.name,
      onSelectCard: () => m == null ? void 0 : m(e == null ? void 0 : e.uuid)
    },
    c
  )) : i == null ? void 0 : i.slice(0, s).map((e, c) => /* @__PURE__ */ r(
    w,
    {
      uuid: e == null ? void 0 : e.uuid,
      image: e == null ? void 0 : e.image,
      name: e == null ? void 0 : e.name,
      onSelectCard: () => m == null ? void 0 : m(e == null ? void 0 : e.uuid)
    },
    c
  )) }), [i]);
  return /* @__PURE__ */ d(P, { ref: o, children: [
    /* @__PURE__ */ d("div", { className: "regular-title", children: [
      /* @__PURE__ */ d("div", { className: "regular-title-text", children: [
        f(a) && /* @__PURE__ */ r("i", { className: a }),
        /* @__PURE__ */ r("span", { children: n })
      ] }),
      f(u) && /* @__PURE__ */ r(
        T,
        {
          type: "button",
          btnType: "tinted",
          color: "gray",
          onClick: () => k(u),
          borderRadius: "curved",
          children: l
        }
      )
    ] }),
    /* @__PURE__ */ r(j, { limit: s, children: /* @__PURE__ */ r(
      W,
      {
        isLoading: S,
        limit: s,
        keyPrefix: "explore-landing",
        children: N
      }
    ) })
  ] });
});
export {
  q as default
};