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

React component library

import { jsx as t, jsxs as y } from "react/jsx-runtime";
import { forwardRef as f } from "react";
import { n as _ } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as x } from "./consts-C1uHV4xc.js";
import { m as C, l as F } from "./utils-DtRLzzTZ.js";
import { a as N } from "./index-BT55M3t6.js";
const k = _.div`
  width: 100%;
  height: 11.625rem;
  border-radius: 0.75rem;
  background: ${C("-90deg")};
`, A = _.div`
  width: 100%;
  height: auto;
  border-radius: 999px;

  &:hover {
    cursor: pointer;
  }

  & .wrapper__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 999px;
    max-height: 9.875rem;
  }

  &.active {
    border: var(--yellow-600, #d97706);
  }

  @media (max-width: ${x + "px"}) {
    & .wrapper__image {
      height: auto;
    }
  }
`, W = _.div`
  width: 9.875rem;
  height: 9.875rem;
  border-radius: 999px;
  background: ${C("-90deg")};

  @media (max-width: ${x + "px"}) {
    width: 4.5rem;
    height: 4.5rem;
  }
`, v = f(({}, i) => /* @__PURE__ */ t(W, {})), I = f(
  ({ isActive: i, image: o, imageComponent: r, onSelectCard: m = () => {
  } }, h) => /* @__PURE__ */ t(
    A,
    {
      className: i ? "active" : "",
      onClick: m,
      children: F(r) ? r : /* @__PURE__ */ t("img", { src: o, className: "wrapper__image" })
    }
  )
), O = f(
  ({
    uuid: i,
    title: o,
    price: r,
    currency: m,
    isNegotiable: h,
    isFree: u,
    image: w,
    sellerUuid: n,
    onSelectCard: l = () => {
    },
    imageComponent: p,
    negotiableText: d = "Negotiable",
    freeText: g = "Free"
  }, a) => /* @__PURE__ */ t(
    N,
    {
      uuid: i,
      title: o,
      price: r,
      currency: m,
      isNegotiable: h,
      isFree: u,
      image: w,
      imageComponent: p,
      sellerUuid: n,
      onSelectCard: l,
      negotiableText: d,
      freeText: g
    }
  )
), j = f(({}, i) => /* @__PURE__ */ t(k, {})), M = _.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__avatars {
    display: grid;
    grid-template-columns: ${(i) => `repeat(${i == null ? void 0 : i.limitAvatars}, minmax(0, 1fr))`};
    gap: 2rem;
    justify-items: center;
    align-items: center;
  }

  & .wrapper__cards {
    display: grid;
    grid-template-columns: ${(i) => `repeat(${i == null ? void 0 : i.limitCards}, minmax(0, 1fr))`};
    gap: 1.25rem;
    justify-items: center;
    align-items: center;
    width: 100%;
  }

  @media (max-width: ${x + "px"}) {
    & .wrapper__avatars {
      grid-template-columns: ${(i) => `repeat(${i == null ? void 0 : i.limitAvatarsForMobile}, minmax(0, 1fr))`};
      gap: auto;
    }

    & .wrapper__cards {
      grid-template-columns: ${(i) => `repeat(${i == null ? void 0 : i.limitCardsForMobile}, minmax(0, 1fr))`};
      gap: 1rem;
    }
  }
`, B = f(
  ({
    title: i,
    subtitle: o,
    avatars: r = [],
    limitAvatars: m = 4,
    limit: h = 6,
    limitAvatarsForMobile: u = 4,
    limitForMobile: w = 2,
    items: n = [],
    onSelectAvatar: l = () => {
    },
    onSelectCard: p = () => {
    }
  }, d) => {
    var b, $;
    const g = (e) => {
      l == null || l(e == null ? void 0 : e.uuid);
    }, a = (e) => {
      p == null || p(e == null ? void 0 : e.uuid);
    };
    return /* @__PURE__ */ y(
      M,
      {
        ref: d,
        limitAvatars: m,
        limitAvatarsForMobile: u,
        limitCards: h,
        limitCardsForMobile: w,
        children: [
          /* @__PURE__ */ y("div", { className: "wrapper__heading", children: [
            i && /* @__PURE__ */ t("div", { className: "wrapper__title", children: i }),
            o && /* @__PURE__ */ t("div", { className: "wrapper__subtitle", children: o })
          ] }),
          /* @__PURE__ */ t("div", { className: "wrapper__avatars", children: r && (r == null ? void 0 : r.length) > 0 ? r == null ? void 0 : r.map((e, s) => /* @__PURE__ */ t(
            I,
            {
              image: e == null ? void 0 : e.image,
              imageComponent: e == null ? void 0 : e.imageComponent,
              onSelectCard: () => g == null ? void 0 : g(e)
            },
            `field-of-interests-with-avatars-card-avatar__${s + 1}`
          )) : (b = Array.from("1234")) == null ? void 0 : b.map((e, s) => /* @__PURE__ */ t(
            v,
            {},
            `field-of-interests-with-avatars-card-avatar-skeleton__${s + 1}`
          )) }),
          /* @__PURE__ */ t("div", { className: "wrapper__cards", children: n && (n == null ? void 0 : n.length) > 0 ? n == null ? void 0 : n.map((e, s) => /* @__PURE__ */ t(
            O,
            {
              uuid: e == null ? void 0 : e.uuid,
              title: e == null ? void 0 : e.title,
              price: e == null ? void 0 : e.price,
              currency: e == null ? void 0 : e.currency,
              isNegotiable: e == null ? void 0 : e.isNegotiable,
              isFree: e == null ? void 0 : e.isFree,
              image: e == null ? void 0 : e.image,
              imageComponent: e == null ? void 0 : e.imageComponent,
              sellerUuid: e == null ? void 0 : e.sellerUuid,
              negotiableText: e == null ? void 0 : e.negotiableText,
              freeText: e == null ? void 0 : e.freeText,
              onSelectCard: () => a == null ? void 0 : a(e)
            },
            `field-of-interests-with-avatars-card__${s + 1}`
          )) : ($ = Array.from("123456")) == null ? void 0 : $.map((e, s) => /* @__PURE__ */ t(
            j,
            {},
            `field-of-interests-with-avatars-card-skeleton__${s + 1}`
          )) })
        ]
      }
    );
  }
);
export {
  B as default
};