@lanaco/lnc-react-ui/dist/index-Bdf71hkj.js

React component library

import { jsxs as d, jsx as e } from "react/jsx-runtime";
import { forwardRef as b, useRef as w } from "react";
import { s } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as l } from "./breakpoints-BubDitvo.js";
import { n as y } from "./utils-BUdHa0nB.js";
import { u as v } from "./useDetectMobile-B0Jog4jQ.js";
import c from "./Button.js";
import { P as C } from "./index-DxYmn1al.js";
const k = s.a`
  text-decoration: none;
  color: var(--gray-950);
  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;

  &:hover {
    cursor: pointer;
  }

  & 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;
  }

  @media ${l("S")} {
    padding: 1rem;
    column-gap: 1.5rem;
    row-gap: 1rem;
    display: grid;
    grid-template-columns: repeat(2, auto);
    max-height: 100%;
    min-height: 100%;
    & .action {
      grid-column: 1 / 3;
    }

    & 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;
    }
  }
`, T = s.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);
    ${y(3)}
  }

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

  @media ${l("S")} {
    padding: 0;
  }
`, L = b((p, $) => {
  const {
    title: g,
    imageUrl: h,
    text: u,
    onCardClick: t,
    buttonText: o,
    metadata: r,
    titleSlug: i,
    LinkComponent: a
  } = p, x = a || "a", m = v(), n = w();
  return /* @__PURE__ */ d(
    k,
    {
      ref: n,
      className: "blog-card",
      "data-accessor": r == null ? void 0 : r.accessor,
      name: r == null ? void 0 : r.name,
      onClick: (f) => t(f, n),
      as: x,
      ...a ? { to: `/blog/${i}` } : { href: `/blog/${i}` },
      children: [
        /* @__PURE__ */ e(C, { src: h }),
        /* @__PURE__ */ d(T, { children: [
          /* @__PURE__ */ e("div", { className: "text-wr-title", children: g }),
          /* @__PURE__ */ e("div", { className: "text-wr", children: u }),
          m !== !0 && /* @__PURE__ */ e(
            c,
            {
              type: "button",
              btnType: "outline",
              size: "medium",
              color: "gray",
              onClick: t,
              children: o
            }
          )
        ] }),
        m === !0 && /* @__PURE__ */ e(
          c,
          {
            className: "action",
            type: "button",
            btnType: "outline",
            size: "medium",
            color: "gray",
            onClick: t,
            children: o
          }
        )
      ]
    }
  );
});
export {
  L as B
};