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

React component library

import { jsxs as c, jsx as r } from "react/jsx-runtime";
import { forwardRef as p, memo as u, useMemo as h } from "react";
import { t as _, n as b, l as w } from "./utils-BUdHa0nB.js";
import { s as g } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as m } from "./breakpoints-BubDitvo.js";
import { u as y } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { q as v } from "./styled-components.browser.esm-Cfeh8eHg.js";
import { S as q } from "./index-Bclu4KBK.js";
const k = g.div`
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 1;

  background: -moz-linear-gradient(
    top,
    rgba(35, 42, 33, 0.45) 0%,
    rgba(35, 42, 33, 0.45) 100%
  );
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, rgba(35, 42, 33, 0.45)),
    color-stop(100%, rgba(35, 42, 33, 0.45))
  );
  background: -webkit-linear-gradient(
    top,
    rgba(35, 42, 33, 0.45) 0%,
    rgba(35, 42, 33, 0.45) 100%
  );
  background: -o-linear-gradient(
    top,
    rgba(35, 42, 33, 0.45) 0%,
    rgba(35, 42, 33, 0.45) 100%
  );
  background: -ms-linear-gradient(
    top,
    rgba(35, 42, 33, 0.45) 0%,
    rgba(35, 42, 33, 0.45) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(35, 42, 33, 0.45) 0%,
    rgba(35, 42, 33, 0.45) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
  border-radius: 0.75rem;
  z-index: 2;
`, z = g.a`
  text-decoration: none;
  color: var(--gray-950);
  cursor: pointer;
  position: relative;
  border-radius: 0.75rem;
  position: relative;
  width: 100%;
  min-width: 10rem;
  height: 11.875rem;

  &:hover .quattro-card__gradient {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  & img {
    width: 100%;
    height: 100%;
    border-radius: 0.75rem;
    object-fit: cover;
  }
  & .quattro-card__text {
    z-index: 3;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    color: var(--white, #fff);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
    text-align: center;

    & .quattro-card__title {
      font-size: 1.25rem;
      font-style: normal;
      font-weight: 600;
      line-height: 1.75rem;
      ${_()}
    }

    & .quattro-card__description {
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.25rem;
      ${b(2)}
    }
  }

  @media ${m("S")} {
    width: 100%;

    img {
      object-fit: fill;
    }

    & .quattro-card__title {
      font-size: 1rem;
      font-weight: 700;
      width: 100%;
    }

    & .quattro-card__description {
      display: block;
    }
  }
`, N = p(
  ({
    title: o,
    description: t,
    imageUrl: l,
    onSelectCard: a = () => {
    },
    link: n,
    LinkComponent: s
  }, d) => {
    const { theme: i } = y();
    return /* @__PURE__ */ c(
      z,
      {
        ref: d,
        theme: i,
        onClick: a,
        as: s || "a",
        ...s ? {
          to: `/${n}`
        } : {
          href: `/${n}`
        },
        children: [
          /* @__PURE__ */ r("img", { loading: "lazy", src: l }),
          /* @__PURE__ */ r(k, { theme: i, className: "quattro-card__gradient", children: /* @__PURE__ */ c("div", { className: "quattro-card__text", children: [
            /* @__PURE__ */ r("div", { className: "quattro-card__title", children: o }),
            /* @__PURE__ */ r("div", { className: "quattro-card__description", children: t })
          ] }) })
        ]
      }
    );
  }
), $ = v.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;

  & .wrapper__heading {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;

    & .wrapper__title {
      display: flex;
      justify-content: space-between;

      & .title__text {
        color: var(--gray-950, #14161a);
        text-align: center;
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 600;
        line-height: 2rem;
        letter-spacing: -0.47px;

        display: flex;
        align-items: center;
        gap: 0.5rem;

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

  & .wrapper__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    justify-items: center;
    align-items: center;
    width: 100%;
  }

  @media ${m("S")} {
    gap: 1.25rem;
  }

  @media ${m("XS")} {
    & .wrapper__cards {
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap: 1rem;
    }
  }
`, x = u(N), I = p(
  ({ title: o, items: t, isLoading: l = !1, onSelectCard: a = () => {
  }, LinkComponent: n }, s) => {
    const d = h(() => {
      var i;
      return (i = t == null ? void 0 : t.slice(0, 4)) == null ? void 0 : i.map((e, f) => /* @__PURE__ */ r(
        x,
        {
          title: e == null ? void 0 : e.title,
          description: e == null ? void 0 : e.description,
          imageUrl: e == null ? void 0 : e.imageUrl,
          onSelectCard: () => a == null ? void 0 : a(e),
          link: e == null ? void 0 : e.link,
          LinkComponent: n
        },
        `quattro-card__${f + 1}`
      ));
    }, [t]);
    return /* @__PURE__ */ c($, { ref: s, className: "lp-section lp-general-section lp-quattro-cards-section", children: [
      /* @__PURE__ */ r("div", { className: "wrapper__heading", children: /* @__PURE__ */ r("div", { className: "wrapper__title", children: w(o) && /* @__PURE__ */ r("div", { className: "title__text", children: /* @__PURE__ */ r("span", { children: o }) }) }) }),
      /* @__PURE__ */ r(
        q,
        {
          isLoading: l,
          keyPrefix: "quattro-cards-skeleton",
          children: /* @__PURE__ */ r("div", { className: "wrapper__cards", children: d })
        }
      )
    ] });
  }
);
export {
  I as default
};