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

React component library

import { jsxs as o, jsx as r } from "react/jsx-runtime";
import { forwardRef as _, useState as x } from "react";
import u from "./Icon.js";
import v from "./Popover.js";
import y from "./PopoverTrigger.js";
import w from "./PopoverContent.js";
import { u as b } from "./useDetectMobile-B0Jog4jQ.js";
import { s as l } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as N } from "./breakpoints-BubDitvo.js";
import { t as P, n as $ } from "./utils-BUdHa0nB.js";
const z = l.div`
  display: flex;
  flex-direction: column;
  gap: 3rem;
  border-radius: 1.25rem;
  padding: 2rem;
  background: #f4f6fb;

  & .section__text {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    & .section__title {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      gap: 1rem;

      & span {
        font-weight: 600;
        font-size: 1.5rem;
        leading-trim: none;
        line-height: 2rem;
        letter-spacing: 0%;
        text-align: center;
        color: var(--gray-900, #0c1520);
        ${P()}
      }

      &::after {
        content: "";
        flex: 1;
        height: 0.0625rem;
        background-color: var(--gray-200, #e4e9f0);
      }

      &::before {
        content: "";
        flex: 1;
        height: 0.0625rem;
        background-color: var(--gray-200, #e4e9f0);
      }
    }

    & .section__description {
      font-weight: 400;
      font-size: 0.875rem;
      leading-trim: none;
      line-height: 1.25rem;
      letter-spacing: 0.0156rem;
      text-align: center;
      color: var(--gray-700, #424b56);
      ${$(2)}
    }
  }

  & .section__items {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;

    & .section__item {
      width: 100%;
      height: 100%;
      max-width: 16.25rem;
      max-height: 7.5rem;
      border-radius: 0.5rem;
      border: 1px solid var(--gray-200, #e4e9f0);
      overflow: hidden;

      & img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        filter: grayscale(100%);
        transition: filter 0.3s ease;

        &:hover {
          filter: grayscale(0%);
        }
      }

      &:hover {
        cursor: pointer;
      }
    }
  }

  @media ${N("S")} {
    padding: 1rem;

    & .section__text {
      & .section__title {
        font-size: 1.25rem;
        line-height: 1.75rem;
      }
    }

    & .section__items {
      display: grid;
      grid-template-columns: ${() => "repeat(2, minmax(0, 1fr))"};
      justify-items: center;
      gap: 1rem;

      & .section__trigger {
        width: 100% !important;
      }

      & .section__item {
        max-width: 100%;
        max-height: 5rem;
      }
    }
  }
`, C = l.div`
  width: 100%;
  height: 100%;
  max-width: 16.25rem;
  max-height: 12.5rem;
  border-radius: 0.75rem;
  padding: 1.25rem;
  background: var(--gray-200, #e4e9f0);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);

  font-weight: 400;
  font-size: 0.75rem;
  leading-trim: none;
  line-height: 1rem;
  letter-spacing: 0.025rem;
  color: var(--gray-900, #0c1520);
`, E = _(
  ({
    icon: i,
    title: a,
    description: c,
    items: n,
    onSelectCard: d = () => {
    },
    onTapCard: g = () => {
    }
  }) => {
    const m = b(), [p, s] = x(null), h = (e) => {
      s(e);
    }, f = () => {
      s(null);
    };
    return /* @__PURE__ */ o(z, { className: "lp-section lp-partner-cards-section", children: [
      /* @__PURE__ */ o("div", { className: "section__text", children: [
        i && /* @__PURE__ */ r(
          u,
          {
            icon: i,
            sizeInUnits: "2.5rem",
            color: "warning",
            className: "section__icon"
          }
        ),
        a && /* @__PURE__ */ r("div", { className: "section__title", children: /* @__PURE__ */ r("span", { children: a }) }),
        c && /* @__PURE__ */ r("div", { className: "section__description", children: c })
      ] }),
      n && (n == null ? void 0 : n.length) > 0 && /* @__PURE__ */ r("div", { className: "section__items", children: m ? n == null ? void 0 : n.map((e, t) => /* @__PURE__ */ r(
        "div",
        {
          className: "section__item",
          onClick: () => g(e),
          children: /* @__PURE__ */ r(
            "img",
            {
              src: e == null ? void 0 : e.imageUrl,
              alt: `Partner card image ${t + 1}`,
              loading: "lazy"
            }
          )
        },
        `partner-cards-section-item__${t + 1}`
      )) : n == null ? void 0 : n.map((e, t) => /* @__PURE__ */ o(
        v,
        {
          open: t === p,
          placement: "top-end",
          offsetValue: 4,
          children: [
            /* @__PURE__ */ r(y, { className: "section__trigger", children: /* @__PURE__ */ r(
              "div",
              {
                className: "section__item",
                onMouseEnter: () => h(t),
                onMouseLeave: f,
                onClick: () => d(e),
                children: /* @__PURE__ */ r(
                  "img",
                  {
                    src: e == null ? void 0 : e.imageUrl,
                    alt: `Partner card image ${t + 1}`,
                    loading: "lazy"
                  }
                )
              }
            ) }),
            /* @__PURE__ */ r(w, { style: { padding: 0, borderRadius: 12 }, children: /* @__PURE__ */ r(C, { children: e == null ? void 0 : e.description }) })
          ]
        },
        `partner-cards-section-item__${t + 1}`
      )) })
    ] });
  }
);
export {
  E as default
};