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

React component library

import { jsx as a, jsxs as m } from "react/jsx-runtime";
import { forwardRef as o } from "react";
import { m as c, l as g } from "./utils-DtRLzzTZ.js";
import { n as d } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as l } from "./consts-C1uHV4xc.js";
const s = d.div`
  width: 7.5rem;
  height: auto;
  max-height: 7.5rem;

  &:hover {
    cursor: pointer;
  }

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

  @media (max-width: ${l + "px"}) {
    width: 4.5rem;
    height: auto;
    max-height: 4.5rem;

    & .wrapper__image {
      width: 4.5rem;
      height: auto;
    }
  }
`, _ = d.div`
  width: 7.5rem;
  height: 7.5rem;
  background: ${c("-90deg")};

  @media (max-width: ${l + "px"}) {
    width: 4.5rem;
    height: 4.5rem;
  }
`, w = o(
  ({ imageComponent: t, image: i, onSelectCard: e }, n) => /* @__PURE__ */ a(s, { children: g(t) ? t : /* @__PURE__ */ a(
    "img",
    {
      src: i,
      className: "wrapper__image",
      onSelectCard: e
    }
  ) })
), f = o(({}, t) => /* @__PURE__ */ a(_, {})), x = d.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: 1rem;
    text-align: center;
    width: 100%;

    & .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__content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    align-self: stretch;

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

  @media (max-width: ${l + "px"}) {
    & .wrapper__content {
      align-content: center;
      gap: 1rem;
      flex-wrap: wrap;

      & .wrapper__item {
        max-width: 4 0.5rem;
      }
    }
  }
`, k = o(
  ({ title: t, subtitle: i, items: e = [], onSelectCard: n = () => {
  } }, u) => {
    var h;
    return /* @__PURE__ */ a(x, { children: /* @__PURE__ */ m("div", { className: "wrapper__heading", children: [
      t && /* @__PURE__ */ a("div", { className: "wrapper__title", children: t }),
      i && /* @__PURE__ */ a("div", { className: "wrapper__subtitle", children: i }),
      /* @__PURE__ */ a("div", { className: "wrapper__content", children: e && (e == null ? void 0 : e.length) > 0 ? e == null ? void 0 : e.map((r, p) => /* @__PURE__ */ a(
        w,
        {
          image: r == null ? void 0 : r.image,
          imageComponent: r == null ? void 0 : r.imageComponent,
          onSelectCard: () => n == null ? void 0 : n(r == null ? void 0 : r.uuid),
          className: "wrapper__item"
        },
        `brand-hit-card__${p + 1}`
      )) : (h = Array.from("12345")) == null ? void 0 : h.map((r, p) => /* @__PURE__ */ a(
        f,
        {},
        `brand-hit-card-skeleton__${p + 1}`
      )) })
    ] }) });
  }
);
export {
  k as default
};