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

React component library

import { jsx as e, Fragment as w, jsxs as h } from "react/jsx-runtime";
import { forwardRef as g, Suspense as f } from "react";
import { m as x } from "./utils-BUdHa0nB.js";
import { s as c } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as m } from "./breakpoints-BubDitvo.js";
import { S as u, a as $ } from "./style-NhzYtIA7.js";
const y = c.a`
  text-decoration: none;
  color: var(--gray-950);
  width: 7.5rem;
  height: auto;
  max-height: 7.5rem;

  &:hover {
    cursor: pointer;
  }

  & .wrapper__image {
    width: 7.5rem;
    height: auto;
  }

  @media ${m("S")} {
    width: 4.5rem;
    height: auto;
    max-height: 4.5rem;

    & .wrapper__image {
      width: 4.5rem;
      height: auto;
    }
  }
`, v = g(
  ({
    imageComponent: a,
    image: t,
    onSelectCard: n,
    urlPrefix: i,
    urlSufix: o,
    code: p,
    LinkComponent: s
  }, l) => /* @__PURE__ */ e(
    y,
    {
      ref: l,
      onClick: n,
      as: s || "a",
      ...s ? { to: `${i}${p}${o}` } : { href: `${i}${p}${o}` },
      children: x(a) ? a : /* @__PURE__ */ e("img", { src: t, className: "wrapper__image" })
    }
  )
), N = c.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;

  & img {
    border-radius: 0.75rem;
  }

  & .wrapper__heading {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    width: 100%;

    & .wrapper__title {
      color: var(--navy-900, #0c1520);
      text-align: center;
      font-size: 1.5rem;
      font-style: normal;
      font-weight: 600;
      line-height: 2rem;
      letter-spacing: -0.47px;
    }

    & .wrapper__subtitle {
      color: var(--navy-500, #7a8594);
      font-size: 1rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.5rem;
      letter-spacing: 0.25px;
    }
  }

  & .wrapper__content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    align-self: stretch;

    & .wrapper__item {
      max-width: 7.5rem;
    }
  }

  @media ${m("S")} {
    & .wrapper__content {
      align-content: center;
      gap: 1rem;
      flex-wrap: wrap;

      & .wrapper__item {
        max-width: 4.5rem;
      }
    }
  }
`, S = c(u)`
  @media ${m("S")} {
    gap: 1rem;
    flex-wrap: wrap;
  }
`, b = ({ keyPrefix: a }) => /* @__PURE__ */ e(S, { justifyContent: "center", alignItems: "center", gap: "3rem", children: [1, 2, 3, 4, 5].map((t) => /* @__PURE__ */ e($, { height: "4rem", width: "7.5rem" }, `${a}-${t}`)) }), k = ({
  keyPrefix: a,
  isLoading: t = !1,
  fallbackComponent: n = /* @__PURE__ */ e(w, {}),
  children: i
}) => /* @__PURE__ */ e(f, { fallbackComponent: n, children: t === !0 ? /* @__PURE__ */ e(b, { keyPrefix: a }) : i }), W = g(
  ({ title: a, subtitle: t, items: n = [], isLoading: i = !1, onSelectCard: o = () => {
  }, urlPrefix: p, urlSufix: s, LinkComponent: l }, d) => /* @__PURE__ */ h(N, { ref: d, className: "lp-section lp-brand-hits-section", children: [
    /* @__PURE__ */ h("div", { className: "wrapper__heading", children: [
      a && /* @__PURE__ */ e("div", { className: "wrapper__title", children: a }),
      t && /* @__PURE__ */ e("div", { className: "wrapper__subtitle", children: t })
    ] }),
    /* @__PURE__ */ e(
      k,
      {
        isLoading: i,
        keyPrefix: "brand-hits-skeleton",
        children: /* @__PURE__ */ e("div", { className: "wrapper__content", children: n == null ? void 0 : n.map((r, _) => /* @__PURE__ */ e(
          v,
          {
            image: r == null ? void 0 : r.image,
            imageComponent: r == null ? void 0 : r.imageComponent,
            onSelectCard: () => o == null ? void 0 : o(r),
            className: "wrapper__item",
            urlPrefix: p,
            urlSufix: s,
            code: r == null ? void 0 : r.card,
            LinkComponent: l
          },
          `brand-hit-card__${_ + 1}`
        )) })
      }
    )
  ] })
);
export {
  W as default
};