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

React component library

import { jsx as o, Fragment as S, jsxs as c } from "react/jsx-runtime";
import { memo as k, forwardRef as v, useState as M, useMemo as P } from "react";
import { n as C } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as U } from "./consts-C1uHV4xc.js";
import { u as $ } from "./useDetectMobile-BC6EGaBc.js";
import D from "./Button.js";
import { D as j, S as z } from "./suspense-product-card-detailed-BETmfKMT.js";
const L = C.div`
  padding: 1.75rem 3rem;
  display: grid;
  grid-template-columns: ${(i) => `repeat(${i.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: ${(i) => `calc(${100 / i.desktopCols}% - ${(i.desktopCols - 1) * i.columnGapRem / i.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 (max-width: ${U + "px"}) {
    grid-template-columns: repeat(2, 1fr);
    padding: 2rem 1.25rem;
    gap: 1.19rem;

    & .urgent-tag {
    }

    & .img-wrapper {
    }
  }
`, u = k(j), R = v((i, p) => {
  const {
    items: r,
    limit: a = 5,
    limitMobile: l = 6,
    onSelectCard: t = () => {
    },
    title: g = "Urgent sale",
    showLessText: f = "Show less",
    showMoreText: h = "Show more",
    isLoading: w = !1
  } = i, d = $(), [n, b] = M(!1), y = P(() => {
    var m;
    return /* @__PURE__ */ o(S, { children: d === !0 ? (m = r == null ? void 0 : r.slice(0, n === !0 ? r == null ? void 0 : r.length : l)) == null ? void 0 : m.map((e, s) => /* @__PURE__ */ o(
      u,
      {
        title: e == null ? void 0 : e.title,
        price: e == null ? void 0 : e.price,
        currency: e == null ? void 0 : e.currency,
        image: e == null ? void 0 : e.image,
        sellerUuid: e == null ? void 0 : e.sellerUuid,
        uuid: e == null ? void 0 : e.uuid,
        isSponsored: e == null ? void 0 : e.isSponsored,
        onSelectCard: () => t == null ? void 0 : t(e == null ? void 0 : e.uuid)
      },
      s
    )) : r == null ? void 0 : r.slice(0, a).map((e, s) => /* @__PURE__ */ o(
      u,
      {
        title: e == null ? void 0 : e.title,
        price: e == null ? void 0 : e.price,
        currency: e == null ? void 0 : e.currency,
        image: e == null ? void 0 : e.image,
        sellerUuid: e == null ? void 0 : e.sellerUuid,
        uuid: e == null ? void 0 : e.uuid,
        location: e == null ? void 0 : e.location,
        isSponsored: e == null ? void 0 : e.isSponsored,
        onSelectCard: () => t == null ? void 0 : t(e == null ? void 0 : e.uuid)
      },
      s
    )) });
  }, [r]);
  return /* @__PURE__ */ c(L, { ref: p, limit: a, children: [
    /* @__PURE__ */ c("div", { className: "urgent-tag", children: [
      /* @__PURE__ */ o("i", { className: "mng mng-lnc-bolt-filled" }),
      /* @__PURE__ */ o("span", { children: g })
    ] }),
    /* @__PURE__ */ o(
      z,
      {
        isLoading: w,
        limit: a,
        keyPrefix: "explore-landing",
        children: y
      }
    ),
    d === !0 && l < (r == null ? void 0 : r.length) && /* @__PURE__ */ o(
      D,
      {
        className: "show-more",
        btnType: "basic",
        type: "button",
        color: "gray",
        onClick: () => b(!n),
        children: n === !0 ? f : h
      }
    )
  ] });
});
export {
  R as default
};