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

React component library

import { jsx as i, jsxs as s } from "react/jsx-runtime";
import { forwardRef as l } from "react";
import { n as p } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as g } from "./consts-C1uHV4xc.js";
import { t as b, m as $, l as M } from "./utils-DtRLzzTZ.js";
import I from "./Icon.js";
import { u as C } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { u as E } from "./useEffectOnce-guOKBPuL.js";
const F = p.div`
  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(--Lanaco-Gray-white, #fff);

  /* 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;
      ${b(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;
      ${b(2)}
    }
  }
`, O = p.div`
  width: 100%;
  height: 11.625rem;
  border-radius: 0.75rem;
  background: ${$("-90deg")};
`, W = p.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;

  & .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-9504, rgba(20, 22, 26, 0.04));
    border-radius: 999px;

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

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

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

  @media (max-width: ${g + "px"}) {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    width: 100%;
    background: var(--neutral-9504, rgba(20, 22, 26, 0.04));
    padding: 0 0.75rem;

    & .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;
    }
  }
`, j = p.div`
  width: 7.5rem;
  width: 7.5rem;
  border-radius: 999px;
  background: ${$("-90deg")};

  @media (max-width: ${g + "px"}) {
    width: 7.5rem;
    height: 2.5rem;
  }
`, A = l(({}, r) => /* @__PURE__ */ i(j, {})), L = l(
  ({ text: r, isActive: o, icon: t, onSelectCard: a = () => {
  } }, m) => /* @__PURE__ */ s(W, { className: o ? "active" : "", onClick: a, children: [
    /* @__PURE__ */ i(I, { icon: t, className: "wrapper__icon" }),
    /* @__PURE__ */ i("div", { className: "wrapper__text", children: r })
  ] })
), R = l(
  ({
    image: r,
    imageComponent: o,
    title: t,
    description: a,
    className: m,
    onSelectCard: d = () => {
    }
  }, u) => {
    const { theme: c } = C();
    return /* @__PURE__ */ s(F, { theme: c, className: m, onClick: d, children: [
      M(o) ? o : /* @__PURE__ */ i("img", { src: r, className: "wrapper__image" }),
      /* @__PURE__ */ s("div", { className: "wrapper__content", children: [
        t && /* @__PURE__ */ i("div", { className: "wrapper__title", children: t }),
        a && /* @__PURE__ */ i("div", { className: "wrapper__description", children: a })
      ] })
    ] });
  }
), T = l(({}, r) => /* @__PURE__ */ s(O, { children: [
  /* @__PURE__ */ i("div", { className: "wrapper__image" }),
  /* @__PURE__ */ s("div", { className: "wrapper__content", children: [
    /* @__PURE__ */ i("div", { className: "wrapper__title" }),
    /* @__PURE__ */ i("div", { className: "wrapper__description" })
  ] })
] })), q = p.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 {
    display: grid;
    grid-template-columns: ${(r) => `repeat(${r == null ? void 0 : r.limitTags}, minmax(0, 1fr))`};
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
  }

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

    & .wrapper__card {
      overflow: hidden;
    }
  }

  @media (max-width: ${g + "px"}) {
    & .wrapper__tags {
      display: flex;
      overflow-x: scroll;
      justify-content: flex-start;
      width: 100%;
    }

    & .wrapper__cards {
      grid-template-columns: ${(r) => `repeat(${r == null ? void 0 : r.limitCardsForMobile}, minmax(0, 1fr))`};
    }
  }
`, K = l(
  ({
    title: r,
    subtitle: o,
    tags: t = [],
    items: a = [],
    limitTags: m = 5,
    limitTagsForMobile: d = 5,
    limit: u = 3,
    limitForMobile: c = 2,
    onSelectTag: f = () => {
    },
    onSelectCard: _ = () => {
    }
  }, N) => {
    var x, y;
    const h = (e) => {
      f == null || f(e == null ? void 0 : e.uuid);
    }, w = (e) => {
      _ == null || _(e == null ? void 0 : e.uuid);
    };
    return E(() => {
      const e = () => {
        document.querySelector(".wrapper__cards").querySelectorAll(".wrapper__card").forEach((v) => {
          const k = v.getBoundingClientRect().height, z = Math.ceil((k + 10) / 20);
          v.style.gridRowEnd = `span ${z}`;
        });
      };
      return e(), window.addEventListener("resize", e), () => {
        window.removeEventListener("resize", e);
      };
    }), /* @__PURE__ */ s(
      q,
      {
        ref: N,
        limitTags: m,
        limitTagsForMobile: d,
        limitCards: u,
        limitCardsForMobile: c,
        children: [
          /* @__PURE__ */ s("div", { className: "wrapper__heading", children: [
            r && /* @__PURE__ */ i("div", { className: "wrapper__title", children: r }),
            o && /* @__PURE__ */ i("div", { className: "wrapper__subtitle", children: o })
          ] }),
          /* @__PURE__ */ i("div", { className: "wrapper__tags", children: t && (t == null ? void 0 : t.length) > 0 ? t == null ? void 0 : t.map((e, n) => /* @__PURE__ */ i(
            L,
            {
              icon: e == null ? void 0 : e.icon,
              text: e == null ? void 0 : e.text,
              onSelectCard: () => h == null ? void 0 : h(e)
            },
            `field-of-interests-masonry-tag__${n + 1}`
          )) : (x = Array.from("12345")) == null ? void 0 : x.map((e, n) => /* @__PURE__ */ i(
            A,
            {},
            `field-of-interests-masonry-tag-skeleton__${n + 1}`
          )) }),
          /* @__PURE__ */ i("div", { className: "wrapper__cards", children: a && (a == null ? void 0 : a.length) > 0 ? a == null ? void 0 : a.map((e, n) => /* @__PURE__ */ i(
            R,
            {
              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: () => w == null ? void 0 : w(e == null ? void 0 : e.uuid),
              className: "wrapper__card"
            },
            `field-of-interests-with-tags-card__${n + 1}`
          )) : (y = Array.from("12345")) == null ? void 0 : y.map((e, n) => /* @__PURE__ */ i(
            T,
            {},
            `field-of-interests-with-tags-card-skeleton__${n + 1}`
          )) })
        ]
      }
    );
  }
);
export {
  K as default
};