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

React component library

import { jsxs as l, jsx as t, Fragment as h } from "react/jsx-runtime";
import { forwardRef as u, Suspense as M, memo as W, useMemo as z } from "react";
import { n as f } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as y } from "./consts-C1uHV4xc.js";
import { u as P } from "./useDetectMobile-BC6EGaBc.js";
import { m as p, t as R, k as v } from "./utils-DtRLzzTZ.js";
import { T as j } from "./style-CiePxaJ_.js";
import A from "./Button.js";
import E from "./Link.js";
import { S as F } from "./index-5cttM4t7.js";
const I = f.div`
  display: grid;
  grid-template-columns: ${(i) => `repeat(${i.limit},  minmax(0, 1fr))`};
  gap: 1.25rem;

  @media (max-width: ${y + "px"}) {
    grid-template-columns: repeat(1, 1fr);
  }
`, C = f.div`
  display: flex;
  width: 100%;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
  background-color: var(--white);
  border-radius: 0.75rem;
  border: 1px solid var(--gray-95008);
  overflow: hidden;
  gap: 0.75rem;
  padding: 1rem;
  min-height: 10.375rem;
  max-height: 10.375rem;

  & img {
    max-width: 3.3125rem;
    min-width: 3.3125rem;
    min-height: 3.3125rem;
    max-height: 3.3125rem;
    border-radius: 0.75rem;
    object-fit: cover;
  }

  & .skeleton-img {
    max-width: 3.3125rem;
    min-width: 3.3125rem;
    min-height: 3.3125rem;
    max-height: 3.3125rem;
    border-radius: 0.75rem;
    background-color: ${p("-90deg")};
  }

  & a {
    margin-top: auto;
  }

  @media (max-width: ${y + "px"}) {
  }
`, N = f.div`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--gray-950, #14161a);

  & .text-wr-title {
    font-weight: 600;
    font-size: 1rem;
  }

  & .skeleton-title {
    height: 1.5rem;
    width: 80%;
    background-color: ${p("-90deg")};
  }

  & .skeleton-action {
    height: 1.25rem;
    width: 20%;
    background-color: ${p("-90deg")};
  }

  & .text-wr {
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--gray-700, #4e555f);
    ${R(3)}
  }
`, L = u(({}, i) => /* @__PURE__ */ l(C, { className: "blog-card", children: [
  /* @__PURE__ */ l(N, { children: [
    /* @__PURE__ */ t("div", { className: "skeleton-title" }),
    /* @__PURE__ */ t("div", { className: "text-wr" }),
    /* @__PURE__ */ t("div", { className: "skeleton-action" })
  ] }),
  /* @__PURE__ */ t("div", { className: "skeleton-img" })
] })), O = u((i, n) => {
  const { title: o, image: m, text: r, buttonText: c, onCardClick: a } = i;
  return (
    // <SimpleBlogCardHorizontalSkeleton />
    /* @__PURE__ */ l(C, { className: "blog-card", onClick: a, children: [
      /* @__PURE__ */ l(N, { children: [
        /* @__PURE__ */ t("div", { className: "text-wr-title", children: o }),
        /* @__PURE__ */ t("div", { className: "text-wr", children: r }),
        /* @__PURE__ */ t(E, { color: "gray", onClick: a, children: c })
      ] }),
      /* @__PURE__ */ t("img", { src: m })
    ] })
  );
}), _ = ({ limit: i = 3, isLoading: n = !1, keyPrefix: o }) => /* @__PURE__ */ t(h, { children: Array.from({ length: i }, (m, r) => /* @__PURE__ */ t(
  L,
  {
    isLoading: n
  },
  `${o}-skeleton-product-card-${r}`
)) }), D = ({
  children: i,
  fallbackComponent: n = /* @__PURE__ */ t(h, {}),
  isLoading: o = !1,
  limit: m,
  keyPrefix: r
}) => /* @__PURE__ */ t(M, { fallbackComponent: n, children: o === !0 ? /* @__PURE__ */ t(
  _,
  {
    isLoading: o,
    limit: m,
    keyPrefix: r
  }
) : i }), S = W(O), Y = u((i, n) => {
  const {
    icon: o,
    title: m,
    items: r,
    buttonText: c,
    limit: a = 3,
    options: d,
    onButtonAction: b = () => {
    },
    buttonLink: T,
    onSelectOption: k = () => {
    },
    isLoading: $ = !1,
    onSelectCard: s = () => {
    }
  } = i, w = P(), B = z(() => /* @__PURE__ */ t(h, { children: w === !0 ? r == null ? void 0 : r.map((e, g) => /* @__PURE__ */ t(
    S,
    {
      title: e == null ? void 0 : e.title,
      image: e == null ? void 0 : e.image,
      text: e == null ? void 0 : e.text,
      titleSlug: e == null ? void 0 : e.titleSlug,
      buttonText: e == null ? void 0 : e.buttonText,
      onCardClick: () => s(e)
    },
    g
  )) : r == null ? void 0 : r.slice(0, a).map((e, g) => /* @__PURE__ */ t(
    S,
    {
      title: e == null ? void 0 : e.title,
      image: e == null ? void 0 : e.image,
      text: e == null ? void 0 : e.text,
      titleSlug: e == null ? void 0 : e.titleSlug,
      buttonText: e == null ? void 0 : e.buttonText,
      onCardClick: () => s(e)
    },
    g
  )) }), [r, w, a, s]);
  return /* @__PURE__ */ l(j, { ref: n, children: [
    /* @__PURE__ */ l("div", { className: "regular-title", children: [
      /* @__PURE__ */ l("div", { className: "regular-title-text", children: [
        v(o) && /* @__PURE__ */ t("i", { className: o }),
        /* @__PURE__ */ t("span", { children: m })
      ] }),
      v(b) && /* @__PURE__ */ t(
        A,
        {
          type: "button",
          btnType: "tinted",
          color: "gray",
          onClick: () => b(T),
          borderRadius: "curved",
          children: c
        }
      )
    ] }),
    (d == null ? void 0 : d.length) > 0 && /* @__PURE__ */ t(
      F,
      {
        items: d,
        onRemove: (e) => {
          k(e);
        },
        onSelect: (e) => {
          k(e);
        },
        labelKey: "name",
        valueKey: "code",
        noMargin: !0
      }
    ),
    /* @__PURE__ */ t(I, { limit: a, children: /* @__PURE__ */ t(
      D,
      {
        isLoading: $,
        limit: a,
        keyPrefix: "explore-landing",
        children: B
      }
    ) })
  ] });
});
export {
  Y as default
};