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

React component library

import { jsx as i, jsxs as l } from "react/jsx-runtime";
import { forwardRef as p } from "react";
import { n as m } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { t as v, m as y, l as b } from "./utils-DtRLzzTZ.js";
import k from "./Icon.js";
import { u as $ } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { M as N } from "./consts-C1uHV4xc.js";
const C = m.div`
  display: flex;
  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%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    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;
    transition: var(--transition, all 0.2s ease);

    & .wrapper__title {
      transition: var(--transition, all 0.2s ease);
      color: var(--gray-950, #14161a);
      font-size: 1rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.5rem;
      ${v(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;
      ${v(2)}
    }
  }

  &:hover {
    cursor: pointer;

    & .wrapper__content {
      & .wrapper__title {
        color: var(--primary-500, #e87722);
      }
    }
  }
`, I = m.div`
  width: 100%;
  height: 11.625rem;
  border-radius: 0.75rem;
  background: ${y("-90deg")};
`, W = m.div`
  display: flex;
  padding: 0 0.5rem 0 0;
  align-items: center;
  justify-content: center;
  background: var(--neutral-9504, rgba(20, 22, 26, 0.04));
  border-radius: 999px;

  &:hover {
    cursor: pointer;
  }

  & .wrapper__icon {
    font-size: 1.75rem;
    color: var(--gray-950, #14161a);
    border-radius: 999px;
    width: 2.75rem;
    height: 2.75rem;

    & 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(--yellow-600, #d97706);

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

    & .wrapper__text {
      color: var(--white, #fff);
    }
  }
`, F = m.div`
  width: 7rem;
  height: 3rem;
  border-radius: 999px;
  background: ${y("-90deg")};
`, j = p(({}, r) => /* @__PURE__ */ i(F, {})), z = p(
  ({ text: r, isActive: n, icon: t, onSelectCard: s = () => {
  } }, d) => /* @__PURE__ */ l(W, { className: n ? "active" : "", onClick: s, children: [
    /* @__PURE__ */ i(k, { icon: t, className: "wrapper__icon" }),
    /* @__PURE__ */ i("div", { className: "wrapper__text", children: r })
  ] })
), O = p(
  ({ image: r, imageComponent: n, title: t, description: s, onSelectCard: d = () => {
  } }, g) => {
    const { theme: f } = $();
    return /* @__PURE__ */ l(C, { theme: f, onClick: d, children: [
      b(n) ? n : /* @__PURE__ */ i("img", { src: r, className: "wrapper__image" }),
      /* @__PURE__ */ l("div", { className: "wrapper__content", children: [
        t && /* @__PURE__ */ i("div", { className: "wrapper__title", children: t }),
        s && /* @__PURE__ */ i("div", { className: "wrapper__description", children: s })
      ] })
    ] });
  }
), T = p(({}, r) => /* @__PURE__ */ i(I, {})), M = m.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: flex;
    justify-items: 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))`};
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
  }

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

      -webkit-overflow-scrolling: touch;
      ::-webkit-scrollbar {
        -webkit-appearance: none;
      }
      -ms-overflow-style: none;
      /* Internet Explorer 10+ */
      scrollbar-width: none;
      /* Firefox */

      &::-webkit-scrollbar {
        display: none;
        /* Safari and Chrome */
      }
    }

    & .wrapper__cards {
      grid-template-columns: ${(r) => `repeat(${r == null ? void 0 : r.limitCardsForMobile}, minmax(0, 1fr))`};
      gap: 1rem;
    }
  }
`, X = p(
  ({
    title: r,
    subtitle: n,
    tags: t = [],
    limitTags: s = 7,
    limitTagsForMobile: d = 7,
    limit: g = 3,
    limitForMobile: f = 2,
    items: a = [],
    onSelectTag: c = () => {
    },
    onSelectCard: h = () => {
    }
  }, A) => {
    var u, x;
    const _ = (e) => {
      c == null || c(e == null ? void 0 : e.uuid);
    }, w = (e) => {
      h == null || h(e == null ? void 0 : e.uuid);
    };
    return /* @__PURE__ */ l(
      M,
      {
        limitTags: s,
        limitTagsForMobile: d,
        limitCards: g,
        limitCardsForMobile: f,
        children: [
          /* @__PURE__ */ l("div", { className: "wrapper__heading", children: [
            r && /* @__PURE__ */ i("div", { className: "wrapper__title", children: r }),
            n && /* @__PURE__ */ i("div", { className: "wrapper__subtitle", children: n })
          ] }),
          /* @__PURE__ */ i("div", { className: "wrapper__tags", children: t && (t == null ? void 0 : t.length) > 0 ? t == null ? void 0 : t.map((e, o) => /* @__PURE__ */ i(
            z,
            {
              icon: e == null ? void 0 : e.icon,
              text: e == null ? void 0 : e.text,
              onSelectCard: () => _ == null ? void 0 : _(e)
            },
            `field-of-interests-with-tags-card-tag__${o + 1}`
          )) : (u = Array.from("123")) == null ? void 0 : u.map((e, o) => /* @__PURE__ */ i(
            j,
            {},
            `field-of-interests-with-tags-card-tag-skeleton__${o + 1}`
          )) }),
          /* @__PURE__ */ i("div", { className: "wrapper__cards", children: a && (a == null ? void 0 : a.length) > 0 ? a == null ? void 0 : a.map((e, o) => /* @__PURE__ */ i(
            O,
            {
              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)
            },
            `field-of-interests-with-tags-card__${o + 1}`
          )) : (x = Array.from("123")) == null ? void 0 : x.map((e, o) => /* @__PURE__ */ i(
            T,
            {},
            `field-of-interests-with-tags-card-skeleton__${o + 1}`
          )) })
        ]
      }
    );
  }
);
export {
  X as default
};