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

React component library

import { jsxs as m, jsx as i } from "react/jsx-runtime";
import { forwardRef as x } from "react";
import { n as y, l as _, m as k } from "./utils-BUdHa0nB.js";
import C from "./Icon.js";
import { s as u } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as c } from "./breakpoints-BubDitvo.js";
import { u as I } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { S as W, a as j } from "./index-BpsiCti3.js";
const F = u.a`
  text-decoration: none;
  color: var(--gray-950);
  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: 100%;
    max-height: 10.375rem;
    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;
      ${y(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;
      ${y(2)}
    }
  }
  cursor: pointer;
`, z = u.div`
  display: flex;
  padding: 0 0.75rem 0 0.75rem;
  align-items: center;
  justify-content: center;
  background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
  border-radius: 999px;
  min-width: 2.75rem;
  min-height: 2.75rem;

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

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

    & i {
      width: auto;

      &::after {
        margin-left: 0;
      }
    }
  }

  & .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: ${(r) => (r == null ? void 0 : r.activeColor) || "var(--yellow-600, #d97706)"};

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

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

  @media ${c("S")} {
    min-width: fit-content;
  }
`, O = x(
  ({ name: r, isActive: a, activeColor: t, icon: n, onSelectCard: p = () => {
  } }, s) => /* @__PURE__ */ m(
    z,
    {
      ref: s,
      className: a ? "active" : "",
      activeColor: t,
      onClick: p,
      children: [
        _(n) && /* @__PURE__ */ i(C, { icon: n, className: "wrapper__icon" }),
        /* @__PURE__ */ i("div", { className: "wrapper__text", children: r })
      ]
    }
  )
), T = x(
  ({
    image: r,
    imageComponent: a,
    name: t,
    description: n,
    onSelectCard: p = () => {
    },
    uuid: s,
    nameSlug: o,
    LinkComponent: l
  }, f) => {
    const v = l || "a", { theme: d } = I();
    return /* @__PURE__ */ m(
      F,
      {
        ref: f,
        theme: d,
        onClick: p,
        as: v,
        ...l ? {
          to: `/product/${_(o) ? `${o}-` : ""}${s}`
        } : {
          href: `/product/${_(o) ? `${o}-` : ""}${s}`
        },
        children: [
          k(a) ? a : /* @__PURE__ */ i("img", { src: r, className: "wrapper__image" }),
          /* @__PURE__ */ m("div", { className: "wrapper__content", children: [
            t && /* @__PURE__ */ i("div", { className: "wrapper__title", children: t }),
            n && /* @__PURE__ */ i("div", { className: "wrapper__description", children: n })
          ] })
        ]
      }
    );
  }
), D = u.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 ${c("M")} {
    & .wrapper__cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

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

    & .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 */
      }
    }
  }

  @media ${c("XS")} {
    & .wrapper__cards {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
`, X = x(
  ({
    title: r,
    subtitle: a,
    tags: t = [],
    limitTags: n = 7,
    limitTagsForMobile: p = 7,
    limit: s = 3,
    limitForMobile: o = 2,
    items: l = [],
    isLoadingTags: f = !1,
    isLoadingCards: v = !1,
    selectedTag: d,
    activeColor: b,
    onSelectTag: h = () => {
    },
    onSelectCard: g = () => {
    },
    LinkComponent: $
  }, N) => /* @__PURE__ */ m(
    D,
    {
      ref: N,
      limitTags: n,
      limitTagsForMobile: p,
      limitCards: s,
      limitCardsForMobile: o,
      className: "lp-section lp-field-of-interests-with-tags-cards-section",
      children: [
        /* @__PURE__ */ m("div", { className: "wrapper__heading", children: [
          r && /* @__PURE__ */ i("div", { className: "wrapper__title", children: r }),
          a && /* @__PURE__ */ i("div", { className: "wrapper__subtitle", children: a })
        ] }),
        /* @__PURE__ */ i(
          W,
          {
            isLoading: f,
            keyPrefix: "field-of-interests-with-tags-tag",
            children: /* @__PURE__ */ i("div", { className: "wrapper__tags", children: t == null ? void 0 : t.map((e, w) => /* @__PURE__ */ i(
              O,
              {
                icon: e == null ? void 0 : e.icon,
                name: e == null ? void 0 : e.title,
                isActive: (e == null ? void 0 : e.code) === d,
                activeColor: b,
                onSelectCard: () => h == null ? void 0 : h(e)
              },
              `field-of-interests-with-tags-card-tag__${w + 1}`
            )) })
          }
        ),
        /* @__PURE__ */ i(
          j,
          {
            isLoading: f,
            keyPrefix: "field-of-interests-with-tags-card",
            children: /* @__PURE__ */ i("div", { className: "wrapper__cards", children: l == null ? void 0 : l.map((e, w) => /* @__PURE__ */ i(
              T,
              {
                image: e == null ? void 0 : e.image,
                imageComponent: e == null ? void 0 : e.imageComponent,
                name: e == null ? void 0 : e.title,
                description: e == null ? void 0 : e.description,
                onSelectCard: () => g == null ? void 0 : g(e),
                uuid: e == null ? void 0 : e.uuid,
                nameSlug: e == null ? void 0 : e.nameSlug,
                LinkComponent: $
              },
              `field-of-interests-with-tags-card__${w + 1}`
            )) })
          }
        )
      ]
    }
  )
);
export {
  X as default
};