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

React component library

import { jsx as t, Fragment as u, jsxs as m } from "react/jsx-runtime";
import { forwardRef as f } from "react";
import _ from "./Button.js";
import { n as s } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { m as n, t as g, k as p } from "./utils-DtRLzzTZ.js";
import { u as w } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { M as h } from "./consts-C1uHV4xc.js";
const b = s.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 0.75rem;
  position: relative;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
  cursor: pointer;

  grid-column: ${(r) => {
  var e;
  return ((e = r.position) == null ? void 0 : e.columnStart) || "1";
}} /
    ${(r) => {
  var e;
  return ((e = r.position) == null ? void 0 : e.columnEnd) || "6";
}};
  grid-row: ${(r) => {
  var e;
  return ((e = r.position) == null ? void 0 : e.rowStart) || "1";
}} /
    ${(r) => {
  var e;
  return ((e = r.position) == null ? void 0 : e.rowEnd) || "1";
}};

  background: linear-gradient(
    178deg,
    rgba(0, 0, 0, 0) 1.5%,
    rgba(0, 0, 0, 0.16) 8.95%,
    #000 98.39%
  );

  & .wrapper__image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 0.75rem;
    mix-blend-mode: multiply;
  }

  & .wrapper__image--skeleton {
    width: 24.5rem;
    height: 30rem;
    border-radius: 0.75rem;
    background-color: ${n("-90deg")};
  }

  & .wrapper__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
    position: absolute;
    bottom: 0;
    left: 0;
    gap: 0.75rem;

    & .text__title {
      transition: var(--transiton, all 0.2s ease);
      color: var(--white, #ffffff);
      font-size: 1rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.5rem;
      ${g(2)}
    }

    & .text__tag {
      background-color: var(--warning-600, #d97706);
      color: var(--white, #ffffff);
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.25rem;
      padding: 0.25rem 0.5rem;

      border-radius: 0.375rem;
      background: var(--warning-600, #d97706);
    }

    & .text__description {
      color: var(--white);
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1.25rem;
      ${g(2)}
    }

    & .text__action {
      background: var(--white);
      color: var(--black);

      &:hover {
        background: var(--primary-500, #f59e0b);
        color: var(--white);
      }
    }

    & .text__title--skeleton {
      background-color: ${n("-90deg")};
      height: 1rem;
      width: 9rem;
    }

    & .text__description--skeleton {
      background-color: ${n("-90deg")};
      height: 1rem;
      width: 12rem;
    }

    & .text__action--skeleton {
      background-color: ${n("-90deg")};
      height: 2rem;
      width: 9rem;
    }
  }

  &:hover {
    cursor: pointer;

    & .wrapper__text {
      & .text__title {
        color: var(--primary-500, #e87722);
      }
    }
  }
`, v = f(
  ({
    title: r,
    image: e,
    description: a,
    actionText: o,
    onSelectCard: l = () => {
    },
    className: i,
    position: d,
    tag: c
  }, $) => {
    const x = w();
    return /* @__PURE__ */ t(u, { children: /* @__PURE__ */ m(
      b,
      {
        theme: x,
        className: i,
        onClick: l,
        position: d,
        children: [
          /* @__PURE__ */ t("img", { src: e, className: "wrapper__image" }),
          /* @__PURE__ */ m("div", { className: "wrapper__text", children: [
            c && /* @__PURE__ */ t("div", { className: "text__tag", children: c }),
            /* @__PURE__ */ t("div", { className: "text__title", children: r }),
            p(a) && /* @__PURE__ */ t("div", { className: "text__description", children: a }),
            p(o) && /* @__PURE__ */ t(
              _,
              {
                text: o,
                onClick: l,
                className: "text__action"
              }
            )
          ] })
        ]
      }
    ) });
  }
), y = s.div`
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

  & .regular-title {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    font-size: 1.5rem;
    font-weight: 600;
    & .regular-title-text {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }

    & i {
      font-size: 1.5rem;
      color: var(--primary-500, #f59e0b);
    }
  }

  @media (max-width: ${h + "px"}) {
    gap: 1.25rem;

    & .regular-title {
      font-size: 1.375rem;

      &.center {
        justify-content: center;
      }
    }
  }
`, k = s.div`
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 15rem 15rem;
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  height: 30rem;
  max-height: 30rem;

  @media (max-width: ${h + "px"}) {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0 1rem;
  }
`, M = f(
  ({ title: r, items: e, limit: a = 3, onSelectCard: o = () => {
  } }, l) => /* @__PURE__ */ m(y, { children: [
    /* @__PURE__ */ t("div", { className: "regular-title", children: /* @__PURE__ */ t("div", { className: "regular-title-text", children: /* @__PURE__ */ t("span", { children: r }) }) }),
    /* @__PURE__ */ t(k, { limit: a, children: e && (e == null ? void 0 : e.map((i, d) => /* @__PURE__ */ t(
      v,
      {
        ...i,
        onSelectCard: () => o(i == null ? void 0 : i.uuid)
      },
      `landing-page-masonry-general-card__${d + 1}`
    ))) })
  ] })
);
export {
  M as default
};