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

React component library

import { jsxs as c, jsx as t, Fragment as s } from "react/jsx-runtime";
import { forwardRef as u, Suspense as k, memo as S, useMemo as v } from "react";
import { n as g } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as h } from "./consts-C1uHV4xc.js";
import { u as y } from "./useDetectMobile-BC6EGaBc.js";
import { m as f, t as $ } from "./utils-DtRLzzTZ.js";
import T from "./Button.js";
const B = g.div`
  display: grid;
  grid-template-columns: ${(i) => `repeat(${i.limit},  minmax(0, 1fr))`};
  gap: 1.25rem;
  margin: auto;
  width: fit-content;
  @media (max-width: ${h + "px"}) {
    grid-template-columns: repeat(1, 1fr);
  }
`, w = g.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 18.125rem;
  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: 1.5rem;
  padding: 2rem 1.25rem;
  min-height: 22.5rem;
  max-height: 22.5rem;
  align-items: center;

  & button {
    width: fit-content;
    margin-top: auto;
  }

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

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

  @media (max-width: ${h + "px"}) {
    max-width: unset;
  }
`, b = g.div`
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--gray-950, #14161a);

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

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

  & .text-wr {
    font-weight: 400;
    font-size: 0.875rem;
    flex: 1;
    color: var(--gray-700, #4e555f);
    ${$(3)}
  }
`, M = u((i, a) => {
  const { onCardClick: r } = i;
  return (
    // <SimpleBlogCardSkeleton />
    /* @__PURE__ */ c(w, { className: "product-card", onClick: r, children: [
      /* @__PURE__ */ t("div", { "skeleton-img": !0 }),
      /* @__PURE__ */ t(b, { children: /* @__PURE__ */ t("div", { className: "skeleton-title" }) })
    ] })
  );
}), z = u((i, a) => {
  const { title: r, image: o, text: n, buttonText: m, onCardClick: l } = i;
  return (
    // <SimpleBlogCardCenteredSkeleton />
    /* @__PURE__ */ c(w, { className: "blog-card", onClick: l, children: [
      /* @__PURE__ */ t("img", { src: o }),
      /* @__PURE__ */ c(b, { children: [
        /* @__PURE__ */ t("div", { className: "text-wr-title", children: r }),
        /* @__PURE__ */ t("div", { className: "text-wr", children: n })
      ] }),
      /* @__PURE__ */ t(
        T,
        {
          borderRadius: "curved",
          color: "gray",
          type: "button",
          btnType: "outline",
          onClick: l,
          size: "medium",
          children: m
        }
      )
    ] })
  );
}), N = ({ limit: i = 3, isLoading: a = !1, keyPrefix: r }) => /* @__PURE__ */ t(s, { children: Array.from({ length: i }, (o, n) => /* @__PURE__ */ t(
  M,
  {
    isLoading: a
  },
  `${r}-skeleton-product-card-${n}`
)) }), P = ({
  children: i,
  fallbackComponent: a = /* @__PURE__ */ t(s, {}),
  isLoading: r = !1,
  limit: o,
  keyPrefix: n
}) => /* @__PURE__ */ t(k, { fallbackComponent: a, children: r === !0 ? /* @__PURE__ */ t(
  N,
  {
    isLoading: r,
    limit: o,
    keyPrefix: n
  }
) : i }), p = S(z), G = u((i, a) => {
  const {
    items: r,
    limit: o = 3,
    onSelectCard: n = () => {
    },
    isLoading: m = !1
  } = i, l = y(), C = v(() => /* @__PURE__ */ t(s, { children: l === !0 ? r == null ? void 0 : r.map((e, d) => /* @__PURE__ */ t(
    p,
    {
      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: () => n(e == null ? void 0 : e.uuid)
    },
    d
  )) : r == null ? void 0 : r.slice(0, o).map((e, d) => /* @__PURE__ */ t(
    p,
    {
      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: () => n(e == null ? void 0 : e.uuid)
    },
    d
  )) }), [r, l, o, n]);
  return /* @__PURE__ */ t(B, { ref: a, limit: o, children: /* @__PURE__ */ t(
    P,
    {
      isLoading: m,
      limit: o,
      keyPrefix: "explore-landing",
      children: C
    }
  ) });
});
export {
  G as default
};