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

React component library

import { jsxs as c, jsx as a } from "react/jsx-runtime";
import { forwardRef as h } from "react";
import b from "./Icon.js";
import { s as w } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d } from "./breakpoints-BubDitvo.js";
import { n as v, l as $, m as N } from "./utils-BUdHa0nB.js";
import { u as C } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { a as k, S as W } from "./index-BpsiCti3.js";
const j = w.a`
  text-decoration: none;
  color: var(--gray-950);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  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%;
    max-width: 18rem;
    object-fit: cover;
    height: auto;
    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;
      ${v(2)}
      transition: var(--transition, all 0.2s ease);
    }
  }
  cursor: pointer;

  @media ${d("S")} {
    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;
      }
    }
  }
`, z = w.a`
  text-decoration: none;
  color: var(--gray-950);
  display: flex;
  padding: 0 0.75rem 0 0.75rem;
  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;
    background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
  }

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

    & i {
      width: auto;

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

  & .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 ${d("S")} {
    & .wrapper__text {
      white-space: nowrap;
    }
  }
`, T = h(
  ({ title: r, icon: t, onSelectCard: i = () => {
  }, selectAction: s, LinkComponent: n }, o) => /* @__PURE__ */ c(
    z,
    {
      ref: o,
      onClick: i,
      as: n || "a",
      ...n ? {
        to: `/${s}`
      } : {
        href: `/${s}`
      },
      children: [
        $(t) && /* @__PURE__ */ a(b, { icon: t, className: "wrapper__icon" }),
        /* @__PURE__ */ a("div", { className: "wrapper__text", children: r })
      ]
    }
  )
), F = h(
  // eslint-disable-next-line react/prop-types
  ({
    imageUrl: r,
    imageComponent: t,
    title: i,
    onSelectCard: s = () => {
    },
    selectAction: n,
    LinkComponent: o
  }, p) => {
    const { theme: l } = C();
    return /* @__PURE__ */ c(
      j,
      {
        ref: p,
        theme: l,
        onClick: s,
        as: o || "a",
        ...o ? {
          to: `/${n}`
        } : {
          href: `/${n}`
        },
        children: [
          N(t) ? t : /* @__PURE__ */ a("img", { src: r, className: "wrapper__image" }),
          /* @__PURE__ */ a("div", { className: "wrapper__content", children: /* @__PURE__ */ a("div", { className: "wrapper__title", children: i }) })
        ]
      }
    );
  }
), I = w.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;
  }

  @media ${d("M")} {
    & .wrapper__cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media ${d("S")} {
    & .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;
    }
  }
`, R = h(
  ({
    title: r,
    subtitle: t,
    options: i = [],
    limitTags: s = 7,
    limitTagsForMobile: n = 2,
    limit: o = 3,
    limitForMobile: p = 3,
    items: l = [],
    onSelectTag: m = () => {
    },
    onSelectCard: g = () => {
    },
    isLoadingTags: x = !1,
    isLoadingCards: u = !1,
    LinkComponent: _
  }, y) => /* @__PURE__ */ c(
    I,
    {
      ref: y,
      limitTags: s,
      limitTagsForMobile: n,
      limitCards: o,
      limitCardsForMobile: p,
      className: "lp-section lp-general-section lp-general-with-tags-cards-section",
      children: [
        /* @__PURE__ */ c("div", { className: "wrapper__heading", children: [
          r && /* @__PURE__ */ a("div", { className: "wrapper__title", children: r }),
          t && /* @__PURE__ */ a("div", { className: "wrapper__subtitle", children: t })
        ] }),
        /* @__PURE__ */ a(
          k,
          {
            isLoading: u,
            keyPrefix: "general-with-tags-cards-card",
            children: /* @__PURE__ */ a("div", { className: "wrapper__cards", children: l == null ? void 0 : l.map((e, f) => /* @__PURE__ */ a(
              F,
              {
                imageUrl: e == null ? void 0 : e.imageUrl,
                imageComponent: e == null ? void 0 : e.imageComponent,
                title: e == null ? void 0 : e.title,
                selectAction: e == null ? void 0 : e.selectAction,
                onSelectCard: () => {
                  g == null || g(e);
                },
                LinkComponent: _
              },
              `general-with-tags-card__${f + 1}`
            )) })
          }
        ),
        /* @__PURE__ */ a(
          W,
          {
            isLoading: x,
            keyPrefix: "general-with-tags-cards-tag",
            children: /* @__PURE__ */ a("div", { className: "wrapper__tags", children: i == null ? void 0 : i.map((e, f) => /* @__PURE__ */ a(
              T,
              {
                icon: e == null ? void 0 : e.icon,
                title: e == null ? void 0 : e.title,
                onSelectCard: () => m == null ? void 0 : m(e),
                selectAction: e == null ? void 0 : e.selectAction,
                LinkComponent: _
              },
              `general-with-tags-card-tag__${f + 1}`
            )) })
          }
        )
      ]
    }
  )
);
export {
  R as default
};