@lanaco/lnc-react-ui 4.0.130 → 4.0.131
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/DetailedProductsSection.cjs +1 -1
- package/dist/DetailedProductsSection.js +1 -1
- package/dist/UrgentSaleProductsSection.cjs +1 -1
- package/dist/UrgentSaleProductsSection.js +1 -1
- package/dist/{suspense-product-card-detailed-Crkoym56.js → suspense-product-card-detailed-BP1opdKD.js} +70 -57
- package/dist/suspense-product-card-detailed-D0jNIBlf.cjs +131 -0
- package/package.json +1 -1
- package/dist/suspense-product-card-detailed-ByW7-U8H.cjs +0 -118
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const i=require("react/jsx-runtime"),s=require("react"),v=require("./emotion-styled.browser.esm-BtEseadx.cjs"),D=require("./consts-goSZX3xP.cjs"),U=require("./Button.cjs"),y=require("./utils-DmMdPm9O.cjs"),M=require("./useDetectMobile-zkbzoOGV.cjs"),F=require("./style-C_BRvopE.cjs"),h=require("./suspense-product-card-detailed-
|
|
1
|
+
"use strict";const i=require("react/jsx-runtime"),s=require("react"),v=require("./emotion-styled.browser.esm-BtEseadx.cjs"),D=require("./consts-goSZX3xP.cjs"),U=require("./Button.cjs"),y=require("./utils-DmMdPm9O.cjs"),M=require("./useDetectMobile-zkbzoOGV.cjs"),F=require("./style-C_BRvopE.cjs"),h=require("./suspense-product-card-detailed-D0jNIBlf.cjs"),T=require("./index-D0xZLbyl.cjs"),E=v.styled.div`
|
|
2
2
|
display: grid;
|
|
3
3
|
grid-template-columns: ${r=>`repeat(${r.limit}, minmax(0, 1fr))`};
|
|
4
4
|
gap: ${r=>(r==null?void 0:r.gap)||"1.25rem"};
|
|
@@ -6,7 +6,7 @@ import E from "./Button.js";
|
|
|
6
6
|
import { k as f } from "./utils-BPdU4_1q.js";
|
|
7
7
|
import { u as I } from "./useDetectMobile-Bkvj0VMa.js";
|
|
8
8
|
import { T as $ } from "./style-XXDQBreL.js";
|
|
9
|
-
import { D as L, S as O } from "./suspense-product-card-detailed-
|
|
9
|
+
import { D as L, S as O } from "./suspense-product-card-detailed-BP1opdKD.js";
|
|
10
10
|
import { S as R } from "./index-BRciSeV3.js";
|
|
11
11
|
const W = F.div`
|
|
12
12
|
display: grid;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const i=require("react/jsx-runtime"),n=require("react"),P=require("./emotion-styled.browser.esm-BtEseadx.cjs"),f=require("./consts-goSZX3xP.cjs"),v=require("./useDetectMobile-zkbzoOGV.cjs"),q=require("./Button.cjs"),b=require("./suspense-product-card-detailed-
|
|
1
|
+
"use strict";const i=require("react/jsx-runtime"),n=require("react"),P=require("./emotion-styled.browser.esm-BtEseadx.cjs"),f=require("./consts-goSZX3xP.cjs"),v=require("./useDetectMobile-zkbzoOGV.cjs"),q=require("./Button.cjs"),b=require("./suspense-product-card-detailed-D0jNIBlf.cjs"),C=P.styled.div`
|
|
2
2
|
padding: 1.75rem 3rem;
|
|
3
3
|
display: grid;
|
|
4
4
|
grid-template-columns: ${t=>`repeat(${t.limit||5}, minmax(0, 1fr))`};
|
|
@@ -4,7 +4,7 @@ import { s as C } from "./emotion-styled.browser.esm-BNN1dTl3.js";
|
|
|
4
4
|
import { M as L, S as F } from "./consts-BuFChS64.js";
|
|
5
5
|
import { u as I } from "./useDetectMobile-Bkvj0VMa.js";
|
|
6
6
|
import T from "./Button.js";
|
|
7
|
-
import { D as _, S as D } from "./suspense-product-card-detailed-
|
|
7
|
+
import { D as _, S as D } from "./suspense-product-card-detailed-BP1opdKD.js";
|
|
8
8
|
const E = C.div`
|
|
9
9
|
padding: 1.75rem 3rem;
|
|
10
10
|
display: grid;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { jsxs as i, jsx as e, Fragment as
|
|
2
|
-
import { forwardRef as p, Suspense as
|
|
3
|
-
import { p as
|
|
4
|
-
import { s as
|
|
5
|
-
import { P as
|
|
6
|
-
import { M as
|
|
7
|
-
const
|
|
1
|
+
import { jsxs as i, jsx as e, Fragment as x } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as p, Suspense as z } from "react";
|
|
3
|
+
import { p as C, t as f, o as s, l as D, q as u, G as w } from "./utils-BPdU4_1q.js";
|
|
4
|
+
import { s as g } from "./emotion-styled.browser.esm-BNN1dTl3.js";
|
|
5
|
+
import { P as I } from "./index-3TFXgZHA.js";
|
|
6
|
+
import { M as v } from "./consts-BuFChS64.js";
|
|
7
|
+
const k = g.div`
|
|
8
8
|
display: flex;
|
|
9
9
|
flex-direction: column;
|
|
10
10
|
gap: 0.5rem;
|
|
@@ -22,23 +22,16 @@ const v = x.div`
|
|
|
22
22
|
gap: 0;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
& img {
|
|
26
|
-
width: 100%;
|
|
27
|
-
aspect-ratio: 1 / 1; /* defining the aspect ratio of the image */
|
|
28
|
-
object-fit: cover; /* making sure the image isn't distorted */
|
|
29
|
-
border-radius: 0.75rem;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
25
|
& .card-title {
|
|
33
26
|
font-size: 0.875rem;
|
|
34
27
|
font-weight: 600;
|
|
35
|
-
${
|
|
28
|
+
${C(2)}
|
|
36
29
|
}
|
|
37
30
|
|
|
38
31
|
& .price-text {
|
|
39
32
|
font-size: 1rem;
|
|
40
33
|
font-weight: 600;
|
|
41
|
-
${
|
|
34
|
+
${f()}
|
|
42
35
|
display: flex;
|
|
43
36
|
align-items: end;
|
|
44
37
|
gap: 0.5rem;
|
|
@@ -55,7 +48,7 @@ const v = x.div`
|
|
|
55
48
|
font-size: 0.75rem;
|
|
56
49
|
font-weight: 400;
|
|
57
50
|
color: var(--gray-600, #676e79);
|
|
58
|
-
${
|
|
51
|
+
${f()}
|
|
59
52
|
}
|
|
60
53
|
|
|
61
54
|
& .tags-wrapper {
|
|
@@ -93,23 +86,43 @@ const v = x.div`
|
|
|
93
86
|
height: 1rem;
|
|
94
87
|
}
|
|
95
88
|
|
|
96
|
-
@media (max-width: ${
|
|
89
|
+
@media (max-width: ${v + "px"}) {
|
|
90
|
+
& .price-text {
|
|
91
|
+
font-size: 0.875rem;
|
|
92
|
+
font-weight: 600;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&:hover .product-image-wrapper img {
|
|
97
|
+
transform: scale(1.1);
|
|
98
|
+
}
|
|
99
|
+
`, j = g.div`
|
|
100
|
+
position: relative;
|
|
101
|
+
overflow: hidden;
|
|
102
|
+
border-radius: 0.75rem;
|
|
103
|
+
width: 100%;
|
|
104
|
+
aspect-ratio: 1 / 1;
|
|
105
|
+
border: 1px solid #0c15201f;
|
|
106
|
+
|
|
107
|
+
& img {
|
|
108
|
+
display: block;
|
|
109
|
+
width: 100%;
|
|
110
|
+
height: 100%;
|
|
111
|
+
object-fit: cover;
|
|
112
|
+
border-radius: 0.75rem;
|
|
113
|
+
transition: var(--transition, all 0.3s ease);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@media (max-width: ${v + "px"}) {
|
|
97
117
|
& img {
|
|
98
118
|
width: 8.875rem;
|
|
99
119
|
height: 8.875rem;
|
|
100
120
|
min-width: 8.875rem;
|
|
101
121
|
min-height: 8.875rem;
|
|
102
|
-
min-width: 8.875rem;
|
|
103
|
-
min-height: 8.875rem;
|
|
104
122
|
object-fit: cover;
|
|
105
123
|
}
|
|
106
|
-
|
|
107
|
-
& .price-text {
|
|
108
|
-
font-size: 0.875rem;
|
|
109
|
-
font-weight: 600;
|
|
110
|
-
}
|
|
111
124
|
}
|
|
112
|
-
`, F =
|
|
125
|
+
`, F = g.div`
|
|
113
126
|
display: flex;
|
|
114
127
|
align-items: center;
|
|
115
128
|
gap: 0.25rem;
|
|
@@ -121,46 +134,46 @@ const v = x.div`
|
|
|
121
134
|
font-size: 1rem;
|
|
122
135
|
color: var(--warning-500, #F59E0B);
|
|
123
136
|
}
|
|
124
|
-
`,
|
|
137
|
+
`, T = p(({ sponsoredText: r = "Sponsored" }, a) => /* @__PURE__ */ i(F, { ref: a, className: "sponsored-line", children: [
|
|
125
138
|
/* @__PURE__ */ e("i", { className: "mng-lnc-paw2" }),
|
|
126
139
|
/* @__PURE__ */ e("span", { children: r })
|
|
127
|
-
] })),
|
|
140
|
+
] })), q = p((r, a) => {
|
|
128
141
|
const {
|
|
129
142
|
uuid: o,
|
|
130
|
-
title:
|
|
143
|
+
title: l,
|
|
131
144
|
price: t = 0,
|
|
132
|
-
sellingPrice:
|
|
133
|
-
currency:
|
|
134
|
-
isNegotiable:
|
|
145
|
+
sellingPrice: d,
|
|
146
|
+
currency: n,
|
|
147
|
+
isNegotiable: c,
|
|
135
148
|
isFree: m,
|
|
136
|
-
imageUrl:
|
|
149
|
+
imageUrl: N,
|
|
137
150
|
sellerUuid: G,
|
|
138
|
-
location:
|
|
151
|
+
location: b,
|
|
139
152
|
isSponsored: $,
|
|
140
|
-
imageComponent:
|
|
141
|
-
onSelectCard:
|
|
153
|
+
imageComponent: h,
|
|
154
|
+
onSelectCard: y = () => {
|
|
142
155
|
},
|
|
143
|
-
freeText:
|
|
144
|
-
negotiableText:
|
|
156
|
+
freeText: S = "Free",
|
|
157
|
+
negotiableText: P = "Negotiable"
|
|
145
158
|
} = r;
|
|
146
159
|
return (
|
|
147
160
|
// <LandingPageProductCardSkeleton />
|
|
148
|
-
/* @__PURE__ */ i(
|
|
149
|
-
|
|
150
|
-
/* @__PURE__ */ e("div", { className: "wrapper-card-1", children: /* @__PURE__ */ e("div", { className: "card-title", children:
|
|
161
|
+
/* @__PURE__ */ i(k, { className: "product-card", onClick: y, children: [
|
|
162
|
+
/* @__PURE__ */ e(j, { className: "product-image-wrapper", children: D(h) ? h : /* @__PURE__ */ e(I, { src: N }) }),
|
|
163
|
+
/* @__PURE__ */ e("div", { className: "wrapper-card-1", children: /* @__PURE__ */ e("div", { className: "card-title", children: l }) }),
|
|
151
164
|
/* @__PURE__ */ i("div", { className: "wrapper-card-2", children: [
|
|
152
165
|
/* @__PURE__ */ i("div", { className: "price-text", children: [
|
|
153
|
-
|
|
154
|
-
t > 0 &&
|
|
155
|
-
|
|
156
|
-
m &&
|
|
166
|
+
d > 0 && n && c !== !0 && m !== !0 && /* @__PURE__ */ e("div", { children: `${u(d)} ${w(n)}` }),
|
|
167
|
+
t > 0 && n && c !== !0 && m !== !0 && t !== d && /* @__PURE__ */ e("div", { className: `${d > 0 ? "full-price" : ""}`, children: `${u(t)} ${w(n)}` }),
|
|
168
|
+
c && P,
|
|
169
|
+
m && S
|
|
157
170
|
] }),
|
|
158
|
-
/* @__PURE__ */ e("div", { className: "location-text", children:
|
|
171
|
+
/* @__PURE__ */ e("div", { className: "location-text", children: b })
|
|
159
172
|
] }),
|
|
160
|
-
$ === !0 && /* @__PURE__ */ e(
|
|
173
|
+
$ === !0 && /* @__PURE__ */ e(T, {})
|
|
161
174
|
] })
|
|
162
175
|
);
|
|
163
|
-
}),
|
|
176
|
+
}), W = p(({}, r) => /* @__PURE__ */ i(k, { className: "product-card", children: [
|
|
164
177
|
/* @__PURE__ */ e("img", { className: "skeleton-img" }),
|
|
165
178
|
/* @__PURE__ */ i("div", { className: "wrapper-card-1", children: [
|
|
166
179
|
/* @__PURE__ */ e("div", { className: "skeleton-title" }),
|
|
@@ -170,27 +183,27 @@ const v = x.div`
|
|
|
170
183
|
/* @__PURE__ */ e("div", { className: "skeleton-price" }),
|
|
171
184
|
/* @__PURE__ */ e("div", { className: "skeleton-sponsored" })
|
|
172
185
|
] })
|
|
173
|
-
] })), E = ({ limit: r = 5, isLoading: a = !1, keyPrefix: o }) => /* @__PURE__ */ e(
|
|
174
|
-
|
|
186
|
+
] })), E = ({ limit: r = 5, isLoading: a = !1, keyPrefix: o }) => /* @__PURE__ */ e(x, { children: Array.from({ length: r }, (l, t) => /* @__PURE__ */ e(
|
|
187
|
+
W,
|
|
175
188
|
{
|
|
176
189
|
isLoading: a
|
|
177
190
|
},
|
|
178
191
|
`${o}-skeleton-product-card-${t}`
|
|
179
|
-
)) }),
|
|
192
|
+
)) }), L = ({
|
|
180
193
|
children: r,
|
|
181
|
-
fallbackComponent: a = /* @__PURE__ */ e(
|
|
194
|
+
fallbackComponent: a = /* @__PURE__ */ e(x, {}),
|
|
182
195
|
isLoading: o = !1,
|
|
183
|
-
limit:
|
|
196
|
+
limit: l,
|
|
184
197
|
keyPrefix: t
|
|
185
|
-
}) => /* @__PURE__ */ e(
|
|
198
|
+
}) => /* @__PURE__ */ e(z, { fallbackComponent: a, children: o === !0 ? /* @__PURE__ */ e(
|
|
186
199
|
E,
|
|
187
200
|
{
|
|
188
201
|
isLoading: o,
|
|
189
|
-
limit:
|
|
202
|
+
limit: l,
|
|
190
203
|
keyPrefix: t
|
|
191
204
|
}
|
|
192
205
|
) : r });
|
|
193
206
|
export {
|
|
194
|
-
|
|
195
|
-
|
|
207
|
+
q as D,
|
|
208
|
+
L as S
|
|
196
209
|
};
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
"use strict";const e=require("react/jsx-runtime"),c=require("react"),r=require("./utils-DmMdPm9O.cjs"),p=require("./emotion-styled.browser.esm-BtEseadx.cjs"),k=require("./index-DiIeF_76.cjs"),u=require("./consts-goSZX3xP.cjs"),x=p.styled.div`
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
gap: 0.5rem;
|
|
5
|
+
cursor: pointer;
|
|
6
|
+
|
|
7
|
+
& .wrapper-card-1 {
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
gap: 0.38rem;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
& .wrapper-card-2 {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: column;
|
|
16
|
+
gap: 0;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
& .card-title {
|
|
20
|
+
font-size: 0.875rem;
|
|
21
|
+
font-weight: 600;
|
|
22
|
+
${r.truncateTextInRows(2)}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
& .price-text {
|
|
26
|
+
font-size: 1rem;
|
|
27
|
+
font-weight: 600;
|
|
28
|
+
${r.truncateText()}
|
|
29
|
+
display: flex;
|
|
30
|
+
align-items: end;
|
|
31
|
+
gap: 0.5rem;
|
|
32
|
+
& .full-price {
|
|
33
|
+
text-decoration: line-through;
|
|
34
|
+
font-size: 0.75rem;
|
|
35
|
+
font-weight: 400;
|
|
36
|
+
padding-bottom: 0.125rem;
|
|
37
|
+
color: var(--gray-600, #676e79);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
& .location-text {
|
|
42
|
+
font-size: 0.75rem;
|
|
43
|
+
font-weight: 400;
|
|
44
|
+
color: var(--gray-600, #676e79);
|
|
45
|
+
${r.truncateText()}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
& .tags-wrapper {
|
|
49
|
+
display: flex;
|
|
50
|
+
gap: 0.5rem;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
& .skeleton-img {
|
|
54
|
+
background-color: ${r.linearGradientAnimation("-90deg")};
|
|
55
|
+
border-radius: 0.75rem;
|
|
56
|
+
border: 1px solid white;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
& .skeleton-title {
|
|
60
|
+
background-color: ${r.linearGradientAnimation("-90deg")};
|
|
61
|
+
width: 100%;
|
|
62
|
+
height: 2.5rem;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
& .skeleton-tags {
|
|
66
|
+
background-color: ${r.linearGradientAnimation("-90deg")};
|
|
67
|
+
width: 80%;
|
|
68
|
+
height: 1.5rem;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
& .skeleton-price {
|
|
72
|
+
background-color: ${r.linearGradientAnimation("-90deg")};
|
|
73
|
+
width: 50%;
|
|
74
|
+
height: 2.5rem;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
& .skeleton-sponsored {
|
|
78
|
+
background-color: ${r.linearGradientAnimation("-90deg")};
|
|
79
|
+
width: 50%;
|
|
80
|
+
height: 1rem;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@media (max-width: ${u.MOBILE_SIZE_PX+"px"}) {
|
|
84
|
+
& .price-text {
|
|
85
|
+
font-size: 0.875rem;
|
|
86
|
+
font-weight: 600;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
&:hover .product-image-wrapper img {
|
|
91
|
+
transform: scale(1.1);
|
|
92
|
+
}
|
|
93
|
+
`,y=p.styled.div`
|
|
94
|
+
position: relative;
|
|
95
|
+
overflow: hidden;
|
|
96
|
+
border-radius: 0.75rem;
|
|
97
|
+
width: 100%;
|
|
98
|
+
aspect-ratio: 1 / 1;
|
|
99
|
+
border: 1px solid #0c15201f;
|
|
100
|
+
|
|
101
|
+
& img {
|
|
102
|
+
display: block;
|
|
103
|
+
width: 100%;
|
|
104
|
+
height: 100%;
|
|
105
|
+
object-fit: cover;
|
|
106
|
+
border-radius: 0.75rem;
|
|
107
|
+
transition: var(--transition, all 0.3s ease);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
@media (max-width: ${u.MOBILE_SIZE_PX+"px"}) {
|
|
111
|
+
& img {
|
|
112
|
+
width: 8.875rem;
|
|
113
|
+
height: 8.875rem;
|
|
114
|
+
min-width: 8.875rem;
|
|
115
|
+
min-height: 8.875rem;
|
|
116
|
+
object-fit: cover;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
`,N=p.styled.div`
|
|
120
|
+
display: flex;
|
|
121
|
+
align-items: center;
|
|
122
|
+
gap: 0.25rem;
|
|
123
|
+
color: var(--gray-500);
|
|
124
|
+
font-size: 0.75rem;
|
|
125
|
+
font-weight: 500;
|
|
126
|
+
|
|
127
|
+
& i {
|
|
128
|
+
font-size: 1rem;
|
|
129
|
+
color: var(--warning-500, #F59E0B);
|
|
130
|
+
}
|
|
131
|
+
`,$=c.forwardRef(({sponsoredText:t="Sponsored"},s)=>e.jsxs(N,{ref:s,className:"sponsored-line",children:[e.jsx("i",{className:"mng-lnc-paw2"}),e.jsx("span",{children:t})]})),S=c.forwardRef((t,s)=>{const{uuid:a,title:o,price:i=0,sellingPrice:n,currency:d,isNegotiable:l,isFree:m,imageUrl:h,sellerUuid:G,location:f,isSponsored:w,imageComponent:g,onSelectCard:j=()=>{},freeText:v="Free",negotiableText:b="Negotiable"}=t;return e.jsxs(x,{className:"product-card",onClick:j,children:[e.jsx(y,{className:"product-image-wrapper",children:r.isDefined(g)?g:e.jsx(k.ProductImageWrapper,{src:h})}),e.jsx("div",{className:"wrapper-card-1",children:e.jsx("div",{className:"card-title",children:o})}),e.jsxs("div",{className:"wrapper-card-2",children:[e.jsxs("div",{className:"price-text",children:[n>0&&d&&l!==!0&&m!==!0&&e.jsx("div",{children:`${r.formatPrice(n)} ${r.GetCurrencySymbol(d)}`}),i>0&&d&&l!==!0&&m!==!0&&i!==n&&e.jsx("div",{className:`${n>0?"full-price":""}`,children:`${r.formatPrice(i)} ${r.GetCurrencySymbol(d)}`}),l&&b,m&&v]}),e.jsx("div",{className:"location-text",children:f})]}),w===!0&&e.jsx($,{})]})}),P=c.forwardRef(({},t)=>e.jsxs(x,{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"})]})]})),C=({limit:t=5,isLoading:s=!1,keyPrefix:a})=>e.jsx(e.Fragment,{children:Array.from({length:t},(o,i)=>e.jsx(P,{isLoading:s},`${a}-skeleton-product-card-${i}`))}),z=({children:t,fallbackComponent:s=e.jsx(e.Fragment,{}),isLoading:a=!1,limit:o,keyPrefix:i})=>e.jsx(c.Suspense,{fallbackComponent:s,children:a===!0?e.jsx(C,{isLoading:a,limit:o,keyPrefix:i}):t});exports.DetailedProductCard=S;exports.SuspenseDetailedProductCard=z;
|
package/package.json
CHANGED
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
"use strict";const e=require("react/jsx-runtime"),d=require("react"),r=require("./utils-DmMdPm9O.cjs"),g=require("./emotion-styled.browser.esm-BtEseadx.cjs"),k=require("./index-DiIeF_76.cjs"),N=require("./consts-goSZX3xP.cjs"),u=g.styled.div`
|
|
2
|
-
display: flex;
|
|
3
|
-
flex-direction: column;
|
|
4
|
-
gap: 0.5rem;
|
|
5
|
-
cursor: pointer;
|
|
6
|
-
|
|
7
|
-
& .wrapper-card-1 {
|
|
8
|
-
display: flex;
|
|
9
|
-
flex-direction: column;
|
|
10
|
-
gap: 0.38rem;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
& .wrapper-card-2 {
|
|
14
|
-
display: flex;
|
|
15
|
-
flex-direction: column;
|
|
16
|
-
gap: 0;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
& img {
|
|
20
|
-
width: 100%;
|
|
21
|
-
aspect-ratio: 1 / 1; /* defining the aspect ratio of the image */
|
|
22
|
-
object-fit: cover; /* making sure the image isn't distorted */
|
|
23
|
-
border-radius: 0.75rem;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
& .card-title {
|
|
27
|
-
font-size: 0.875rem;
|
|
28
|
-
font-weight: 600;
|
|
29
|
-
${r.truncateTextInRows(2)}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
& .price-text {
|
|
33
|
-
font-size: 1rem;
|
|
34
|
-
font-weight: 600;
|
|
35
|
-
${r.truncateText()}
|
|
36
|
-
display: flex;
|
|
37
|
-
align-items: end;
|
|
38
|
-
gap: 0.5rem;
|
|
39
|
-
& .full-price {
|
|
40
|
-
text-decoration: line-through;
|
|
41
|
-
font-size: 0.75rem;
|
|
42
|
-
font-weight: 400;
|
|
43
|
-
padding-bottom: 0.125rem;
|
|
44
|
-
color: var(--gray-600, #676e79);
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
& .location-text {
|
|
49
|
-
font-size: 0.75rem;
|
|
50
|
-
font-weight: 400;
|
|
51
|
-
color: var(--gray-600, #676e79);
|
|
52
|
-
${r.truncateText()}
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
& .tags-wrapper {
|
|
56
|
-
display: flex;
|
|
57
|
-
gap: 0.5rem;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
& .skeleton-img {
|
|
61
|
-
background-color: ${r.linearGradientAnimation("-90deg")};
|
|
62
|
-
border-radius: 0.75rem;
|
|
63
|
-
border: 1px solid white;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
& .skeleton-title {
|
|
67
|
-
background-color: ${r.linearGradientAnimation("-90deg")};
|
|
68
|
-
width: 100%;
|
|
69
|
-
height: 2.5rem;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
& .skeleton-tags {
|
|
73
|
-
background-color: ${r.linearGradientAnimation("-90deg")};
|
|
74
|
-
width: 80%;
|
|
75
|
-
height: 1.5rem;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
& .skeleton-price {
|
|
79
|
-
background-color: ${r.linearGradientAnimation("-90deg")};
|
|
80
|
-
width: 50%;
|
|
81
|
-
height: 2.5rem;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
& .skeleton-sponsored {
|
|
85
|
-
background-color: ${r.linearGradientAnimation("-90deg")};
|
|
86
|
-
width: 50%;
|
|
87
|
-
height: 1rem;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
@media (max-width: ${N.MOBILE_SIZE_PX+"px"}) {
|
|
91
|
-
& img {
|
|
92
|
-
width: 8.875rem;
|
|
93
|
-
height: 8.875rem;
|
|
94
|
-
min-width: 8.875rem;
|
|
95
|
-
min-height: 8.875rem;
|
|
96
|
-
min-width: 8.875rem;
|
|
97
|
-
min-height: 8.875rem;
|
|
98
|
-
object-fit: cover;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
& .price-text {
|
|
102
|
-
font-size: 0.875rem;
|
|
103
|
-
font-weight: 600;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
`,y=g.styled.div`
|
|
107
|
-
display: flex;
|
|
108
|
-
align-items: center;
|
|
109
|
-
gap: 0.25rem;
|
|
110
|
-
color: var(--gray-500);
|
|
111
|
-
font-size: 0.75rem;
|
|
112
|
-
font-weight: 500;
|
|
113
|
-
|
|
114
|
-
& i {
|
|
115
|
-
font-size: 1rem;
|
|
116
|
-
color: var(--warning-500, #F59E0B);
|
|
117
|
-
}
|
|
118
|
-
`,b=d.forwardRef(({sponsoredText:t="Sponsored"},s)=>e.jsxs(y,{ref:s,className:"sponsored-line",children:[e.jsx("i",{className:"mng-lnc-paw2"}),e.jsx("span",{children:t})]})),$=d.forwardRef((t,s)=>{const{uuid:a,title:n,price:i=0,sellingPrice:o,currency:c,isNegotiable:l,isFree:m,imageUrl:h,sellerUuid:z,location:x,isSponsored:f,imageComponent:p,onSelectCard:w=()=>{},freeText:j="Free",negotiableText:v="Negotiable"}=t;return e.jsxs(u,{className:"product-card",onClick:w,children:[r.isDefined(p)?p:e.jsx(k.ProductImageWrapper,{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:[o>0&&c&&l!==!0&&m!==!0&&e.jsx("div",{children:`${r.formatPrice(o)} ${r.GetCurrencySymbol(c)}`}),i>0&&c&&l!==!0&&m!==!0&&i!==o&&e.jsx("div",{className:`${o>0?"full-price":""}`,children:`${r.formatPrice(i)} ${r.GetCurrencySymbol(c)}`}),l&&v,m&&j]}),e.jsx("div",{className:"location-text",children:x})]}),f===!0&&e.jsx(b,{})]})}),S=d.forwardRef(({},t)=>e.jsxs(u,{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"})]})]})),P=({limit:t=5,isLoading:s=!1,keyPrefix:a})=>e.jsx(e.Fragment,{children:Array.from({length:t},(n,i)=>e.jsx(S,{isLoading:s},`${a}-skeleton-product-card-${i}`))}),C=({children:t,fallbackComponent:s=e.jsx(e.Fragment,{}),isLoading:a=!1,limit:n,keyPrefix:i})=>e.jsx(d.Suspense,{fallbackComponent:s,children:a===!0?e.jsx(P,{isLoading:a,limit:n,keyPrefix:i}):t});exports.DetailedProductCard=$;exports.SuspenseDetailedProductCard=C;
|