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

React component library

import { jsxs as h, jsx as t, Fragment as C } from "react/jsx-runtime";
import { forwardRef as w, useRef as S, Suspense as y } from "react";
import { s as f } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as s } from "./breakpoints-BubDitvo.js";
import { u as $ } from "./useDetectMobile-B0Jog4jQ.js";
import { n as v } from "./utils-BUdHa0nB.js";
import T from "./Button.js";
import { P as R } from "./index-DxYmn1al.js";
import { S as B, a as N } from "./style-NhzYtIA7.js";
const j = f.div`
  display: grid;
  grid-template-columns: ${(n) => `repeat(${n.limit},  minmax(0, 1fr))`};
  gap: 1.25rem;
  margin: auto;
  width: fit-content;

  @media ${s("M")} {
    grid-template-columns: repeat(2, 1fr);
  }

  @media ${s("S")} {
    grid-template-columns: repeat(2, 1fr);
  }

  @media ${s("XS")} {
    grid-template-columns: repeat(1, 1fr);
  }
`, z = f.a`
  text-decoration: none;
  color: var(--gray-950);
  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;
  align-items: center;

  & button {
    width: fit-content;
    margin-top: 1.5rem;
    color: var(--gray-950, #14161a);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: -0.09px;
  }

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

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

  & .text-wr-title {
    text-align: center;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.75rem;
  }

  & .text-wr {
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: 0.0156rem;
    ${v(3)}
  }
`, b = w((n, o) => {
  const {
    title: r,
    image: a,
    text: c,
    buttonText: u,
    onCardClick: d,
    metadata: i,
    link: p,
    LinkComponent: e
  } = n, m = e || "a", g = S(), l = (k) => {
    d(k, g);
  };
  return /* @__PURE__ */ h(
    z,
    {
      ref: g,
      name: i == null ? void 0 : i.name,
      "data-accessor": i == null ? void 0 : i.accessor,
      className: "blog-card",
      onClick: l,
      as: m,
      ...e ? { to: `/${p}` } : { href: `/${p}` },
      children: [
        /* @__PURE__ */ t(R, { src: a }),
        /* @__PURE__ */ h(W, { children: [
          /* @__PURE__ */ t("div", { className: "text-wr-title", children: r }),
          /* @__PURE__ */ t("div", { className: "text-wr", children: c })
        ] }),
        /* @__PURE__ */ t(
          T,
          {
            borderRadius: "curved",
            color: "gray",
            type: "button",
            btnType: "outline",
            onClick: l,
            size: "medium",
            children: u
          }
        )
      ]
    }
  );
}), I = f(B)`
  @media ${s("S")} {
    flex-direction: column;
  }
`, L = ({ keyPrefix: n }) => /* @__PURE__ */ t(I, { justifyContent: "center", alignItems: "center", children: [1, 2, 3].map((o) => /* @__PURE__ */ t(
  N,
  {
    height: "24.75rem",
    width: "18.5rem"
  },
  `${n}-${o}`
)) }), M = ({
  keyPrefix: n,
  isLoading: o = !1,
  fallbackComponent: r = /* @__PURE__ */ t(C, {}),
  children: a
}) => /* @__PURE__ */ t(y, { fallbackComponent: r, children: o === !0 ? /* @__PURE__ */ t(L, { keyPrefix: n }) : a }), J = w((n, o) => {
  const {
    items: r,
    limit: a = 3,
    onSelectCard: c = () => {
    },
    isLoading: u = !1,
    componentName: d,
    LinkComponent: i
  } = n, p = $();
  return /* @__PURE__ */ t(
    M,
    {
      isLoading: u,
      keyPrefix: "blogs-simple-centered-skeleton",
      children: /* @__PURE__ */ t(j, { ref: o, limit: a, className: "lp-section lp-blogs-section-simple-centered", children: /* @__PURE__ */ t(C, { children: p === !0 ? r == null ? void 0 : r.map((e, m) => /* @__PURE__ */ t(
        b,
        {
          title: e == null ? void 0 : e.title,
          image: (e == null ? void 0 : e.image) || null,
          text: e == null ? void 0 : e.text,
          buttonText: e == null ? void 0 : e.buttonText,
          onCardClick: (g, l) => c(e, l),
          metadata: { name: d, accessor: e == null ? void 0 : e.accessor },
          link: e == null ? void 0 : e.link,
          LinkComponent: i
        },
        m
      )) : r == null ? void 0 : r.slice(0, a).map((e, m) => /* @__PURE__ */ t(
        b,
        {
          title: e == null ? void 0 : e.title,
          image: (e == null ? void 0 : e.image) || null,
          text: e == null ? void 0 : e.text,
          buttonText: e == null ? void 0 : e.buttonText,
          onCardClick: (g, l) => c(e, l),
          metadata: { name: d, accessor: e == null ? void 0 : e.accessor },
          link: e == null ? void 0 : e.link,
          LinkComponent: i
        },
        m
      )) }) })
    }
  );
});
export {
  J as default
};