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

React component library

import { jsxs as d, jsx as r, Fragment as E } from "react/jsx-runtime";
import { forwardRef as k, Suspense as F, useLayoutEffect as O } from "react";
import { t as L, n as S, m as R, l as T } from "./utils-BUdHa0nB.js";
import q from "./Icon.js";
import { s as y } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as _ } from "./breakpoints-BubDitvo.js";
import { u as A } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { S as j, e as W, f as D, a as H } from "./style-NhzYtIA7.js";
const B = y.a`
  text-decoration: none;
  color: var(--gray-950);
  display: flex;
  width: 100%;
  height: fit-content;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 0.75rem;
  border: 1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08));
  background: var(--white, #fff);

  &:hover {
    cursor: pointer;
  }

  /* drop-shadow-sm */
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);

  & .wrapper__image {
    width: 100%;
    height: auto;
    border-radius: 0.75rem 0.75rem 0 0;
  }

  & .wrapper__content {
    display: flex;
    padding: 0.75rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    align-self: stretch;

    & .wrapper__title {
      color: var(--gray-950, #14161a);
      font-size: 1rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.5rem;
      ${S(2)}
    }

    & .wrapper__description {
      color: var(--gray-600, #676e79);
      font-size: 0.75rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1rem;
      letter-spacing: 0.025rem;
      ${S(2)}
    }
  }

  @media ${_("S")} {
    & .wrapper__content {
      & .wrapper__title {
        font-size: 0.875rem;
        line-height: 1.25rem;
      }

      & .wrapper__description {
        display: none;
      }
    }
  }
`, P = y.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  min-width: 8rem;

  &:hover {
    cursor: pointer;
  }

  & .wrapper__icon {
    display: flex;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.5rem;
    align-items: center;
    font-size: 1.75rem;
    color: var(--gray-950, #14161a);
    background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
    border-radius: 999px;

    &:hover {
      background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
    }

    & i {
      width: auto;
    }
  }

  & .wrapper__text {
    color: var(--gray-950, #14161a);
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
    max-width: 16rem;
    ${L()}
  }

  &.active {
    & .wrapper__icon {
      background: var(--gray-950, #14161a);
      color: var(--white, #fff);
    }
  }

  @media ${_("S")} {
    max-width: unset;
    min-width: unset;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
    padding: 0 0.75rem;

    &.active {
      background: var(--gray-950, #14161a);
      & .wrapper__icon {
        background: transparent;
      }

      & .wrapper__text {
        color: var(--white, #fff);
      }
    }

    & .wrapper__icon {
      display: flex;
      width: 1.25rem;
      width: 1.25rem;
      padding: 0;
      align-items: center;
      font-size: 1.25rem;
      color: var(--gray-950, #14161a);
      background: transparent;
      border-radius: 0;
    }

    & .wrapper__text {
      font-size: 0.875rem;
      line-height: 1.25rem;
      white-space: nowrap;
      max-width: unset;
    }
  }
`, G = k(
  ({ text: t, isActive: a = !1, icon: i, onSelectCard: o = () => {
  } }, c) => /* @__PURE__ */ d(
    P,
    {
      ref: c,
      className: a ? "active" : "",
      onClick: o,
      children: [
        /* @__PURE__ */ r(q, { icon: i, className: "wrapper__icon" }),
        /* @__PURE__ */ r("div", { className: "wrapper__text", children: t })
      ]
    }
  )
), J = k(
  ({
    image: t,
    imageComponent: a,
    title: i,
    description: o,
    className: c,
    onSelectCard: v = () => {
    },
    link: w,
    LinkComponent: g
  }, b) => {
    const f = g || "a", { theme: h } = A();
    return /* @__PURE__ */ d(
      B,
      {
        ref: b,
        theme: h,
        className: c,
        onClick: v,
        as: f,
        ...g ? { to: `/${w}` } : { href: `/${w}` },
        children: [
          R(a) ? a : /* @__PURE__ */ r("img", { src: t, className: "wrapper__image" }),
          /* @__PURE__ */ d("div", { className: "wrapper__content", children: [
            i && /* @__PURE__ */ r("div", { className: "wrapper__title", children: i }),
            o && /* @__PURE__ */ r("div", { className: "wrapper__description", children: o })
          ] })
        ]
      }
    );
  }
), K = y.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;

  & .wrapper__heading {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;

    & .wrapper__title {
      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;
    }

    & .wrapper__subtitle {
      color: var(---gray-600, #676e79);
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1.25rem;
      letter-spacing: 0.25px;
    }
  }

  & .wrapper__tags__external {
    width: 100%;
  }

  & .wrapper__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    gap: 2rem;
  }

  & .wrapper__cards {
    display: grid;
    grid-template-columns: ${(t) => `repeat(${t == null ? void 0 : t.limitCards}, minmax(12.5rem, 1fr))`};
    grid-auto-rows: 0.625rem;
    gap: 0.625rem;
    width: 100%;
    position: relative;

    & .wrapper__card {
      overflow: hidden;
    }
  }

  @media ${_("M")} {
    & .wrapper__tags {
      gap: 0.75rem;
    }

    & .wrapper__cards {
      grid-template-columns: repeat(2, minmax(12.5rem, 1fr));
    }
  }

  @media ${_("S")} {
    gap: 1rem;

    & .wrapper__cards {
      grid-template-columns: ${(t) => `repeat(${t == null ? void 0 : t.limitCardsForMobile}, minmax(0, 1fr))`};
    }
  }
`, Q = y(j)`
  &.skeleton__tags {
    max-width: 50rem;
  }

  @media ${_("S")} {
    &.skeleton__tags {
      overflow-x: hidden;
    }
  }
`, U = ({ keyPrefix: t }) => /* @__PURE__ */ r(Q, { className: "skeleton__tags", children: [1, 2, 3, 4, 5].map((a) => /* @__PURE__ */ d(
  W,
  {
    alignItems: "center",
    gap: "0.5rem",
    children: [
      /* @__PURE__ */ r(D, { size: "2.75rem" }),
      /* @__PURE__ */ r(H, { height: "1.5rem", width: "8rem" })
    ]
  },
  `${t}-tag-${a}`
)) }), V = ({
  keyPrefix: t,
  isLoading: a = !1,
  fallbackComponent: i = /* @__PURE__ */ r(E, {}),
  children: o
}) => /* @__PURE__ */ r(F, { fallbackComponent: i, children: a === !0 ? /* @__PURE__ */ r(U, { keyPrefix: t }) : o }), ae = k(
  ({
    title: t,
    subtitle: a,
    tags: i = [],
    items: o = [],
    limitTags: c = 5,
    limitTagsForMobile: v = 5,
    limit: w = 3,
    limitForMobile: g = 2,
    selectedTag: b,
    onSelectTag: f = () => {
    },
    onSelectCard: h = () => {
    },
    className: m,
    isLoadingTags: z = !1,
    // isLoadingCards = false,
    LinkComponent: C
  }, N) => (O(() => {
    if (!T(m))
      return;
    const e = () => {
      const p = document == null ? void 0 : document.querySelector(`.${m} .wrapper__cards`), s = p == null ? void 0 : p.querySelectorAll(".wrapper__card");
      s == null || s.forEach((x) => {
        const M = x.getBoundingClientRect().height, I = Math.ceil((M + 10) / 20);
        x.style.gridRowEnd = `span ${I}`;
      });
      const $ = s == null ? void 0 : s[(s == null ? void 0 : s.length) - 1];
      if ($) {
        const x = $.offsetTop + $.offsetHeight;
        p.style.height = `${x}px`;
      }
    }, l = document == null ? void 0 : document.querySelector(`.${m} .wrapper__cards`), n = l == null ? void 0 : l.querySelectorAll(".wrapper__image");
    let u = 0;
    return (n == null ? void 0 : n.length) === 0 ? e() : (n == null || n.forEach((p) => {
      p.complete ? u++ : p.addEventListener("load", () => {
        u++, u === (n == null ? void 0 : n.length) && e();
      });
    }), u === (n == null ? void 0 : n.length) && e()), window.addEventListener("resize", e), () => {
      window.removeEventListener("resize", e);
    };
  }, [m, o]), /* @__PURE__ */ d(
    K,
    {
      ref: N,
      limitTags: c,
      limitTagsForMobile: v,
      limitCards: w,
      limitCardsForMobile: g,
      className: `lp-section lp-field-of-interests-masonry-section${m ? ` ${m}` : ""}`,
      numberOfTags: i == null ? void 0 : i.length,
      children: [
        /* @__PURE__ */ d("div", { className: "wrapper__heading", children: [
          t && /* @__PURE__ */ r("div", { className: "wrapper__title", children: t }),
          a && /* @__PURE__ */ r("div", { className: "wrapper__subtitle", children: a })
        ] }),
        /* @__PURE__ */ r(
          V,
          {
            isLoading: z,
            keyPrefix: "field-of-interests-masonry-tag",
            children: /* @__PURE__ */ r("div", { className: "wrapper__tags__external", children: /* @__PURE__ */ r("div", { className: "wrapper__tags", children: i == null ? void 0 : i.map((e, l) => /* @__PURE__ */ r(
              G,
              {
                icon: e == null ? void 0 : e.icon,
                text: e == null ? void 0 : e.title,
                isActive: (e == null ? void 0 : e.code) === b,
                onSelectCard: () => f == null ? void 0 : f(e)
              },
              `field-of-interests-masonry-tag__${l + 1}`
            )) }) })
          }
        ),
        /* @__PURE__ */ r("div", { className: "wrapper__cards", children: o == null ? void 0 : o.map((e, l) => /* @__PURE__ */ r(
          J,
          {
            image: e == null ? void 0 : e.image,
            imageComponent: e == null ? void 0 : e.imageComponent,
            title: e == null ? void 0 : e.title,
            description: e == null ? void 0 : e.description,
            onSelectCard: () => h == null ? void 0 : h(e),
            className: "wrapper__card",
            link: e == null ? void 0 : e.link,
            LinkComponent: C
          },
          `field-of-interests-with-tags-card__${l + 1}`
        )) })
      ]
    }
  ))
);
export {
  ae as default
};