@lanaco/lnc-react-ui/dist/suspense-product-card-detailed-BETmfKMT.js

React component library

import { jsxs as t, jsx as e, Fragment as p } from "react/jsx-runtime";
import { forwardRef as c, Suspense as $ } from "react";
import { t as y, o as m, m as s, l as S, n as C, G as z } from "./utils-DtRLzzTZ.js";
import { n as g } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as P } from "./consts-C1uHV4xc.js";
const h = g.div`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  cursor: pointer;

  & .wrapper-card-1 {
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
  }

  & .wrapper-card-2 {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  & img {
    width: 100%;
    aspect-ratio: 1 / 1; /* defining the aspect ratio of the image */
    object-fit: cover; /* making sure the image isn't distorted */
    border-radius: 0.75rem;
  }

  & .card-title {
    font-size: 0.875rem;
    font-weight: 600;
    ${y(2)}
  }

  & .price-text {
    font-size: 1rem;
    font-weight: 600;
    ${m()}
  }

  & .location-text {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--gray-600, #676e79);
    ${m()}
  }

  & .tags-wrapper {
    display: flex;
    gap: 0.5rem;
  }

  &:hover {
    & .card-title {
      color: var(--primary-500, #f59e0b);
    }
  }

  & .skeleton-img {
    background-color: ${s("-90deg")};
    border-radius: 0.75rem;
    border: 1px solid white;
  }

  & .skeleton-title {
    background-color: ${s("-90deg")};
    width: 100%;
    height: 2.5rem;
  }

  & .skeleton-tags {
    background-color: ${s("-90deg")};
    width: 80%;
    height: 1.5rem;
  }

  & .skeleton-price {
    background-color: ${s("-90deg")};
    width: 50%;
    height: 2.5rem;
  }

  & .skeleton-sponsored {
    background-color: ${s("-90deg")};
    width: 50%;
    height: 1rem;
  }

  @media (max-width: ${P + "px"}) {
    & img {
      width: 8.875rem;
      height: 8.875rem;
      min-width: 8.875rem;
      min-height: 8.875rem;
      min-width: 8.875rem;
      min-height: 8.875rem;
      object-fit: cover;
    }

    & .price-text {
      font-size: 0.875rem;
      font-weight: 600;
    }
  }
`, D = g.div`
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--gray-500);
  font-size:  0.75rem;
  font-weight: 500;

  & i {
    font-size: 1rem;
    color: var(--warning-500, #F59E0B);
  }
`, j = c(({ sponsoredText: r = "Sponsored" }, i) => /* @__PURE__ */ t(D, { ref: i, className: "sponsored-line", children: [
  /* @__PURE__ */ e("i", { className: "mng-lnc-paw2" }),
  /* @__PURE__ */ e("span", { children: r })
] })), M = c((r, i) => {
  const {
    uuid: o,
    title: n,
    price: a,
    currency: d,
    isNegotiable: f,
    isFree: u,
    image: w,
    sellerUuid: E,
    location: x,
    isSponsored: k,
    imageComponent: l,
    onSelectCard: v = () => {
    },
    freeText: N = "Free",
    negotiableText: b = "Negotiable"
  } = r;
  return (
    // <LandingPageProductCardSkeleton />
    /* @__PURE__ */ t(h, { className: "product-card", onClick: v, children: [
      S(l) ? l : /* @__PURE__ */ e("img", { src: w }),
      /* @__PURE__ */ e("div", { className: "wrapper-card-1", children: /* @__PURE__ */ e("div", { className: "card-title", children: n }) }),
      /* @__PURE__ */ t("div", { className: "wrapper-card-2", children: [
        /* @__PURE__ */ t("div", { className: "price-text", children: [
          a && d && `${C(a)} ${z(d)}`,
          f && { negotiableText: b },
          u && { freeText: N }
        ] }),
        /* @__PURE__ */ e("div", { className: "location-text", children: x })
      ] }),
      k === !0 && /* @__PURE__ */ e(j, {})
    ] })
  );
}), F = c(({}, r) => /* @__PURE__ */ t(h, { className: "product-card", children: [
  /* @__PURE__ */ e("img", { className: "skeleton-img" }),
  /* @__PURE__ */ t("div", { className: "wrapper-card-1", children: [
    /* @__PURE__ */ e("div", { className: "skeleton-title" }),
    /* @__PURE__ */ e("div", { className: "skeleton-tags" })
  ] }),
  /* @__PURE__ */ t("div", { className: "wrapper-card-1", children: [
    /* @__PURE__ */ e("div", { className: "skeleton-price" }),
    /* @__PURE__ */ e("div", { className: "skeleton-sponsored" })
  ] })
] })), T = ({ limit: r = 5, isLoading: i = !1, keyPrefix: o }) => /* @__PURE__ */ e(p, { children: Array.from({ length: r }, (n, a) => /* @__PURE__ */ e(
  F,
  {
    isLoading: i
  },
  `${o}-skeleton-product-card-${a}`
)) }), R = ({
  children: r,
  fallbackComponent: i = /* @__PURE__ */ e(p, {}),
  isLoading: o = !1,
  limit: n,
  keyPrefix: a
}) => /* @__PURE__ */ e($, { fallbackComponent: i, children: o === !0 ? /* @__PURE__ */ e(
  T,
  {
    isLoading: o,
    limit: n,
    keyPrefix: a
  }
) : r });
export {
  M as D,
  R as S
};