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

React component library

import { jsxs as l, jsx as i } from "react/jsx-runtime";
import { forwardRef as g } from "react";
import { C as m } from "./index-BppfjY8h.js";
import f from "./Button.js";
import { u as _ } from "./useDetectMobile-B0Jog4jQ.js";
import { s as c } from "./breakpoints-BubDitvo.js";
import { S as b } from "./style-CP_urKvc.js";
import { s as u } from "./emotion-styled.browser.esm-DfbrHHed.js";
const v = u.div`
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

  & .section__slider {
    position: relative;
  }

  & .slider__gradient {
    position: absolute;
    width: 7.5rem;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
    top: 0;

    &.left {
      left: 0;
      background: linear-gradient(to left, transparent, white);
    }

    &.right {
      right: 0;
      background: linear-gradient(to right, transparent, white);
    }
  }

  .slider__container {
    width: 100%;
  }

  .slider__item {
    padding-right: 1rem;
  }

  & .section__item {
    width: 100%;
    height: 100%;
    max-height: 3.75rem;
    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;
    }
  }
`, z = g(
  ({
    title: n,
    buttonText: o,
    buttonLink: d,
    items: e,
    onSelectCard: p = () => {
    },
    onButtonAction: s = () => {
    }
  }, y) => {
    const h = _() ? 2 : 7, a = (e == null ? void 0 : e.length) > h;
    return /* @__PURE__ */ l(v, { className: "lp-section lp-partner-brands-section", children: [
      /* @__PURE__ */ l(b, { children: [
        n && /* @__PURE__ */ i("div", { className: "heading__title", children: n }),
        o && d && /* @__PURE__ */ i(
          f,
          {
            text: o,
            borderRadius: "curved",
            btnType: "tinted",
            className: "heading__action",
            color: "neutral",
            onClick: (r) => {
              var t;
              (t = r == null ? void 0 : r.target) == null || t.blur(), s == null || s(d);
            }
          }
        )
      ] }),
      e && (e == null ? void 0 : e.length) > 0 && /* @__PURE__ */ l("div", { className: "section__slider", children: [
        a && /* @__PURE__ */ i("div", { className: "slider__gradient left" }),
        /* @__PURE__ */ i(
          m,
          {
            responsive: {
              desktop: {
                breakpoint: {
                  max: 9999,
                  min: c.M.min
                },
                items: 7,
                slidesToSlide: 1,
                partialVisibilityGutter: 10
              },
              mobile: {
                breakpoint: {
                  max: c.S.max,
                  min: 0
                },
                items: 2,
                slidesToSlide: 1,
                partialVisibilityGutter: 20
              }
            },
            draggable: !1,
            swipeable: !1,
            arrows: !1,
            infinite: a,
            autoPlay: a,
            autoPlaySpeed: 2e3,
            partialVisible: a,
            customTransition: "transform 500ms linear",
            transitionDuration: 500,
            containerClass: "slider__container",
            itemClass: "slider__item",
            children: e == null ? void 0 : e.map((r, t) => /* @__PURE__ */ i(
              "div",
              {
                className: "section__item",
                onClick: () => p(r),
                children: /* @__PURE__ */ i(
                  "img",
                  {
                    src: r == null ? void 0 : r.imageUrl,
                    alt: `Partner brand image ${t + 1}`,
                    loading: "lazy"
                  }
                )
              },
              `partner-brands-section-item__${t + 1}`
            ))
          }
        ),
        a && /* @__PURE__ */ i("div", { className: "slider__gradient right" })
      ] })
    ] });
  }
);
export {
  z as default
};