virtuo-ui-library 1.0.6 → 1.0.7
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/index.js +22 -167
- package/dist/index.mjs +22 -166
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -30,7 +30,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
var index_exports = {};
|
|
31
31
|
__export(index_exports, {
|
|
32
32
|
Button: () => Button,
|
|
33
|
-
Card: () => Card,
|
|
34
33
|
EcommerceCard: () => EcommerceCard,
|
|
35
34
|
ProfileCard: () => ProfileCard
|
|
36
35
|
});
|
|
@@ -120,151 +119,8 @@ function shadeColor(hex, percent) {
|
|
|
120
119
|
return `rgb(${r},${g},${b})`;
|
|
121
120
|
}
|
|
122
121
|
|
|
123
|
-
// src/components/Card/Card.jsx
|
|
124
|
-
var import_react2 = __toESM(require("react"));
|
|
125
|
-
var Card = ({
|
|
126
|
-
title = "Card Title",
|
|
127
|
-
description = "This is a simple, reusable card component you can customize with props.",
|
|
128
|
-
image = null,
|
|
129
|
-
badge = null,
|
|
130
|
-
badgeColor = "#6366f1",
|
|
131
|
-
accentColor = "#6366f1",
|
|
132
|
-
actions = [],
|
|
133
|
-
footer = null,
|
|
134
|
-
width = "320px",
|
|
135
|
-
onClick = null
|
|
136
|
-
}) => {
|
|
137
|
-
const [hovered, setHovered] = (0, import_react2.useState)(false);
|
|
138
|
-
const [liked, setLiked] = (0, import_react2.useState)(false);
|
|
139
|
-
const style = {
|
|
140
|
-
width,
|
|
141
|
-
borderRadius: "16px",
|
|
142
|
-
background: "#ffffff",
|
|
143
|
-
boxShadow: hovered ? "0 16px 48px rgba(0,0,0,0.13)" : "0 4px 20px rgba(0,0,0,0.07)",
|
|
144
|
-
transform: hovered ? "translateY(-4px)" : "translateY(0)",
|
|
145
|
-
transition: "all 0.22s ease",
|
|
146
|
-
overflow: "hidden",
|
|
147
|
-
fontFamily: "system-ui, sans-serif",
|
|
148
|
-
cursor: onClick ? "pointer" : "default",
|
|
149
|
-
border: "1px solid #f1f5f9"
|
|
150
|
-
};
|
|
151
|
-
return /* @__PURE__ */ import_react2.default.createElement(
|
|
152
|
-
"div",
|
|
153
|
-
{
|
|
154
|
-
style,
|
|
155
|
-
onMouseEnter: () => setHovered(true),
|
|
156
|
-
onMouseLeave: () => setHovered(false),
|
|
157
|
-
onClick
|
|
158
|
-
},
|
|
159
|
-
image && /* @__PURE__ */ import_react2.default.createElement("div", { style: { width: "100%", height: "180px", overflow: "hidden", position: "relative" } }, /* @__PURE__ */ import_react2.default.createElement(
|
|
160
|
-
"img",
|
|
161
|
-
{
|
|
162
|
-
src: image,
|
|
163
|
-
alt: title,
|
|
164
|
-
style: {
|
|
165
|
-
width: "100%",
|
|
166
|
-
height: "100%",
|
|
167
|
-
objectFit: "cover",
|
|
168
|
-
transform: hovered ? "scale(1.04)" : "scale(1)",
|
|
169
|
-
transition: "transform 0.35s ease"
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
), badge && /* @__PURE__ */ import_react2.default.createElement("span", { style: {
|
|
173
|
-
position: "absolute",
|
|
174
|
-
top: "12px",
|
|
175
|
-
left: "12px",
|
|
176
|
-
background: badgeColor,
|
|
177
|
-
color: "#fff",
|
|
178
|
-
fontSize: "11px",
|
|
179
|
-
fontWeight: 700,
|
|
180
|
-
letterSpacing: "0.06em",
|
|
181
|
-
textTransform: "uppercase",
|
|
182
|
-
padding: "4px 10px",
|
|
183
|
-
borderRadius: "99px"
|
|
184
|
-
} }, badge)),
|
|
185
|
-
/* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: "20px 20px 16px" } }, !image && badge && /* @__PURE__ */ import_react2.default.createElement("span", { style: {
|
|
186
|
-
display: "inline-block",
|
|
187
|
-
background: badgeColor + "18",
|
|
188
|
-
color: badgeColor,
|
|
189
|
-
fontSize: "11px",
|
|
190
|
-
fontWeight: 700,
|
|
191
|
-
letterSpacing: "0.06em",
|
|
192
|
-
textTransform: "uppercase",
|
|
193
|
-
padding: "3px 10px",
|
|
194
|
-
borderRadius: "99px",
|
|
195
|
-
marginBottom: "10px"
|
|
196
|
-
} }, badge), /* @__PURE__ */ import_react2.default.createElement("h3", { style: { margin: "0 0 8px", fontSize: "17px", fontWeight: 700, color: "#0f172a", lineHeight: 1.3 } }, title), /* @__PURE__ */ import_react2.default.createElement("p", { style: { margin: 0, fontSize: "14px", color: "#64748b", lineHeight: 1.6 } }, description)),
|
|
197
|
-
(actions.length > 0 || true) && /* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: "0 20px 18px", display: "flex", alignItems: "center", gap: "10px" } }, actions.map((action, i) => /* @__PURE__ */ import_react2.default.createElement(ActionButton, { key: i, ...action, accentColor, primary: i === 0 })), /* @__PURE__ */ import_react2.default.createElement(
|
|
198
|
-
"button",
|
|
199
|
-
{
|
|
200
|
-
onClick: (e) => {
|
|
201
|
-
e.stopPropagation();
|
|
202
|
-
setLiked(!liked);
|
|
203
|
-
},
|
|
204
|
-
style: {
|
|
205
|
-
marginLeft: "auto",
|
|
206
|
-
background: liked ? "#fef2f2" : "#f8fafc",
|
|
207
|
-
border: "none",
|
|
208
|
-
borderRadius: "8px",
|
|
209
|
-
padding: "8px 10px",
|
|
210
|
-
cursor: "pointer",
|
|
211
|
-
fontSize: "16px",
|
|
212
|
-
transition: "all 0.15s",
|
|
213
|
-
transform: liked ? "scale(1.15)" : "scale(1)"
|
|
214
|
-
},
|
|
215
|
-
title: liked ? "Unlike" : "Like"
|
|
216
|
-
},
|
|
217
|
-
liked ? "\u2764\uFE0F" : "\u{1F90D}"
|
|
218
|
-
)),
|
|
219
|
-
footer && /* @__PURE__ */ import_react2.default.createElement("div", { style: {
|
|
220
|
-
borderTop: "1px solid #f1f5f9",
|
|
221
|
-
padding: "12px 20px",
|
|
222
|
-
fontSize: "12px",
|
|
223
|
-
color: "#94a3b8",
|
|
224
|
-
display: "flex",
|
|
225
|
-
alignItems: "center",
|
|
226
|
-
gap: "6px"
|
|
227
|
-
} }, footer)
|
|
228
|
-
);
|
|
229
|
-
};
|
|
230
|
-
var ActionButton = ({ label = "Action", onClick = () => {
|
|
231
|
-
}, accentColor = "#6366f1", primary = false }) => {
|
|
232
|
-
const [hovered, setHovered] = (0, import_react2.useState)(false);
|
|
233
|
-
return /* @__PURE__ */ import_react2.default.createElement(
|
|
234
|
-
"button",
|
|
235
|
-
{
|
|
236
|
-
onClick: (e) => {
|
|
237
|
-
e.stopPropagation();
|
|
238
|
-
onClick();
|
|
239
|
-
},
|
|
240
|
-
onMouseEnter: () => setHovered(true),
|
|
241
|
-
onMouseLeave: () => setHovered(false),
|
|
242
|
-
style: {
|
|
243
|
-
padding: "8px 18px",
|
|
244
|
-
borderRadius: "8px",
|
|
245
|
-
fontSize: "13px",
|
|
246
|
-
fontWeight: 600,
|
|
247
|
-
cursor: "pointer",
|
|
248
|
-
transition: "all 0.15s",
|
|
249
|
-
background: primary ? hovered ? shadeColor2(accentColor, -15) : accentColor : hovered ? accentColor + "12" : "transparent",
|
|
250
|
-
color: primary ? "#fff" : accentColor,
|
|
251
|
-
border: primary ? "none" : `1.5px solid ${accentColor}`,
|
|
252
|
-
boxShadow: primary && !hovered ? `0 3px 10px ${accentColor}40` : "none"
|
|
253
|
-
}
|
|
254
|
-
},
|
|
255
|
-
label
|
|
256
|
-
);
|
|
257
|
-
};
|
|
258
|
-
function shadeColor2(hex, percent) {
|
|
259
|
-
const num = parseInt(hex.replace("#", ""), 16);
|
|
260
|
-
const r = Math.min(255, Math.max(0, (num >> 16) + percent));
|
|
261
|
-
const g = Math.min(255, Math.max(0, (num >> 8 & 255) + percent));
|
|
262
|
-
const b = Math.min(255, Math.max(0, (num & 255) + percent));
|
|
263
|
-
return `rgb(${r},${g},${b})`;
|
|
264
|
-
}
|
|
265
|
-
|
|
266
122
|
// src/components/EcommerceCard/EcommerceCard.jsx
|
|
267
|
-
var
|
|
123
|
+
var import_react2 = __toESM(require("react"));
|
|
268
124
|
var EcommerceCard = ({
|
|
269
125
|
image = "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=600&q=80",
|
|
270
126
|
title = "Wireless Headphones",
|
|
@@ -279,8 +135,8 @@ var EcommerceCard = ({
|
|
|
279
135
|
onAddToCart = () => {
|
|
280
136
|
}
|
|
281
137
|
}) => {
|
|
282
|
-
const [hovered, setHovered] = (0,
|
|
283
|
-
const [wishlisted, setWishlisted] = (0,
|
|
138
|
+
const [hovered, setHovered] = (0, import_react2.useState)(false);
|
|
139
|
+
const [wishlisted, setWishlisted] = (0, import_react2.useState)(false);
|
|
284
140
|
const alpha = (hex, op) => {
|
|
285
141
|
const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
|
|
286
142
|
return "rgba(" + r + "," + g + "," + b + "," + op + ")";
|
|
@@ -292,21 +148,21 @@ var EcommerceCard = ({
|
|
|
292
148
|
for (let i = 1; i <= 5; i++) {
|
|
293
149
|
if (i <= fullStars) {
|
|
294
150
|
stars.push(
|
|
295
|
-
/* @__PURE__ */
|
|
151
|
+
/* @__PURE__ */ import_react2.default.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ import_react2.default.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }))
|
|
296
152
|
);
|
|
297
153
|
} else if (i === fullStars + 1 && hasHalfStar) {
|
|
298
154
|
stars.push(
|
|
299
|
-
/* @__PURE__ */
|
|
155
|
+
/* @__PURE__ */ import_react2.default.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ import_react2.default.createElement("defs", null, /* @__PURE__ */ import_react2.default.createElement("linearGradient", { id: "half", x1: "0", x2: "100%", y1: "0", y2: "0" }, /* @__PURE__ */ import_react2.default.createElement("stop", { offset: "50%", stopColor: "#fbbf24" }), /* @__PURE__ */ import_react2.default.createElement("stop", { offset: "50%", stopColor: "rgba(255,255,255,0.1)" }))), /* @__PURE__ */ import_react2.default.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2", fill: "url(#half)" }))
|
|
300
156
|
);
|
|
301
157
|
} else {
|
|
302
158
|
stars.push(
|
|
303
|
-
/* @__PURE__ */
|
|
159
|
+
/* @__PURE__ */ import_react2.default.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "rgba(255,255,255,0.1)", stroke: "none" }, /* @__PURE__ */ import_react2.default.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }))
|
|
304
160
|
);
|
|
305
161
|
}
|
|
306
162
|
}
|
|
307
163
|
return stars;
|
|
308
164
|
};
|
|
309
|
-
return /* @__PURE__ */
|
|
165
|
+
return /* @__PURE__ */ import_react2.default.createElement(
|
|
310
166
|
"div",
|
|
311
167
|
{
|
|
312
168
|
onMouseEnter: () => setHovered(true),
|
|
@@ -323,7 +179,7 @@ var EcommerceCard = ({
|
|
|
323
179
|
boxShadow: hovered ? "0 12px 30px rgba(0,0,0,0.4)" : "0 4px 16px rgba(0,0,0,0.3)"
|
|
324
180
|
}
|
|
325
181
|
},
|
|
326
|
-
/* @__PURE__ */
|
|
182
|
+
/* @__PURE__ */ import_react2.default.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ import_react2.default.createElement(
|
|
327
183
|
"img",
|
|
328
184
|
{
|
|
329
185
|
src: image,
|
|
@@ -336,7 +192,7 @@ var EcommerceCard = ({
|
|
|
336
192
|
transform: hovered ? "scale(1.05)" : "scale(1)"
|
|
337
193
|
}
|
|
338
194
|
}
|
|
339
|
-
), badge && /* @__PURE__ */
|
|
195
|
+
), badge && /* @__PURE__ */ import_react2.default.createElement("div", { style: {
|
|
340
196
|
position: "absolute",
|
|
341
197
|
top: "10px",
|
|
342
198
|
left: "10px",
|
|
@@ -348,7 +204,7 @@ var EcommerceCard = ({
|
|
|
348
204
|
color: "#fff",
|
|
349
205
|
textTransform: "uppercase",
|
|
350
206
|
letterSpacing: "0.5px"
|
|
351
|
-
} }, badge), /* @__PURE__ */
|
|
207
|
+
} }, badge), /* @__PURE__ */ import_react2.default.createElement(
|
|
352
208
|
"button",
|
|
353
209
|
{
|
|
354
210
|
onClick: () => setWishlisted(!wishlisted),
|
|
@@ -367,7 +223,7 @@ var EcommerceCard = ({
|
|
|
367
223
|
cursor: "pointer"
|
|
368
224
|
}
|
|
369
225
|
},
|
|
370
|
-
/* @__PURE__ */
|
|
226
|
+
/* @__PURE__ */ import_react2.default.createElement(
|
|
371
227
|
"svg",
|
|
372
228
|
{
|
|
373
229
|
width: "16",
|
|
@@ -377,38 +233,38 @@ var EcommerceCard = ({
|
|
|
377
233
|
stroke: wishlisted ? "#ef4444" : "#fff",
|
|
378
234
|
strokeWidth: "2"
|
|
379
235
|
},
|
|
380
|
-
/* @__PURE__ */
|
|
236
|
+
/* @__PURE__ */ import_react2.default.createElement("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })
|
|
381
237
|
)
|
|
382
238
|
)),
|
|
383
|
-
/* @__PURE__ */
|
|
239
|
+
/* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: "16px" } }, /* @__PURE__ */ import_react2.default.createElement("h3", { style: {
|
|
384
240
|
fontSize: "16px",
|
|
385
241
|
fontWeight: "700",
|
|
386
242
|
color: "#fff",
|
|
387
243
|
margin: "0 0 8px",
|
|
388
244
|
lineHeight: 1.4
|
|
389
|
-
} }, title), /* @__PURE__ */
|
|
245
|
+
} }, title), /* @__PURE__ */ import_react2.default.createElement("div", { style: {
|
|
390
246
|
display: "flex",
|
|
391
247
|
alignItems: "center",
|
|
392
248
|
gap: "6px",
|
|
393
249
|
marginBottom: "12px"
|
|
394
|
-
} }, /* @__PURE__ */
|
|
250
|
+
} }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex" } }, renderStars()), /* @__PURE__ */ import_react2.default.createElement("span", { style: {
|
|
395
251
|
fontSize: "12px",
|
|
396
252
|
color: "rgba(255,255,255,0.45)"
|
|
397
|
-
} }, "(", reviewCount, ")")), /* @__PURE__ */
|
|
253
|
+
} }, "(", reviewCount, ")")), /* @__PURE__ */ import_react2.default.createElement("div", { style: {
|
|
398
254
|
display: "flex",
|
|
399
255
|
alignItems: "center",
|
|
400
256
|
gap: "10px",
|
|
401
257
|
marginBottom: "16px"
|
|
402
|
-
} }, /* @__PURE__ */
|
|
258
|
+
} }, /* @__PURE__ */ import_react2.default.createElement("span", { style: {
|
|
403
259
|
fontSize: "20px",
|
|
404
260
|
fontWeight: "800",
|
|
405
261
|
color: "#fff"
|
|
406
|
-
} }, currency, price.toFixed(2)), discount > 0 && /* @__PURE__ */
|
|
262
|
+
} }, currency, price.toFixed(2)), discount > 0 && /* @__PURE__ */ import_react2.default.createElement("span", { style: {
|
|
407
263
|
fontSize: "14px",
|
|
408
264
|
fontWeight: "500",
|
|
409
265
|
color: "#86efac",
|
|
410
266
|
textDecoration: "line-through"
|
|
411
|
-
} }, currency, (price + price * discount / 100).toFixed(2))), /* @__PURE__ */
|
|
267
|
+
} }, currency, (price + price * discount / 100).toFixed(2))), /* @__PURE__ */ import_react2.default.createElement(
|
|
412
268
|
"button",
|
|
413
269
|
{
|
|
414
270
|
onClick: onAddToCart,
|
|
@@ -429,14 +285,14 @@ var EcommerceCard = ({
|
|
|
429
285
|
gap: "8px"
|
|
430
286
|
}
|
|
431
287
|
},
|
|
432
|
-
/* @__PURE__ */
|
|
288
|
+
/* @__PURE__ */ import_react2.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react2.default.createElement("circle", { cx: "9", cy: "21", r: "1" }), /* @__PURE__ */ import_react2.default.createElement("circle", { cx: "20", cy: "21", r: "1" }), /* @__PURE__ */ import_react2.default.createElement("path", { d: "M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" })),
|
|
433
289
|
"Add to Cart"
|
|
434
290
|
))
|
|
435
291
|
);
|
|
436
292
|
};
|
|
437
293
|
|
|
438
294
|
// src/components/ProfileCard/ProfileCard.jsx
|
|
439
|
-
var
|
|
295
|
+
var import_react3 = __toESM(require("react"));
|
|
440
296
|
var ProfileCard = ({
|
|
441
297
|
name = "John Doe",
|
|
442
298
|
bio = "Software Engineer | Tech Enthusiast",
|
|
@@ -452,12 +308,11 @@ var ProfileCard = ({
|
|
|
452
308
|
const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
|
|
453
309
|
return "rgba(" + r + "," + g + "," + b + "," + op + ")";
|
|
454
310
|
};
|
|
455
|
-
return /* @__PURE__ */
|
|
311
|
+
return /* @__PURE__ */ import_react3.default.createElement("div", { style: { background: bg, borderRadius: "20px", padding: "24px", width: "280px", color: "#fff", fontFamily: "system-ui,sans-serif", boxShadow: "0 10px 40px rgba(0,0,0,0.5)", border: "1px solid " + alpha(accent, 0.25), position: "relative", overflow: "hidden" } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: { width: "80px", height: "80px", borderRadius: "50%", overflow: "hidden", border: "3px solid " + alpha(accent, 0.3) } }, /* @__PURE__ */ import_react3.default.createElement("img", { src: avatar, alt: name, style: { width: "100%", height: "100%", objectFit: "cover" } })), /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: "18px", fontWeight: "700", color: "#fff" } }, name), /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", textAlign: "center" } }, bio), /* @__PURE__ */ import_react3.default.createElement("div", { style: { display: "flex", gap: "12px", marginTop: "12px" } }, /* @__PURE__ */ import_react3.default.createElement("button", { onClick: onFollowClick, style: { padding: "8px 16px", borderRadius: "8px", border: "none", background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")", color: "#fff", fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" } }, "Follow"), /* @__PURE__ */ import_react3.default.createElement("button", { onClick: onMessageClick, style: { padding: "8px 16px", borderRadius: "8px", border: "1px solid " + alpha(accent, 0.3), background: "transparent", color: accent, fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" } }, "Message"))));
|
|
456
312
|
};
|
|
457
313
|
// Annotate the CommonJS export names for ESM import in node:
|
|
458
314
|
0 && (module.exports = {
|
|
459
315
|
Button,
|
|
460
|
-
Card,
|
|
461
316
|
EcommerceCard,
|
|
462
317
|
ProfileCard
|
|
463
318
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -82,151 +82,8 @@ function shadeColor(hex, percent) {
|
|
|
82
82
|
return `rgb(${r},${g},${b})`;
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
// src/components/Card/Card.jsx
|
|
86
|
-
import React2, { useState as useState2 } from "react";
|
|
87
|
-
var Card = ({
|
|
88
|
-
title = "Card Title",
|
|
89
|
-
description = "This is a simple, reusable card component you can customize with props.",
|
|
90
|
-
image = null,
|
|
91
|
-
badge = null,
|
|
92
|
-
badgeColor = "#6366f1",
|
|
93
|
-
accentColor = "#6366f1",
|
|
94
|
-
actions = [],
|
|
95
|
-
footer = null,
|
|
96
|
-
width = "320px",
|
|
97
|
-
onClick = null
|
|
98
|
-
}) => {
|
|
99
|
-
const [hovered, setHovered] = useState2(false);
|
|
100
|
-
const [liked, setLiked] = useState2(false);
|
|
101
|
-
const style = {
|
|
102
|
-
width,
|
|
103
|
-
borderRadius: "16px",
|
|
104
|
-
background: "#ffffff",
|
|
105
|
-
boxShadow: hovered ? "0 16px 48px rgba(0,0,0,0.13)" : "0 4px 20px rgba(0,0,0,0.07)",
|
|
106
|
-
transform: hovered ? "translateY(-4px)" : "translateY(0)",
|
|
107
|
-
transition: "all 0.22s ease",
|
|
108
|
-
overflow: "hidden",
|
|
109
|
-
fontFamily: "system-ui, sans-serif",
|
|
110
|
-
cursor: onClick ? "pointer" : "default",
|
|
111
|
-
border: "1px solid #f1f5f9"
|
|
112
|
-
};
|
|
113
|
-
return /* @__PURE__ */ React2.createElement(
|
|
114
|
-
"div",
|
|
115
|
-
{
|
|
116
|
-
style,
|
|
117
|
-
onMouseEnter: () => setHovered(true),
|
|
118
|
-
onMouseLeave: () => setHovered(false),
|
|
119
|
-
onClick
|
|
120
|
-
},
|
|
121
|
-
image && /* @__PURE__ */ React2.createElement("div", { style: { width: "100%", height: "180px", overflow: "hidden", position: "relative" } }, /* @__PURE__ */ React2.createElement(
|
|
122
|
-
"img",
|
|
123
|
-
{
|
|
124
|
-
src: image,
|
|
125
|
-
alt: title,
|
|
126
|
-
style: {
|
|
127
|
-
width: "100%",
|
|
128
|
-
height: "100%",
|
|
129
|
-
objectFit: "cover",
|
|
130
|
-
transform: hovered ? "scale(1.04)" : "scale(1)",
|
|
131
|
-
transition: "transform 0.35s ease"
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
), badge && /* @__PURE__ */ React2.createElement("span", { style: {
|
|
135
|
-
position: "absolute",
|
|
136
|
-
top: "12px",
|
|
137
|
-
left: "12px",
|
|
138
|
-
background: badgeColor,
|
|
139
|
-
color: "#fff",
|
|
140
|
-
fontSize: "11px",
|
|
141
|
-
fontWeight: 700,
|
|
142
|
-
letterSpacing: "0.06em",
|
|
143
|
-
textTransform: "uppercase",
|
|
144
|
-
padding: "4px 10px",
|
|
145
|
-
borderRadius: "99px"
|
|
146
|
-
} }, badge)),
|
|
147
|
-
/* @__PURE__ */ React2.createElement("div", { style: { padding: "20px 20px 16px" } }, !image && badge && /* @__PURE__ */ React2.createElement("span", { style: {
|
|
148
|
-
display: "inline-block",
|
|
149
|
-
background: badgeColor + "18",
|
|
150
|
-
color: badgeColor,
|
|
151
|
-
fontSize: "11px",
|
|
152
|
-
fontWeight: 700,
|
|
153
|
-
letterSpacing: "0.06em",
|
|
154
|
-
textTransform: "uppercase",
|
|
155
|
-
padding: "3px 10px",
|
|
156
|
-
borderRadius: "99px",
|
|
157
|
-
marginBottom: "10px"
|
|
158
|
-
} }, badge), /* @__PURE__ */ React2.createElement("h3", { style: { margin: "0 0 8px", fontSize: "17px", fontWeight: 700, color: "#0f172a", lineHeight: 1.3 } }, title), /* @__PURE__ */ React2.createElement("p", { style: { margin: 0, fontSize: "14px", color: "#64748b", lineHeight: 1.6 } }, description)),
|
|
159
|
-
(actions.length > 0 || true) && /* @__PURE__ */ React2.createElement("div", { style: { padding: "0 20px 18px", display: "flex", alignItems: "center", gap: "10px" } }, actions.map((action, i) => /* @__PURE__ */ React2.createElement(ActionButton, { key: i, ...action, accentColor, primary: i === 0 })), /* @__PURE__ */ React2.createElement(
|
|
160
|
-
"button",
|
|
161
|
-
{
|
|
162
|
-
onClick: (e) => {
|
|
163
|
-
e.stopPropagation();
|
|
164
|
-
setLiked(!liked);
|
|
165
|
-
},
|
|
166
|
-
style: {
|
|
167
|
-
marginLeft: "auto",
|
|
168
|
-
background: liked ? "#fef2f2" : "#f8fafc",
|
|
169
|
-
border: "none",
|
|
170
|
-
borderRadius: "8px",
|
|
171
|
-
padding: "8px 10px",
|
|
172
|
-
cursor: "pointer",
|
|
173
|
-
fontSize: "16px",
|
|
174
|
-
transition: "all 0.15s",
|
|
175
|
-
transform: liked ? "scale(1.15)" : "scale(1)"
|
|
176
|
-
},
|
|
177
|
-
title: liked ? "Unlike" : "Like"
|
|
178
|
-
},
|
|
179
|
-
liked ? "\u2764\uFE0F" : "\u{1F90D}"
|
|
180
|
-
)),
|
|
181
|
-
footer && /* @__PURE__ */ React2.createElement("div", { style: {
|
|
182
|
-
borderTop: "1px solid #f1f5f9",
|
|
183
|
-
padding: "12px 20px",
|
|
184
|
-
fontSize: "12px",
|
|
185
|
-
color: "#94a3b8",
|
|
186
|
-
display: "flex",
|
|
187
|
-
alignItems: "center",
|
|
188
|
-
gap: "6px"
|
|
189
|
-
} }, footer)
|
|
190
|
-
);
|
|
191
|
-
};
|
|
192
|
-
var ActionButton = ({ label = "Action", onClick = () => {
|
|
193
|
-
}, accentColor = "#6366f1", primary = false }) => {
|
|
194
|
-
const [hovered, setHovered] = useState2(false);
|
|
195
|
-
return /* @__PURE__ */ React2.createElement(
|
|
196
|
-
"button",
|
|
197
|
-
{
|
|
198
|
-
onClick: (e) => {
|
|
199
|
-
e.stopPropagation();
|
|
200
|
-
onClick();
|
|
201
|
-
},
|
|
202
|
-
onMouseEnter: () => setHovered(true),
|
|
203
|
-
onMouseLeave: () => setHovered(false),
|
|
204
|
-
style: {
|
|
205
|
-
padding: "8px 18px",
|
|
206
|
-
borderRadius: "8px",
|
|
207
|
-
fontSize: "13px",
|
|
208
|
-
fontWeight: 600,
|
|
209
|
-
cursor: "pointer",
|
|
210
|
-
transition: "all 0.15s",
|
|
211
|
-
background: primary ? hovered ? shadeColor2(accentColor, -15) : accentColor : hovered ? accentColor + "12" : "transparent",
|
|
212
|
-
color: primary ? "#fff" : accentColor,
|
|
213
|
-
border: primary ? "none" : `1.5px solid ${accentColor}`,
|
|
214
|
-
boxShadow: primary && !hovered ? `0 3px 10px ${accentColor}40` : "none"
|
|
215
|
-
}
|
|
216
|
-
},
|
|
217
|
-
label
|
|
218
|
-
);
|
|
219
|
-
};
|
|
220
|
-
function shadeColor2(hex, percent) {
|
|
221
|
-
const num = parseInt(hex.replace("#", ""), 16);
|
|
222
|
-
const r = Math.min(255, Math.max(0, (num >> 16) + percent));
|
|
223
|
-
const g = Math.min(255, Math.max(0, (num >> 8 & 255) + percent));
|
|
224
|
-
const b = Math.min(255, Math.max(0, (num & 255) + percent));
|
|
225
|
-
return `rgb(${r},${g},${b})`;
|
|
226
|
-
}
|
|
227
|
-
|
|
228
85
|
// src/components/EcommerceCard/EcommerceCard.jsx
|
|
229
|
-
import
|
|
86
|
+
import React2, { useState as useState2 } from "react";
|
|
230
87
|
var EcommerceCard = ({
|
|
231
88
|
image = "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=600&q=80",
|
|
232
89
|
title = "Wireless Headphones",
|
|
@@ -241,8 +98,8 @@ var EcommerceCard = ({
|
|
|
241
98
|
onAddToCart = () => {
|
|
242
99
|
}
|
|
243
100
|
}) => {
|
|
244
|
-
const [hovered, setHovered] =
|
|
245
|
-
const [wishlisted, setWishlisted] =
|
|
101
|
+
const [hovered, setHovered] = useState2(false);
|
|
102
|
+
const [wishlisted, setWishlisted] = useState2(false);
|
|
246
103
|
const alpha = (hex, op) => {
|
|
247
104
|
const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
|
|
248
105
|
return "rgba(" + r + "," + g + "," + b + "," + op + ")";
|
|
@@ -254,21 +111,21 @@ var EcommerceCard = ({
|
|
|
254
111
|
for (let i = 1; i <= 5; i++) {
|
|
255
112
|
if (i <= fullStars) {
|
|
256
113
|
stars.push(
|
|
257
|
-
/* @__PURE__ */
|
|
114
|
+
/* @__PURE__ */ React2.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ React2.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }))
|
|
258
115
|
);
|
|
259
116
|
} else if (i === fullStars + 1 && hasHalfStar) {
|
|
260
117
|
stars.push(
|
|
261
|
-
/* @__PURE__ */
|
|
118
|
+
/* @__PURE__ */ React2.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ React2.createElement("defs", null, /* @__PURE__ */ React2.createElement("linearGradient", { id: "half", x1: "0", x2: "100%", y1: "0", y2: "0" }, /* @__PURE__ */ React2.createElement("stop", { offset: "50%", stopColor: "#fbbf24" }), /* @__PURE__ */ React2.createElement("stop", { offset: "50%", stopColor: "rgba(255,255,255,0.1)" }))), /* @__PURE__ */ React2.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2", fill: "url(#half)" }))
|
|
262
119
|
);
|
|
263
120
|
} else {
|
|
264
121
|
stars.push(
|
|
265
|
-
/* @__PURE__ */
|
|
122
|
+
/* @__PURE__ */ React2.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "rgba(255,255,255,0.1)", stroke: "none" }, /* @__PURE__ */ React2.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }))
|
|
266
123
|
);
|
|
267
124
|
}
|
|
268
125
|
}
|
|
269
126
|
return stars;
|
|
270
127
|
};
|
|
271
|
-
return /* @__PURE__ */
|
|
128
|
+
return /* @__PURE__ */ React2.createElement(
|
|
272
129
|
"div",
|
|
273
130
|
{
|
|
274
131
|
onMouseEnter: () => setHovered(true),
|
|
@@ -285,7 +142,7 @@ var EcommerceCard = ({
|
|
|
285
142
|
boxShadow: hovered ? "0 12px 30px rgba(0,0,0,0.4)" : "0 4px 16px rgba(0,0,0,0.3)"
|
|
286
143
|
}
|
|
287
144
|
},
|
|
288
|
-
/* @__PURE__ */
|
|
145
|
+
/* @__PURE__ */ React2.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React2.createElement(
|
|
289
146
|
"img",
|
|
290
147
|
{
|
|
291
148
|
src: image,
|
|
@@ -298,7 +155,7 @@ var EcommerceCard = ({
|
|
|
298
155
|
transform: hovered ? "scale(1.05)" : "scale(1)"
|
|
299
156
|
}
|
|
300
157
|
}
|
|
301
|
-
), badge && /* @__PURE__ */
|
|
158
|
+
), badge && /* @__PURE__ */ React2.createElement("div", { style: {
|
|
302
159
|
position: "absolute",
|
|
303
160
|
top: "10px",
|
|
304
161
|
left: "10px",
|
|
@@ -310,7 +167,7 @@ var EcommerceCard = ({
|
|
|
310
167
|
color: "#fff",
|
|
311
168
|
textTransform: "uppercase",
|
|
312
169
|
letterSpacing: "0.5px"
|
|
313
|
-
} }, badge), /* @__PURE__ */
|
|
170
|
+
} }, badge), /* @__PURE__ */ React2.createElement(
|
|
314
171
|
"button",
|
|
315
172
|
{
|
|
316
173
|
onClick: () => setWishlisted(!wishlisted),
|
|
@@ -329,7 +186,7 @@ var EcommerceCard = ({
|
|
|
329
186
|
cursor: "pointer"
|
|
330
187
|
}
|
|
331
188
|
},
|
|
332
|
-
/* @__PURE__ */
|
|
189
|
+
/* @__PURE__ */ React2.createElement(
|
|
333
190
|
"svg",
|
|
334
191
|
{
|
|
335
192
|
width: "16",
|
|
@@ -339,38 +196,38 @@ var EcommerceCard = ({
|
|
|
339
196
|
stroke: wishlisted ? "#ef4444" : "#fff",
|
|
340
197
|
strokeWidth: "2"
|
|
341
198
|
},
|
|
342
|
-
/* @__PURE__ */
|
|
199
|
+
/* @__PURE__ */ React2.createElement("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })
|
|
343
200
|
)
|
|
344
201
|
)),
|
|
345
|
-
/* @__PURE__ */
|
|
202
|
+
/* @__PURE__ */ React2.createElement("div", { style: { padding: "16px" } }, /* @__PURE__ */ React2.createElement("h3", { style: {
|
|
346
203
|
fontSize: "16px",
|
|
347
204
|
fontWeight: "700",
|
|
348
205
|
color: "#fff",
|
|
349
206
|
margin: "0 0 8px",
|
|
350
207
|
lineHeight: 1.4
|
|
351
|
-
} }, title), /* @__PURE__ */
|
|
208
|
+
} }, title), /* @__PURE__ */ React2.createElement("div", { style: {
|
|
352
209
|
display: "flex",
|
|
353
210
|
alignItems: "center",
|
|
354
211
|
gap: "6px",
|
|
355
212
|
marginBottom: "12px"
|
|
356
|
-
} }, /* @__PURE__ */
|
|
213
|
+
} }, /* @__PURE__ */ React2.createElement("div", { style: { display: "flex" } }, renderStars()), /* @__PURE__ */ React2.createElement("span", { style: {
|
|
357
214
|
fontSize: "12px",
|
|
358
215
|
color: "rgba(255,255,255,0.45)"
|
|
359
|
-
} }, "(", reviewCount, ")")), /* @__PURE__ */
|
|
216
|
+
} }, "(", reviewCount, ")")), /* @__PURE__ */ React2.createElement("div", { style: {
|
|
360
217
|
display: "flex",
|
|
361
218
|
alignItems: "center",
|
|
362
219
|
gap: "10px",
|
|
363
220
|
marginBottom: "16px"
|
|
364
|
-
} }, /* @__PURE__ */
|
|
221
|
+
} }, /* @__PURE__ */ React2.createElement("span", { style: {
|
|
365
222
|
fontSize: "20px",
|
|
366
223
|
fontWeight: "800",
|
|
367
224
|
color: "#fff"
|
|
368
|
-
} }, currency, price.toFixed(2)), discount > 0 && /* @__PURE__ */
|
|
225
|
+
} }, currency, price.toFixed(2)), discount > 0 && /* @__PURE__ */ React2.createElement("span", { style: {
|
|
369
226
|
fontSize: "14px",
|
|
370
227
|
fontWeight: "500",
|
|
371
228
|
color: "#86efac",
|
|
372
229
|
textDecoration: "line-through"
|
|
373
|
-
} }, currency, (price + price * discount / 100).toFixed(2))), /* @__PURE__ */
|
|
230
|
+
} }, currency, (price + price * discount / 100).toFixed(2))), /* @__PURE__ */ React2.createElement(
|
|
374
231
|
"button",
|
|
375
232
|
{
|
|
376
233
|
onClick: onAddToCart,
|
|
@@ -391,14 +248,14 @@ var EcommerceCard = ({
|
|
|
391
248
|
gap: "8px"
|
|
392
249
|
}
|
|
393
250
|
},
|
|
394
|
-
/* @__PURE__ */
|
|
251
|
+
/* @__PURE__ */ React2.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React2.createElement("circle", { cx: "9", cy: "21", r: "1" }), /* @__PURE__ */ React2.createElement("circle", { cx: "20", cy: "21", r: "1" }), /* @__PURE__ */ React2.createElement("path", { d: "M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" })),
|
|
395
252
|
"Add to Cart"
|
|
396
253
|
))
|
|
397
254
|
);
|
|
398
255
|
};
|
|
399
256
|
|
|
400
257
|
// src/components/ProfileCard/ProfileCard.jsx
|
|
401
|
-
import
|
|
258
|
+
import React3 from "react";
|
|
402
259
|
var ProfileCard = ({
|
|
403
260
|
name = "John Doe",
|
|
404
261
|
bio = "Software Engineer | Tech Enthusiast",
|
|
@@ -414,11 +271,10 @@ var ProfileCard = ({
|
|
|
414
271
|
const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
|
|
415
272
|
return "rgba(" + r + "," + g + "," + b + "," + op + ")";
|
|
416
273
|
};
|
|
417
|
-
return /* @__PURE__ */
|
|
274
|
+
return /* @__PURE__ */ React3.createElement("div", { style: { background: bg, borderRadius: "20px", padding: "24px", width: "280px", color: "#fff", fontFamily: "system-ui,sans-serif", boxShadow: "0 10px 40px rgba(0,0,0,0.5)", border: "1px solid " + alpha(accent, 0.25), position: "relative", overflow: "hidden" } }, /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ React3.createElement("div", { style: { width: "80px", height: "80px", borderRadius: "50%", overflow: "hidden", border: "3px solid " + alpha(accent, 0.3) } }, /* @__PURE__ */ React3.createElement("img", { src: avatar, alt: name, style: { width: "100%", height: "100%", objectFit: "cover" } })), /* @__PURE__ */ React3.createElement("div", { style: { fontSize: "18px", fontWeight: "700", color: "#fff" } }, name), /* @__PURE__ */ React3.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", textAlign: "center" } }, bio), /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", gap: "12px", marginTop: "12px" } }, /* @__PURE__ */ React3.createElement("button", { onClick: onFollowClick, style: { padding: "8px 16px", borderRadius: "8px", border: "none", background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")", color: "#fff", fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" } }, "Follow"), /* @__PURE__ */ React3.createElement("button", { onClick: onMessageClick, style: { padding: "8px 16px", borderRadius: "8px", border: "1px solid " + alpha(accent, 0.3), background: "transparent", color: accent, fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" } }, "Message"))));
|
|
418
275
|
};
|
|
419
276
|
export {
|
|
420
277
|
Button,
|
|
421
|
-
Card,
|
|
422
278
|
EcommerceCard,
|
|
423
279
|
ProfileCard
|
|
424
280
|
};
|