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

React component library

import { jsxs as s, jsx as t, Fragment as g } from "react/jsx-runtime";
import { forwardRef as h, Suspense as C, memo as S, useMemo as $ } from "react";
import { n as p } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as u } from "./consts-C1uHV4xc.js";
import { u as w } from "./useDetectMobile-BC6EGaBc.js";
import { m as k, t as T } from "./utils-DtRLzzTZ.js";
import f from "./Button.js";
const M = p.div`
  display: grid;
  grid-template-columns: ${(i) => `repeat(${i.limit},  minmax(0, 1fr))`};
  gap: 1.25rem;

  @media (max-width: ${u + "px"}) {
    grid-template-columns: repeat(1, 1fr);
  }
`, y = p.div`
  display: flex;
  width: 100%;
  gap: 1.25rem;
  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;
  max-height: 11.25rem;
  min-height: 11.25rem;

  & img {
    max-height: 11.25rem;
    min-height: 11.25rem;
    min-width: 11.25rem;
    max-width: 11.25rem;
    object-fit: cover;
    width: 100%;
    border-radius: 0.75rem 0 0 0.75rem;
  }

  & .skeleton-img {
    width: 100%;
    max-height: 11.25rem;
    min-height: 12.25rem;
    min-width: 11.25rem;
    max-width: 11.25rem;
    background-color: ${k("-90deg")};
    border-radius: 0.75rem 0 0 0.75rem;
  }

  @media (max-width: ${u + "px"}) {
    padding: 1rem;
    column-gap: 1.5rem;
    row-gap: 1rem;
    display: grid;
    grid-template-columns: repeat(2, auto);
    max-height: 13.25rem;
    min-height: 13.25rem;
    & .action {
      grid-column: 1 / 3;
    }

    & img,
    .skeleton-img {
      max-height: 7.75rem;
      min-height: 7.75rem;
      min-width: 7.75rem;
      max-width: 7.75rem;
      border-radius: 0.75rem;
    }

    & button {
      width: 100%;
      margin-top: auto;
    }
  }
`, v = p.div`
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--gray-950, #14161a);

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

  & .text-wr {
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--gray-700, #4e555f);
    ${T(3)}
  }

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

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

  @media (max-width: ${u + "px"}) {
    padding: 0;
  }
`, N = h((i, m) => {
  const { title: r, image: a, text: o, onCardClick: n, buttonText: l } = i, d = w();
  return /* @__PURE__ */ s(y, { className: "blog-card", onClick: n, children: [
    /* @__PURE__ */ t("img", { src: a }),
    /* @__PURE__ */ s(v, { children: [
      /* @__PURE__ */ t("div", { className: "text-wr-title", children: r }),
      /* @__PURE__ */ t("div", { className: "text-wr", children: o }),
      d !== !0 && /* @__PURE__ */ t(
        f,
        {
          type: "button",
          btnType: "outline",
          size: "medium",
          color: "gray",
          onClick: n,
          children: l
        }
      )
    ] }),
    d === !0 && /* @__PURE__ */ t(
      f,
      {
        className: "action",
        type: "button",
        btnType: "outline",
        size: "medium",
        color: "gray",
        onClick: n,
        children: l
      }
    )
  ] });
}), z = h(({}, i) => /* @__PURE__ */ s(y, { className: "blog-card", children: [
  /* @__PURE__ */ t("div", { className: "skeleton-img" }),
  /* @__PURE__ */ t(v, { children: /* @__PURE__ */ t("div", { className: "skeleton-title" }) })
] })), B = ({ limit: i = 2, isLoading: m = !1, keyPrefix: r }) => /* @__PURE__ */ t(g, { children: Array.from({ length: i }, (a, o) => /* @__PURE__ */ t(
  z,
  {
    isLoading: m
  },
  `${r}-skeleton-product-card-${o}`
)) }), L = ({
  children: i,
  fallbackComponent: m = /* @__PURE__ */ t(g, {}),
  isLoading: r = !1,
  limit: a,
  keyPrefix: o
}) => /* @__PURE__ */ t(C, { fallbackComponent: m, children: r === !0 ? /* @__PURE__ */ t(
  B,
  {
    isLoading: r,
    limit: a,
    keyPrefix: o
  }
) : i }), b = S(N), G = h((i, m) => {
  const {
    items: r,
    onSelectCard: a = () => {
    },
    limit: o = 2,
    isLoading: n = !1
  } = i, l = w(), d = $(() => /* @__PURE__ */ t(g, { children: l === !0 ? r == null ? void 0 : r.map((e, c) => /* @__PURE__ */ t(
    b,
    {
      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: () => a(e)
    },
    c
  )) : r == null ? void 0 : r.slice(0, o).map((e, c) => /* @__PURE__ */ t(
    b,
    {
      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: () => a(e)
    },
    c
  )) }), [r, l, o, a]);
  return /* @__PURE__ */ t(M, { ref: m, limit: o, children: /* @__PURE__ */ t(
    L,
    {
      isLoading: n,
      limit: o,
      keyPrefix: "explore-landing",
      children: d
    }
  ) });
});
export {
  G as default
};