@lanaco/lnc-react-ui/dist/suspense-product-card-detailed-DtzOxHaH.cjs

React component library

"use strict";const e=require("react/jsx-runtime"),o=require("react"),r=require("./utils-NZLCh-J5.cjs"),l=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),k=require("./consts-CtNoHdBj.cjs"),m=l.newStyled.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;
    ${r.truncateTextInRows(2)}
  }

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

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

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

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

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

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

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

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

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

  @media (max-width: ${k.MOBILE_SIZE_PX+"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;
    }
  }
`,v=l.newStyled.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);
  }
`,N=o.forwardRef(({sponsoredText:t="Sponsored"},i)=>e.jsxs(v,{ref:i,className:"sponsored-line",children:[e.jsx("i",{className:"mng-lnc-paw2"}),e.jsx("span",{children:t})]})),b=o.forwardRef((t,i)=>{const{uuid:a,title:n,price:s,currency:c,isNegotiable:p,isFree:g,image:h,sellerUuid:C,location:u,isSponsored:x,imageComponent:d,onSelectCard:f=()=>{},freeText:w="Free",negotiableText:j="Negotiable"}=t;return e.jsxs(m,{className:"product-card",onClick:f,children:[r.isDefined(d)?d:e.jsx("img",{src:h}),e.jsx("div",{className:"wrapper-card-1",children:e.jsx("div",{className:"card-title",children:n})}),e.jsxs("div",{className:"wrapper-card-2",children:[e.jsxs("div",{className:"price-text",children:[s&&c&&`${r.formatPrice(s)} ${r.GetCurrencySymbol(c)}`,p&&{negotiableText:j},g&&{freeText:w}]}),e.jsx("div",{className:"location-text",children:u})]}),x===!0&&e.jsx(N,{})]})}),y=o.forwardRef(({},t)=>e.jsxs(m,{className:"product-card",children:[e.jsx("img",{className:"skeleton-img"}),e.jsxs("div",{className:"wrapper-card-1",children:[e.jsx("div",{className:"skeleton-title"}),e.jsx("div",{className:"skeleton-tags"})]}),e.jsxs("div",{className:"wrapper-card-1",children:[e.jsx("div",{className:"skeleton-price"}),e.jsx("div",{className:"skeleton-sponsored"})]})]})),S=({limit:t=5,isLoading:i=!1,keyPrefix:a})=>e.jsx(e.Fragment,{children:Array.from({length:t},(n,s)=>e.jsx(y,{isLoading:i},`${a}-skeleton-product-card-${s}`))}),$=({children:t,fallbackComponent:i=e.jsx(e.Fragment,{}),isLoading:a=!1,limit:n,keyPrefix:s})=>e.jsx(o.Suspense,{fallbackComponent:i,children:a===!0?e.jsx(S,{isLoading:a,limit:n,keyPrefix:s}):t});exports.DetailedProductCard=b;exports.SuspenseDetailedProductCard=$;