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

React component library

import { jsx as r, Fragment as v, jsxs as a } from "react/jsx-runtime";
import { forwardRef as $, Suspense as N } from "react";
import z from "./Button.js";
import { s as d } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { w as s, n as x, l as w } from "./utils-BUdHa0nB.js";
import { d as m } from "./breakpoints-BubDitvo.js";
import { u as G } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { S as j, e as _, a as l, c as b } from "./style-NhzYtIA7.js";
const M = d.a`
  text-decoration: none;
  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;
  text-decoration: none;
  overflow: hidden;

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

  background: ${(e) => e.backgroundColor || `linear-gradient(
    178deg,
    rgba(0, 0, 0, 0) 1.5%,
    rgba(0, 0, 0, 0.16) 8.95%,
    #000 98.39%
  )`};

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 0.375rem;
    width: 100%;
    background: ${(e) => e.borderColor || "transparent"};
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
  }

  &:hover::after {
    transform: scaleX(1); /* ide na 100% */
  }

  

  & .wrapper__image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 0.75rem;
    mix-blend-mode: multiply;
    transition: var(--transiton, all 0.2s ease);

    &:hover {
      transform: scale(1.2);
    }
  }

  & .wrapper__image--skeleton {
    width: 24.5rem;
    height: 30rem;
    border-radius: 0.75rem;
    background-color: ${s("-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;
      ${x(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;
      ${x(2)}
    }

    & .text__action {
      background-color: var(--white, #fff);
      color: var(--neutral-600, #0f2a46);
      border: 1px solid var(--gray-200, #e4e9f0);
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px 0 rgba(0, 0, 0, 0.06);
      transition: var(--transiton, all 0.2s ease);

      &:hover {
        background-color: var(--gray-200, #e4e9f0);
      }
    }

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

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

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

  @media ${m("S")} {
    & .wrapper__image {
      height: 100%;
      max-height: 14.5rem;
    }
  }
`, R = $(
  ({
    title: e,
    imageUrl: t,
    description: o,
    buttonText: i,
    onSelectCard: c = () => {
    },
    className: g,
    position: h,
    tag: n,
    backgroundColor: p,
    borderColor: y,
    buttonLink: f,
    LinkComponent: u
  }, k) => {
    const S = u || "a", C = G();
    return /* @__PURE__ */ r(v, { children: /* @__PURE__ */ a(
      M,
      {
        ref: k,
        theme: C,
        className: g,
        position: h,
        backgroundColor: p,
        onClick: c,
        as: S,
        borderColor: y,
        ...u ? {
          to: `/${f}`
        } : {
          href: `/${f}`
        },
        children: [
          /* @__PURE__ */ r("img", { src: t, className: "wrapper__image", loading: "lazy" }),
          /* @__PURE__ */ a("div", { className: "wrapper__text", children: [
            n && /* @__PURE__ */ r("div", { className: "text__tag", children: n }),
            /* @__PURE__ */ r("div", { className: "text__title", children: e }),
            w(o) && /* @__PURE__ */ r("div", { className: "text__description", children: o }),
            w(i) && /* @__PURE__ */ r(
              z,
              {
                text: i,
                className: "text__action",
                color: "gray"
              }
            )
          ] })
        ]
      }
    ) });
  }
), E = d.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 ${m("S")} {
    & .regular-title {
      font-size: 1.375rem;

      &.center {
        justify-content: center;
      }
    }
  }
`, W = d.div`
  display: grid;
  grid-template-columns: ${() => "repeat(12,  minmax(0, 1fr))"};

  grid-template-rows: 15rem 15rem;
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  height: 30rem;
  max-height: 30rem;

  @media ${m("S")} {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    height: 100%;
    max-height: 100%;
  }
`, A = d(j)`
  @media ${m("S")} {
    flex-direction: column;

    & .skeleton__big {
      width: 100%;
      height: 100%;
      aspect-ratio: 1 / 1;
    }

    & > div {
      flex-direction: column;
    }
  }
`, T = ({ keyPrefix: e }) => /* @__PURE__ */ a(A, { children: [
  /* @__PURE__ */ r(_, { children: /* @__PURE__ */ r(
    l,
    {
      height: "31.25rem",
      className: "skeleton__big",
      width: "100%"
    },
    `${e}-1`
  ) }),
  /* @__PURE__ */ a(_, { children: [
    /* @__PURE__ */ a(b, { children: [
      /* @__PURE__ */ r(l, { width: "100%", height: "15rem" }, `${e}-2`),
      /* @__PURE__ */ r(l, { width: "100%", height: "15rem" }, `${e}-3`)
    ] }),
    /* @__PURE__ */ a(b, { children: [
      /* @__PURE__ */ r(l, { width: "100%", height: "15rem" }, `${e}-4`),
      /* @__PURE__ */ r(l, { width: "100%", height: "15rem" }, `${e}-5`)
    ] })
  ] })
] }), X = ({
  keyPrefix: e,
  isLoading: t = !1,
  fallbackComponent: o = /* @__PURE__ */ r(v, {}),
  children: i
}) => /* @__PURE__ */ r(N, { fallbackComponent: o, children: t === !0 ? /* @__PURE__ */ r(T, { keyPrefix: e }) : i }), O = $(
  ({
    title: e,
    items: t,
    isLoading: o = !1,
    limit: i = 3,
    onSelectCard: c = () => {
    },
    LinkComponent: g
  }, h) => /* @__PURE__ */ a(E, { ref: h, className: "lp-section lp-general-section lp-masonry-general-cards-section", children: [
    /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ r("div", { className: "regular-title-text", children: /* @__PURE__ */ r("span", { children: e }) }) }),
    /* @__PURE__ */ r(
      X,
      {
        isLoading: o,
        keyPrefix: "masonry-general-cards-skeleton",
        children: /* @__PURE__ */ r(W, { limit: i, children: t && (t == null ? void 0 : t.map((n, p) => /* @__PURE__ */ r(
          R,
          {
            ...n,
            onSelectCard: () => c(n),
            LinkComponent: g
          },
          `landing-page-masonry-general-card__${p + 1}`
        ))) })
      }
    )
  ] })
);
export {
  O as default
};