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

React component library

import { jsx as o, Fragment as T, jsxs as w } from "react/jsx-runtime";
import { memo as q, forwardRef as D, useState as Q, useMemo as j } from "react";
import { s as z } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as c } from "./breakpoints-BubDitvo.js";
import { u as A } from "./useDetectMobile-B0Jog4jQ.js";
import B from "./Button.js";
import { D as G, S as R } from "./index-CZkKSTfr.js";
const I = z.div`
  padding: 1.75rem 3rem;
  display: grid;
  grid-template-columns: ${(r) => `repeat(${r.limit || 5},  minmax(0, 1fr))`};

  gap: 2.97rem;

  border: 1.5px solid var(--danger-600, #e11d48);
  background-color: var(--danger-50, #fff1f2);
  position: relative;
  border-radius: 0.75rem;
  position: relative;

  & .urgent-tag {
    position: absolute;
    left: 1rem;
    top: -0.75rem;
    min-height: 1.5rem;
    max-height: 1.5rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem;
    gap: 0.12rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--white, #fff);
    background-color: var(--danger-600, #e11d48);
  }

  & .show-more {
    grid-column: 1 / 3;
  }

  & .product-card {
    max-width: ${(r) => `calc(${100 / r.desktopCols}% - ${(r.desktopCols - 1) * r.columnGapRem / r.desktopCols}rem)`};

    animation-duration: 0.2s;
    animation-name: animate-fade;
    animation-delay: 0.2s;
    animation-fill-mode: backwards;
    transition: all 0.25s ease;

    @keyframes animate-fade {
      0% {
        transform: scale(0.9);
        -webkit-transform: scale(0.9);
      }
      100% {
        transform: scale(1);
        -webkit-transform: scale(1);
      }
    }
  }

  @media ${c("M")} {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 2rem 2rem;
    gap: 1.5rem;
  }

  @media ${c("S")} {
    grid-template-columns: repeat(2, 1fr);
    padding: 2rem 1.25rem;
    gap: 1.19rem;

    & .product-card {
      & img {
        width: 100%;
        height: 100%;
      }
    }
  }

  @media ${c("XS")} {
    display: flex;
    flex-direction: column;
  }
`, N = q(G), V = D((r, P) => {
  const {
    items: a,
    limit: s = 5,
    limitMobile: n = 4,
    onSelectCard: u = () => {
    },
    title: U = "Urgent sale",
    showLessText: F = "Show less",
    showMoreText: v = "Show more",
    isLoading: g = !1,
    getImage: p = () => {
    },
    negotiableText: f,
    freeText: h,
    onBookmark: k = () => {
    },
    actionComponent: b,
    componentName: S,
    sponsoredText: C,
    LinkComponent: y
  } = r, l = A(), [i, $] = Q(!1), L = j(() => {
    var t;
    return /* @__PURE__ */ o(T, { children: l === !0 ? (t = a == null ? void 0 : a.slice(0, i === !0 ? a == null ? void 0 : a.length : n)) == null ? void 0 : t.map((e, m) => /* @__PURE__ */ o(
      N,
      {
        sellerName: e == null ? void 0 : e.sellerName,
        name: e == null ? void 0 : e.name,
        price: e == null ? void 0 : e.price,
        sellingPrice: e == null ? void 0 : e.sellingPrice,
        isFree: e == null ? void 0 : e.isFree,
        isNegotiable: e == null ? void 0 : e.isNegotiable,
        currency: e == null ? void 0 : e.currency,
        categoryCode: e == null ? void 0 : e.categoryCode,
        sellerUuid: e == null ? void 0 : e.sellerUuid,
        uuid: e == null ? void 0 : e.uuid,
        sponsored: e == null ? void 0 : e.sponsored,
        onSelectCard: (M, d) => u({
          uuid: e == null ? void 0 : e.uuid,
          nameSlug: e == null ? void 0 : e.nameSlug,
          cardRef: d
        }),
        nameSlug: e == null ? void 0 : e.nameSlug,
        image: e == null ? void 0 : e.image,
        imageUrl: p(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
        imageComponent: e == null ? void 0 : e.imageComponent,
        negotiableText: f,
        freeText: h,
        onBookmark: k,
        actionComponent: b,
        bookmarked: e == null ? void 0 : e.bookmarked,
        bookmarkLists: e == null ? void 0 : e.bookmarkLists,
        metadata: { name: S, accessor: e == null ? void 0 : e.accessor },
        tags: e == null ? void 0 : e.tags,
        condition: e == null ? void 0 : e.condition,
        quantity: e == null ? void 0 : e.quantity,
        hasQuantities: e == null ? void 0 : e.hasQuantities,
        status: e == null ? void 0 : e.status,
        trade: e == null ? void 0 : e.trade,
        forCart: e == null ? void 0 : e.forCart,
        sponsoredText: C,
        LinkComponent: y,
        hasFreeShipping: e == null ? void 0 : e.hasFreeShipping
      },
      m
    )) : a == null ? void 0 : a.slice(0, s).map((e, m) => /* @__PURE__ */ o(
      N,
      {
        name: e == null ? void 0 : e.name,
        price: e == null ? void 0 : e.price,
        sellingPrice: e == null ? void 0 : e.sellingPrice,
        isFree: e == null ? void 0 : e.isFree,
        isNegotiable: e == null ? void 0 : e.isNegotiable,
        currency: e == null ? void 0 : e.currency,
        categoryCode: e == null ? void 0 : e.categoryCode,
        sellerUuid: e == null ? void 0 : e.sellerUuid,
        uuid: e == null ? void 0 : e.uuid,
        location: e == null ? void 0 : e.location,
        sponsored: e == null ? void 0 : e.sponsored,
        onSelectCard: (M, d) => u({
          uuid: e == null ? void 0 : e.uuid,
          nameSlug: e == null ? void 0 : e.nameSlug,
          cardRef: d
        }),
        nameSlug: e == null ? void 0 : e.nameSlug,
        image: e == null ? void 0 : e.image,
        imageUrl: p(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
        imageComponent: e == null ? void 0 : e.imageComponent,
        negotiableText: f,
        freeText: h,
        onBookmark: k,
        actionComponent: b,
        bookmarked: e == null ? void 0 : e.bookmarked,
        bookmarkLists: e == null ? void 0 : e.bookmarkLists,
        metadata: { name: S, accessor: e == null ? void 0 : e.accessor },
        tags: e == null ? void 0 : e.tags,
        condition: e == null ? void 0 : e.condition,
        quantity: e == null ? void 0 : e.quantity,
        hasQuantities: e == null ? void 0 : e.hasQuantities,
        status: e == null ? void 0 : e.status,
        trade: e == null ? void 0 : e.trade,
        forCart: e == null ? void 0 : e.forCart,
        sponsoredText: C,
        sellerName: e == null ? void 0 : e.sellerName,
        LinkComponent: y,
        hasFreeShipping: e == null ? void 0 : e.hasFreeShipping
      },
      m
    )) });
  }, [a, l, s, n, i]);
  return /* @__PURE__ */ o(
    R,
    {
      isLoading: g,
      keyPrefix: "urgent-sale-products-skeleton",
      children: /* @__PURE__ */ w(I, { ref: P, limit: s, className: "lp-section lp-urgent-sale-products-section", children: [
        /* @__PURE__ */ w("div", { className: "urgent-tag", children: [
          /* @__PURE__ */ o("i", { className: "mng mng-lnc-bolt-filled" }),
          /* @__PURE__ */ o("span", { children: U })
        ] }),
        " ",
        L,
        " ",
        l === !0 && n < (a == null ? void 0 : a.length) && !g && /* @__PURE__ */ o(
          B,
          {
            className: "show-more",
            btnType: "basic",
            type: "button",
            color: "neutral",
            onClick: (t) => {
              var e;
              (e = t == null ? void 0 : t.target) == null || e.blur(), $(!i);
            },
            children: i === !0 ? F : v
          }
        )
      ] })
    }
  );
});
export {
  V as default
};