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

React component library

import { jsx as i, jsxs as m } from "react/jsx-runtime";
import { forwardRef as l } from "react";
import { n as p } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as d } from "./consts-C1uHV4xc.js";
import { t as k, m as b, l as $ } from "./utils-DtRLzzTZ.js";
import C from "./Icon.js";
import { u as N } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const W = p.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);

  &:hover {
    cursor: pointer;
  }

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

  & .wrapper__image {
    width: 100%;
    object-fit: cover;
    height: auto;
    max-height: 19.5rem;
    border-radius: 0.75rem 0.75rem 0 0;
  }

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

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

  &:hover {
    cursor: pointer;

    & .wrapper__content {
      & .wrapper__title {
        color: var(--primary-500, #e87722);
      }
    }
  }

  @media (max-width: ${d + "px"}) {
    background: transparent;
    border: none;
    box-shadow: none;
    gap: 0.75rem;

    & .wrapper__image {
      border-radius: 999px;
      aspect-ratio: 1 / 1;
    }

    & .wrapper__content {
      align-items: center;
      padding: 0;
      text-align: center;

      & .wrapper__title {
        font-size: 0.875rem;
        line-height: 1.25rem;
      }
    }
  }
`, j = p.div`
  width: 100%;
  height: 11.625rem;
  border-radius: 0.75rem;
  background: ${b("-90deg")};

  @media (max-width: ${d + "px"}) {
    width: 5rem;
    height: 5rem;
    border-radius: 999px;
  }
`, G = p.div`
  display: flex;
  padding: 0 0.5rem 0 0;
  align-items: center;
  justify-content: center;
  background: var(--white, #fff);
  border: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
  border-radius: 999px;
  height: 2.5rem;

  &:hover {
    cursor: pointer;
  }

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

    & i {
      width: auto;
    }
  }

  & .wrapper__text {
    color: var(--gray-950, #14161a);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: -0.09px;
  }

  @media (max-width: ${d + "px"}) {
    & .wrapper__text {
      white-space: nowrap;
    }
  }
`, z = p.div`
  width: 7rem;
  height: 3rem;
  border-radius: 999px;
  background: ${b("-90deg")};
`, T = l(({}, r) => /* @__PURE__ */ i(z, {})), I = l(
  ({ text: r, icon: a, onSelectCard: t = () => {
  } }, s) => /* @__PURE__ */ m(G, { onClick: t, children: [
    /* @__PURE__ */ i(C, { icon: ` ${a}`, className: "wrapper__icon" }),
    /* @__PURE__ */ i("div", { className: "wrapper__text", children: r })
  ] })
), M = l(
  ({ image: r, imageComponent: a, title: t, onSelectCard: s = () => {
  } }, g) => {
    const { theme: c } = N();
    return /* @__PURE__ */ m(W, { theme: c, onClick: s, children: [
      $(a) ? a : /* @__PURE__ */ i("img", { src: r, className: "wrapper__image" }),
      /* @__PURE__ */ i("div", { className: "wrapper__content", children: /* @__PURE__ */ i("div", { className: "wrapper__title", children: t }) })
    ] });
  }
), A = l(({}, r) => /* @__PURE__ */ i(j, {})), E = 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: flex;
    flex-wrap: wrap;
    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))`};
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
  }

  @media (max-width: ${d + "px"}) {
    & .wrapper__tags {
      display: flex;
      flex-wrap: nowrap;
      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 = l(
  ({
    title: r,
    subtitle: a,
    tags: t = [],
    limitTags: s = 7,
    limitTagsForMobile: g = 2,
    limit: c = 3,
    limitForMobile: v = 3,
    items: n = [],
    onSelectTag: h = () => {
    },
    onSelectCard: w = () => {
    }
  }, y) => {
    var x, u;
    const f = (e) => {
      h == null || h(e == null ? void 0 : e.uuid);
    }, _ = (e) => {
      w == null || w(e == null ? void 0 : e.uuid);
    };
    return /* @__PURE__ */ m(
      E,
      {
        ref: y,
        limitTags: s,
        limitTagsForMobile: g,
        limitCards: c,
        limitCardsForMobile: v,
        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("div", { className: "wrapper__cards", children: n && (n == null ? void 0 : n.length) > 0 ? n == null ? void 0 : n.map((e, o) => /* @__PURE__ */ i(
            M,
            {
              image: e == null ? void 0 : e.image,
              imageComponent: e == null ? void 0 : e.imageComponent,
              title: e == null ? void 0 : e.title,
              onSelectCard: () => _ == null ? void 0 : _(e == null ? void 0 : e.uuid)
            },
            `general-with-tags-card__${o + 1}`
          )) : (x = Array.from("123")) == null ? void 0 : x.map((e, o) => /* @__PURE__ */ i(
            A,
            {},
            `general-with-tags-card-skeleton__${o + 1}`
          )) }),
          /* @__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(
            I,
            {
              icon: e == null ? void 0 : e.icon,
              text: e == null ? void 0 : e.text,
              onSelectCard: () => f == null ? void 0 : f(e)
            },
            `general-with-tags-card-tag__${o + 1}`
          )) : (u = Array.from("123")) == null ? void 0 : u.map((e, o) => /* @__PURE__ */ i(
            T,
            {},
            `general-with-tags-card-tag-skeleton__${o + 1}`
          )) })
        ]
      }
    );
  }
);
export {
  X as default
};