virtual-ui-lib 1.0.67 → 1.0.69
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 +654 -872
- package/dist/index.mjs +650 -855
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -29,608 +29,25 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
29
29
|
// src/index.js
|
|
30
30
|
var index_exports = {};
|
|
31
31
|
__export(index_exports, {
|
|
32
|
-
Avatar: () => Avatar,
|
|
33
32
|
AvatarCard: () => AvatarCard,
|
|
34
33
|
BackgoundImageSlider: () => BackgoundImageSlider,
|
|
35
34
|
Charts: () => Charts,
|
|
36
|
-
CodeBlock: () => CodeBlock,
|
|
37
|
-
CustomInputField: () => CustomInputField,
|
|
38
|
-
DividerLine: () => DividerLine,
|
|
39
|
-
FileUpload: () => FileUpload,
|
|
40
35
|
Footer: () => Footer,
|
|
41
36
|
ImageCard: () => ImageCard,
|
|
42
37
|
ImageSlider: () => ImageSlider,
|
|
38
|
+
InvoiceCard: () => InvoiceCard,
|
|
43
39
|
Loader: () => Loader,
|
|
44
|
-
LoadingSpinner: () => LoadingSpinner,
|
|
45
40
|
Navbar: () => Navbar,
|
|
46
41
|
NotificationToast: () => NotificationToast,
|
|
47
|
-
|
|
42
|
+
OTPInput: () => OTPInput,
|
|
48
43
|
PageLoader: () => PageLoader,
|
|
49
44
|
PricingCard: () => PricingCard,
|
|
50
|
-
|
|
51
|
-
SearchBar: () => SearchBar,
|
|
52
|
-
Sidebar: () => Sidebar,
|
|
53
|
-
SkeletonLoader: () => SkeletonLoader,
|
|
54
|
-
SmartButton: () => SmartButton,
|
|
55
|
-
StatCard: () => StatCard,
|
|
56
|
-
Tabs: () => Tabs,
|
|
57
|
-
TextArea: () => TextArea,
|
|
58
|
-
ToastNotification: () => ToastNotification
|
|
45
|
+
Sidebar: () => Sidebar
|
|
59
46
|
});
|
|
60
47
|
module.exports = __toCommonJS(index_exports);
|
|
61
48
|
|
|
62
|
-
// src/components/ToastNotification/ToastNotification.jsx
|
|
63
|
-
var import_react = __toESM(require("react"));
|
|
64
|
-
var ToastNotification = ({
|
|
65
|
-
type = "success",
|
|
66
|
-
title = "Success",
|
|
67
|
-
message = "Your action was successful!",
|
|
68
|
-
duration = 4e3,
|
|
69
|
-
onClose
|
|
70
|
-
}) => {
|
|
71
|
-
const [visible, setVisible] = (0, import_react.useState)(false);
|
|
72
|
-
const [progress, setProgress] = (0, import_react.useState)(0);
|
|
73
|
-
(0, import_react.useEffect)(() => {
|
|
74
|
-
setVisible(true);
|
|
75
|
-
const interval = setInterval(() => {
|
|
76
|
-
setProgress((prev) => {
|
|
77
|
-
if (prev >= 100) {
|
|
78
|
-
clearInterval(interval);
|
|
79
|
-
onClose();
|
|
80
|
-
return 100;
|
|
81
|
-
}
|
|
82
|
-
return prev + 100 / (duration / 100);
|
|
83
|
-
});
|
|
84
|
-
}, 100);
|
|
85
|
-
return () => clearInterval(interval);
|
|
86
|
-
}, [duration, onClose]);
|
|
87
|
-
const getStyles = () => {
|
|
88
|
-
let bg, icon;
|
|
89
|
-
switch (type) {
|
|
90
|
-
case "success":
|
|
91
|
-
bg = "#059669";
|
|
92
|
-
icon = "\u2713";
|
|
93
|
-
break;
|
|
94
|
-
case "error":
|
|
95
|
-
bg = "#dc2626";
|
|
96
|
-
icon = "\u2716";
|
|
97
|
-
break;
|
|
98
|
-
case "warning":
|
|
99
|
-
bg = "#eab308";
|
|
100
|
-
icon = "\u26A0\uFE0F";
|
|
101
|
-
break;
|
|
102
|
-
case "info":
|
|
103
|
-
bg = "#2563eb";
|
|
104
|
-
icon = "\u2139\uFE0F";
|
|
105
|
-
break;
|
|
106
|
-
default:
|
|
107
|
-
bg = "#059669";
|
|
108
|
-
icon = "\u2713";
|
|
109
|
-
}
|
|
110
|
-
return { background: bg, icon };
|
|
111
|
-
};
|
|
112
|
-
return /* @__PURE__ */ import_react.default.createElement("div", { style: {
|
|
113
|
-
position: "fixed",
|
|
114
|
-
bottom: "20px",
|
|
115
|
-
right: "20px",
|
|
116
|
-
opacity: visible ? 1 : 0,
|
|
117
|
-
transform: visible ? "translateY(0)" : "translateY(20px)",
|
|
118
|
-
transition: "opacity 0.3s, transform 0.3s",
|
|
119
|
-
background: getStyles().background,
|
|
120
|
-
borderRadius: "12px",
|
|
121
|
-
padding: "16px",
|
|
122
|
-
width: "300px",
|
|
123
|
-
boxShadow: "0 4px 20px rgba(0,0,0,0.2)",
|
|
124
|
-
fontFamily: "system-ui, sans-serif",
|
|
125
|
-
zIndex: 9999
|
|
126
|
-
} }, /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center", marginBottom: "8px" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
|
|
127
|
-
width: "24px",
|
|
128
|
-
height: "24px",
|
|
129
|
-
borderRadius: "50%",
|
|
130
|
-
background: "white",
|
|
131
|
-
display: "flex",
|
|
132
|
-
alignItems: "center",
|
|
133
|
-
justifyContent: "center",
|
|
134
|
-
marginRight: "8px"
|
|
135
|
-
} }, /* @__PURE__ */ import_react.default.createElement("span", { style: { color: getStyles().background, fontSize: "16px" } }, getStyles().icon)), /* @__PURE__ */ import_react.default.createElement("h4", { style: { margin: 0, fontSize: "16px", fontWeight: "600", color: "white" } }, title)), /* @__PURE__ */ import_react.default.createElement("p", { style: { margin: "0 0 12px", fontSize: "14px", color: "#f1f5f9" } }, message), /* @__PURE__ */ import_react.default.createElement("button", { onClick: onClose, style: {
|
|
136
|
-
background: "transparent",
|
|
137
|
-
color: "white",
|
|
138
|
-
border: "none",
|
|
139
|
-
cursor: "pointer",
|
|
140
|
-
fontSize: "14px",
|
|
141
|
-
fontWeight: "600"
|
|
142
|
-
} }, "Close"), /* @__PURE__ */ import_react.default.createElement("div", { style: {
|
|
143
|
-
height: "4px",
|
|
144
|
-
background: "rgba(255, 255, 255, 0.3)",
|
|
145
|
-
borderRadius: "8px",
|
|
146
|
-
overflow: "hidden",
|
|
147
|
-
marginTop: "12px"
|
|
148
|
-
} }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
|
|
149
|
-
width: progress + "%",
|
|
150
|
-
height: "100%",
|
|
151
|
-
background: "white",
|
|
152
|
-
transition: "width 0.1s linear"
|
|
153
|
-
} })));
|
|
154
|
-
};
|
|
155
|
-
|
|
156
|
-
// src/components/StatCard/StatCard.jsx
|
|
157
|
-
var import_react2 = __toESM(require("react"));
|
|
158
|
-
var StatCard = ({
|
|
159
|
-
title = "Revenue",
|
|
160
|
-
metric = 1200,
|
|
161
|
-
change = 15,
|
|
162
|
-
bg = "#0f172a",
|
|
163
|
-
accent = "#059669",
|
|
164
|
-
negativeAccent = "#ef4444",
|
|
165
|
-
radius = "16px"
|
|
166
|
-
}) => {
|
|
167
|
-
const [count, setCount] = (0, import_react2.useState)(0);
|
|
168
|
-
(0, import_react2.useEffect)(() => {
|
|
169
|
-
let countUp = 0;
|
|
170
|
-
const interval = setInterval(() => {
|
|
171
|
-
if (countUp < metric) {
|
|
172
|
-
countUp += Math.ceil(metric / 100);
|
|
173
|
-
setCount(countUp);
|
|
174
|
-
} else {
|
|
175
|
-
clearInterval(interval);
|
|
176
|
-
}
|
|
177
|
-
}, 30);
|
|
178
|
-
return () => clearInterval(interval);
|
|
179
|
-
}, [metric]);
|
|
180
|
-
return /* @__PURE__ */ import_react2.default.createElement("div", { style: { background: bg, borderRadius: radius, padding: "24px", width: "300px", color: "white", boxShadow: "0 10px 30px rgba(0,0,0,0.5)", fontFamily: "system-ui, sans-serif", textAlign: "center" } }, /* @__PURE__ */ import_react2.default.createElement("h3", { style: { margin: "0 0 10px", fontSize: "16px", fontWeight: "600" } }, title), /* @__PURE__ */ import_react2.default.createElement("div", { style: { fontSize: "40px", fontWeight: "700" } }, count), /* @__PURE__ */ import_react2.default.createElement("span", { style: {
|
|
181
|
-
display: "inline-block",
|
|
182
|
-
padding: "5px 12px",
|
|
183
|
-
borderRadius: "10px",
|
|
184
|
-
background: change >= 0 ? accent : negativeAccent,
|
|
185
|
-
color: "white",
|
|
186
|
-
fontSize: "14px",
|
|
187
|
-
margin: "10px 0"
|
|
188
|
-
} }, change >= 0 ? "+" + change + "%" : change + "%"), /* @__PURE__ */ import_react2.default.createElement("svg", { style: { marginTop: "12px" }, width: "100%", height: "30", viewBox: "0 0 100 30", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react2.default.createElement("polyline", { fill: "none", stroke: change >= 0 ? accent : negativeAccent, strokeWidth: "2", points: "0,15 10,10 20,20 30,15 40,22 50,8 60,18 70,15 80,18 90,10 100,15" })));
|
|
189
|
-
};
|
|
190
|
-
|
|
191
|
-
// src/components/OtpInput/OtpInput.jsx
|
|
192
|
-
var import_react3 = __toESM(require("react"));
|
|
193
|
-
var OtpInput = ({
|
|
194
|
-
length = 6,
|
|
195
|
-
boxSize = "48px",
|
|
196
|
-
borderColor = "#7c3aed",
|
|
197
|
-
bgColor = "#1e293b",
|
|
198
|
-
textColor = "#f1f5f9",
|
|
199
|
-
radius = "8px",
|
|
200
|
-
onComplete
|
|
201
|
-
}) => {
|
|
202
|
-
const [otp, setOtp] = (0, import_react3.useState)(Array(length).fill(""));
|
|
203
|
-
const inputsRef = (0, import_react3.useRef)([]);
|
|
204
|
-
const handleChange = (index, value) => {
|
|
205
|
-
if (/\d/.test(value) || value === "") {
|
|
206
|
-
const newOtp = [...otp];
|
|
207
|
-
newOtp[index] = value;
|
|
208
|
-
setOtp(newOtp);
|
|
209
|
-
if (value !== "" && index < length - 1) {
|
|
210
|
-
inputsRef.current[index + 1].focus();
|
|
211
|
-
} else if (value === "" && index > 0) {
|
|
212
|
-
inputsRef.current[index - 1].focus();
|
|
213
|
-
}
|
|
214
|
-
if (newOtp.join("").length === length) {
|
|
215
|
-
onComplete(newOtp.join(""));
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
};
|
|
219
|
-
const handlePaste = (e) => {
|
|
220
|
-
const pastedData = e.clipboardData.getData("text").slice(0, length).split("");
|
|
221
|
-
const newOtp = Array(length).fill("").map((_, index) => pastedData[index] || "");
|
|
222
|
-
setOtp(newOtp);
|
|
223
|
-
if (newOtp.join("").length === length) {
|
|
224
|
-
onComplete(newOtp.join(""));
|
|
225
|
-
}
|
|
226
|
-
e.preventDefault();
|
|
227
|
-
};
|
|
228
|
-
(0, import_react3.useEffect)(() => {
|
|
229
|
-
inputsRef.current[0].focus();
|
|
230
|
-
}, []);
|
|
231
|
-
return /* @__PURE__ */ import_react3.default.createElement("div", { style: { display: "flex", gap: "10px", justifyContent: "center", padding: "20px", background: bgColor, borderRadius: radius, border: "1px solid rgba(255,255,255,0.1)", boxShadow: "0 4px 20px rgba(0,0,0,0.6)" }, onPaste: handlePaste }, otp.map((value, index) => /* @__PURE__ */ import_react3.default.createElement(
|
|
232
|
-
"input",
|
|
233
|
-
{
|
|
234
|
-
key: index,
|
|
235
|
-
ref: (el) => inputsRef.current[index] = el,
|
|
236
|
-
type: "text",
|
|
237
|
-
maxLength: "1",
|
|
238
|
-
value,
|
|
239
|
-
onChange: (e) => handleChange(index, e.target.value),
|
|
240
|
-
onFocus: (e) => e.target.select(),
|
|
241
|
-
onKeyDown: (e) => {
|
|
242
|
-
if (e.key === "Backspace" && !value && index > 0) {
|
|
243
|
-
inputsRef.current[index - 1].focus();
|
|
244
|
-
}
|
|
245
|
-
},
|
|
246
|
-
style: {
|
|
247
|
-
width: boxSize,
|
|
248
|
-
height: boxSize,
|
|
249
|
-
fontSize: "24px",
|
|
250
|
-
textAlign: "center",
|
|
251
|
-
borderRadius: radius,
|
|
252
|
-
border: `2px solid ${borderColor}`,
|
|
253
|
-
background: bgColor,
|
|
254
|
-
color: textColor,
|
|
255
|
-
transition: "border-color 0.2s",
|
|
256
|
-
outline: "none"
|
|
257
|
-
}
|
|
258
|
-
}
|
|
259
|
-
)), otp.join("").length === length && /* @__PURE__ */ import_react3.default.createElement("span", { style: { color: "#4ade80", fontSize: "20px" } }, "\u2705"));
|
|
260
|
-
};
|
|
261
|
-
|
|
262
|
-
// src/components/CodeBlock/CodeBlock.jsx
|
|
263
|
-
var import_react4 = __toESM(require("react"));
|
|
264
|
-
var CodeBlock = ({
|
|
265
|
-
code = "const hello = 'Hello, world!';\nconsole.log(hello);",
|
|
266
|
-
language = "JavaScript",
|
|
267
|
-
filename = "example.js",
|
|
268
|
-
bg = "#0d1117",
|
|
269
|
-
textColor = "#c9d1d9",
|
|
270
|
-
tokenColors = { string: "#a5d6e9", keyword: "#f9bc41", variable: "#a6e22e" },
|
|
271
|
-
showLineNumbers = true,
|
|
272
|
-
wrapWords = false
|
|
273
|
-
}) => {
|
|
274
|
-
const [copied, setCopied] = (0, import_react4.useState)(false);
|
|
275
|
-
const handleCopy = () => {
|
|
276
|
-
navigator.clipboard.writeText(code).then(() => {
|
|
277
|
-
setCopied(true);
|
|
278
|
-
setTimeout(() => setCopied(false), 2e3);
|
|
279
|
-
});
|
|
280
|
-
};
|
|
281
|
-
const formatCode = () => {
|
|
282
|
-
return code.split("\n").map((line, index) => /* @__PURE__ */ import_react4.default.createElement("div", { key: index, style: { display: "flex" } }, showLineNumbers && /* @__PURE__ */ import_react4.default.createElement("span", { style: { marginRight: "10px", color: "#58a6ff" } }, index + 1), /* @__PURE__ */ import_react4.default.createElement("span", { style: { color: tokenColors.string } }, line.replace(/(\'.*?\')/g, (match) => `<span style='color:${tokenColors.string}'>${match}</span>`))));
|
|
283
|
-
};
|
|
284
|
-
return /* @__PURE__ */ import_react4.default.createElement("div", { style: { background: bg, borderRadius: "8px", padding: "16px", fontFamily: "monospace", position: "relative" } }, filename && /* @__PURE__ */ import_react4.default.createElement("div", { style: { color: textColor, fontWeight: "bold", marginBottom: "8px" } }, filename), /* @__PURE__ */ import_react4.default.createElement("div", { style: { overflowX: wrapWords ? "auto" : "hidden", whiteSpace: wrapWords ? "normal" : "pre" } }, formatCode()), /* @__PURE__ */ import_react4.default.createElement("button", { onClick: handleCopy, style: { position: "absolute", top: "10px", right: "10px", background: copied ? "#28a745" : "#58a6ff", color: "white", border: "none", borderRadius: "4px", padding: "8px 12px", cursor: "pointer", fontSize: "14px", marginLeft: "10px" } }, copied ? "\u2713 Copied" : "Copy"), /* @__PURE__ */ import_react4.default.createElement("button", { onClick: () => wrapWords = !wrapWords, style: { position: "absolute", top: "10px", right: "90px", background: "#58a6ff", color: "white", border: "none", borderRadius: "4px", padding: "8px 12px", cursor: "pointer", fontSize: "14px" } }, wrapWords ? "Wrap Off" : "Wrap On"));
|
|
285
|
-
};
|
|
286
|
-
|
|
287
|
-
// src/components/SmartButton/SmartButton.jsx
|
|
288
|
-
var import_react5 = __toESM(require("react"));
|
|
289
|
-
var SmartButton = ({
|
|
290
|
-
buttonText = "Submit",
|
|
291
|
-
isLoading = false,
|
|
292
|
-
isDisabled = false,
|
|
293
|
-
icon = null,
|
|
294
|
-
success = false,
|
|
295
|
-
error = false,
|
|
296
|
-
bg = "#7c3aed",
|
|
297
|
-
textColor = "#fff",
|
|
298
|
-
padding = "12px 20px",
|
|
299
|
-
radius = "8px",
|
|
300
|
-
onClick = () => {
|
|
301
|
-
}
|
|
302
|
-
}) => {
|
|
303
|
-
const bgColor = success ? "#059669" : error ? "#ef4444" : bg;
|
|
304
|
-
const cursorStyle = isDisabled ? "not-allowed" : "pointer";
|
|
305
|
-
return /* @__PURE__ */ import_react5.default.createElement(
|
|
306
|
-
"button",
|
|
307
|
-
{
|
|
308
|
-
onClick: !isDisabled && !isLoading ? onClick : () => {
|
|
309
|
-
},
|
|
310
|
-
disabled: isDisabled,
|
|
311
|
-
style: {
|
|
312
|
-
background: bgColor,
|
|
313
|
-
color: textColor,
|
|
314
|
-
padding,
|
|
315
|
-
borderRadius: radius,
|
|
316
|
-
border: "none",
|
|
317
|
-
cursor: cursorStyle,
|
|
318
|
-
transition: "background 0.3s ease"
|
|
319
|
-
},
|
|
320
|
-
onMouseEnter: (e) => {
|
|
321
|
-
if (!isDisabled && !isLoading) {
|
|
322
|
-
e.currentTarget.style.background = "#6d28d9";
|
|
323
|
-
}
|
|
324
|
-
},
|
|
325
|
-
onMouseLeave: (e) => {
|
|
326
|
-
e.currentTarget.style.background = bgColor;
|
|
327
|
-
}
|
|
328
|
-
},
|
|
329
|
-
isLoading ? /* @__PURE__ */ import_react5.default.createElement("span", null, "Loading...") : /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, icon && /* @__PURE__ */ import_react5.default.createElement("span", { style: { marginRight: "8px" } }, icon), buttonText)
|
|
330
|
-
);
|
|
331
|
-
};
|
|
332
|
-
|
|
333
|
-
// src/components/CustomInputField/CustomInputField.jsx
|
|
334
|
-
var import_react6 = __toESM(require("react"));
|
|
335
|
-
var CustomInputField = ({
|
|
336
|
-
label = "Label",
|
|
337
|
-
placeholder = "Enter text...",
|
|
338
|
-
errorMessage = "",
|
|
339
|
-
helperText = "",
|
|
340
|
-
value = "",
|
|
341
|
-
bg = "#1e293b",
|
|
342
|
-
textColor = "#f1f5f9",
|
|
343
|
-
accent = "#7c3aed",
|
|
344
|
-
padding = "10px",
|
|
345
|
-
radius = "8px",
|
|
346
|
-
onChange = () => {
|
|
347
|
-
}
|
|
348
|
-
}) => {
|
|
349
|
-
const [isFocused, setIsFocused] = (0, import_react6.useState)(false);
|
|
350
|
-
return /* @__PURE__ */ import_react6.default.createElement("div", { style: { margin: "16px 0" } }, /* @__PURE__ */ import_react6.default.createElement("label", { style: { color: textColor, marginBottom: "4px", display: "block" } }, label), /* @__PURE__ */ import_react6.default.createElement(
|
|
351
|
-
"input",
|
|
352
|
-
{
|
|
353
|
-
type: "text",
|
|
354
|
-
value,
|
|
355
|
-
placeholder,
|
|
356
|
-
onFocus: () => setIsFocused(true),
|
|
357
|
-
onBlur: () => setIsFocused(false),
|
|
358
|
-
onChange: (e) => onChange(e.target.value),
|
|
359
|
-
style: {
|
|
360
|
-
background: bg,
|
|
361
|
-
color: textColor,
|
|
362
|
-
padding,
|
|
363
|
-
borderRadius: radius,
|
|
364
|
-
border: isFocused ? `2px solid ${accent}` : "2px solid transparent",
|
|
365
|
-
transition: "border-color 0.3s ease",
|
|
366
|
-
width: "100%"
|
|
367
|
-
}
|
|
368
|
-
}
|
|
369
|
-
), errorMessage && /* @__PURE__ */ import_react6.default.createElement("p", { style: { color: "red", margin: "4px 0 0 0" } }, errorMessage), helperText && /* @__PURE__ */ import_react6.default.createElement("p", { style: { color: textColor, margin: "4px 0 0 0" } }, helperText));
|
|
370
|
-
};
|
|
371
|
-
|
|
372
|
-
// src/components/TextArea/TextArea.jsx
|
|
373
|
-
var import_react7 = __toESM(require("react"));
|
|
374
|
-
var TextArea = ({
|
|
375
|
-
label = "Label",
|
|
376
|
-
placeholder = "Type here...",
|
|
377
|
-
value = "",
|
|
378
|
-
bg = "#1e293b",
|
|
379
|
-
textColor = "#f1f5f9",
|
|
380
|
-
accent = "#2563eb",
|
|
381
|
-
radius = "8px",
|
|
382
|
-
padding = "12px",
|
|
383
|
-
maxLength = 250,
|
|
384
|
-
onChange = () => {
|
|
385
|
-
}
|
|
386
|
-
}) => {
|
|
387
|
-
const [currentValue, setCurrentValue] = (0, import_react7.useState)(value);
|
|
388
|
-
const handleChange = (e) => {
|
|
389
|
-
setCurrentValue(e.target.value);
|
|
390
|
-
onChange(e.target.value);
|
|
391
|
-
};
|
|
392
|
-
return /* @__PURE__ */ import_react7.default.createElement("div", { style: { margin: "16px 0" } }, /* @__PURE__ */ import_react7.default.createElement("label", { style: { color: textColor, marginBottom: "8px", display: "block" } }, label), /* @__PURE__ */ import_react7.default.createElement(
|
|
393
|
-
"textarea",
|
|
394
|
-
{
|
|
395
|
-
value: currentValue,
|
|
396
|
-
placeholder,
|
|
397
|
-
maxLength,
|
|
398
|
-
onChange: handleChange,
|
|
399
|
-
style: {
|
|
400
|
-
background: bg,
|
|
401
|
-
color: textColor,
|
|
402
|
-
padding,
|
|
403
|
-
borderRadius: radius,
|
|
404
|
-
border: `1px solid ${accent}`,
|
|
405
|
-
width: "100%",
|
|
406
|
-
minHeight: "100px",
|
|
407
|
-
resize: "none",
|
|
408
|
-
transition: "border-color 0.3s"
|
|
409
|
-
}
|
|
410
|
-
}
|
|
411
|
-
), /* @__PURE__ */ import_react7.default.createElement("div", { style: { color: textColor, marginTop: "8px" } }, currentValue.length, "/", maxLength));
|
|
412
|
-
};
|
|
413
|
-
|
|
414
|
-
// src/components/SearchBar/SearchBar.jsx
|
|
415
|
-
var import_react8 = __toESM(require("react"));
|
|
416
|
-
var SearchBar = ({
|
|
417
|
-
placeholder = "Search...",
|
|
418
|
-
bg = "#1e293b",
|
|
419
|
-
textColor = "#f1f5f9",
|
|
420
|
-
accent = "#7c3aed",
|
|
421
|
-
loading = false,
|
|
422
|
-
suggestions = [],
|
|
423
|
-
onChange = () => {
|
|
424
|
-
},
|
|
425
|
-
onClear = () => {
|
|
426
|
-
}
|
|
427
|
-
}) => {
|
|
428
|
-
const [query, setQuery] = (0, import_react8.useState)("");
|
|
429
|
-
const handleInputChange = (e) => {
|
|
430
|
-
setQuery(e.target.value);
|
|
431
|
-
onChange(e.target.value);
|
|
432
|
-
};
|
|
433
|
-
const handleClear = () => {
|
|
434
|
-
setQuery("");
|
|
435
|
-
onClear();
|
|
436
|
-
};
|
|
437
|
-
return /* @__PURE__ */ import_react8.default.createElement("div", { style: { position: "relative", width: "100%" } }, /* @__PURE__ */ import_react8.default.createElement(
|
|
438
|
-
"input",
|
|
439
|
-
{
|
|
440
|
-
value: query,
|
|
441
|
-
placeholder,
|
|
442
|
-
onChange: handleInputChange,
|
|
443
|
-
style: {
|
|
444
|
-
background: bg,
|
|
445
|
-
color: textColor,
|
|
446
|
-
padding: "10px",
|
|
447
|
-
borderRadius: "8px",
|
|
448
|
-
border: "1px solid #cbd5e1",
|
|
449
|
-
width: "100%",
|
|
450
|
-
transition: "border-color 0.3s",
|
|
451
|
-
outline: "none"
|
|
452
|
-
}
|
|
453
|
-
}
|
|
454
|
-
), query && /* @__PURE__ */ import_react8.default.createElement("button", { onClick: handleClear, style: {
|
|
455
|
-
position: "absolute",
|
|
456
|
-
right: "10px",
|
|
457
|
-
top: "50%",
|
|
458
|
-
transform: "translateY(-50%)",
|
|
459
|
-
background: "transparent",
|
|
460
|
-
color: accent,
|
|
461
|
-
border: "none",
|
|
462
|
-
cursor: "pointer"
|
|
463
|
-
} }, "Clear"), loading && /* @__PURE__ */ import_react8.default.createElement("div", { style: {
|
|
464
|
-
position: "absolute",
|
|
465
|
-
left: "10px",
|
|
466
|
-
top: "50%",
|
|
467
|
-
transform: "translateY(-50%)"
|
|
468
|
-
} }, "Loading..."), suggestions.length > 0 && !loading && /* @__PURE__ */ import_react8.default.createElement("ul", { style: {
|
|
469
|
-
listStyleType: "none",
|
|
470
|
-
margin: 0,
|
|
471
|
-
padding: "10px",
|
|
472
|
-
background: bg,
|
|
473
|
-
borderRadius: "8px",
|
|
474
|
-
position: "absolute",
|
|
475
|
-
zIndex: 1e3,
|
|
476
|
-
width: "100%",
|
|
477
|
-
maxHeight: "200px",
|
|
478
|
-
overflowY: "auto"
|
|
479
|
-
} }, suggestions.map((suggestion, index) => /* @__PURE__ */ import_react8.default.createElement("li", { key: index, style: {
|
|
480
|
-
padding: "8px",
|
|
481
|
-
color: textColor,
|
|
482
|
-
cursor: "pointer",
|
|
483
|
-
transition: "background 0.2s"
|
|
484
|
-
}, onClick: () => {
|
|
485
|
-
setQuery(suggestion);
|
|
486
|
-
onChange(suggestion);
|
|
487
|
-
} }, suggestion))));
|
|
488
|
-
};
|
|
489
|
-
|
|
490
|
-
// src/components/LoadingSpinner/LoadingSpinner.jsx
|
|
491
|
-
var import_react9 = __toESM(require("react"));
|
|
492
|
-
var LoadingSpinner = ({ size = "40px", color = "#7c3aed", speed = "1s" }) => {
|
|
493
|
-
return /* @__PURE__ */ import_react9.default.createElement("div", { style: { border: `4px solid ${color}`, borderTop: `4px solid transparent`, borderRadius: "50%", width: size, height: size, animation: `spin ${speed} linear infinite` } });
|
|
494
|
-
};
|
|
495
|
-
|
|
496
|
-
// src/components/SkeletonLoader/SkeletonLoader.jsx
|
|
497
|
-
var import_react10 = __toESM(require("react"));
|
|
498
|
-
var SkeletonLoader = ({ width = "100%", height = "20px", bg = "#1e293b", accent = "#7c3aed", radius = "12px", padding = "0" }) => {
|
|
499
|
-
const shimmerStyle = {
|
|
500
|
-
background: `linear-gradient(90deg, ${accent} 25%, ${bg} 50%, ${accent} 75%)`,
|
|
501
|
-
backgroundSize: "200% 100%",
|
|
502
|
-
animation: "shimmer 1.5s infinite",
|
|
503
|
-
borderRadius: radius
|
|
504
|
-
};
|
|
505
|
-
return /* @__PURE__ */ import_react10.default.createElement("div", { style: { padding } }, /* @__PURE__ */ import_react10.default.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ import_react10.default.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ import_react10.default.createElement("div", { style: { ...shimmerStyle, width, height } }), /* @__PURE__ */ import_react10.default.createElement("style", null, `@keyframes shimmer {
|
|
506
|
-
0% {
|
|
507
|
-
background-position: 200% 0;
|
|
508
|
-
}
|
|
509
|
-
100% {
|
|
510
|
-
background-position: 0 0;
|
|
511
|
-
}
|
|
512
|
-
}`));
|
|
513
|
-
};
|
|
514
|
-
|
|
515
|
-
// src/components/ResponsiveNavbar/ResponsiveNavbar.jsx
|
|
516
|
-
var import_react11 = __toESM(require("react"));
|
|
517
|
-
var ResponsiveNavbar = ({
|
|
518
|
-
logo = "Logo",
|
|
519
|
-
navItems = [],
|
|
520
|
-
bg = "#1e293b",
|
|
521
|
-
textColor = "#f1f5f9",
|
|
522
|
-
accent = "#7c3aed",
|
|
523
|
-
padding = "10px 20px",
|
|
524
|
-
radius = "8px",
|
|
525
|
-
placeholder = "Search...",
|
|
526
|
-
onNavItemClick = () => {
|
|
527
|
-
},
|
|
528
|
-
onSearchChange = () => {
|
|
529
|
-
},
|
|
530
|
-
profileAvatar = "https://via.placeholder.com/40"
|
|
531
|
-
}) => {
|
|
532
|
-
const [menuActive, setMenuActive] = (0, import_react11.useState)(false);
|
|
533
|
-
const [searchValue, setSearchValue] = (0, import_react11.useState)("");
|
|
534
|
-
const handleSearchChange = (e) => {
|
|
535
|
-
setSearchValue(e.target.value);
|
|
536
|
-
onSearchChange(e.target.value);
|
|
537
|
-
};
|
|
538
|
-
return /* @__PURE__ */ import_react11.default.createElement("nav", { style: { background: bg, color: textColor, padding, borderRadius: radius, display: "flex", justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ import_react11.default.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react11.default.createElement("div", { style: { fontSize: "24px", fontWeight: "bold" } }, logo), /* @__PURE__ */ import_react11.default.createElement("div", { style: { display: "flex", marginLeft: "20px" } }, navItems.map((item, index) => /* @__PURE__ */ import_react11.default.createElement("div", { key: index, onClick: () => onNavItemClick(item), style: { margin: "0 10px", cursor: "pointer", color: item.active ? accent : textColor } }, item.label)))), /* @__PURE__ */ import_react11.default.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react11.default.createElement(
|
|
539
|
-
"input",
|
|
540
|
-
{
|
|
541
|
-
type: "text",
|
|
542
|
-
value: searchValue,
|
|
543
|
-
placeholder,
|
|
544
|
-
onChange: handleSearchChange,
|
|
545
|
-
style: { background: "#0f172a", color: textColor, border: "none", borderRadius: radius, padding: "8px", marginRight: "20px" }
|
|
546
|
-
}
|
|
547
|
-
), /* @__PURE__ */ import_react11.default.createElement("img", { src: profileAvatar, alt: "Profile", style: { borderRadius: "50%", width: "40px", height: "40px" } }), /* @__PURE__ */ import_react11.default.createElement("div", { onClick: () => setMenuActive(!menuActive), style: { cursor: "pointer", marginLeft: "20px" } }, "\u2630")), menuActive && /* @__PURE__ */ import_react11.default.createElement("div", { style: { position: "absolute", top: "60px", right: "20px", background: bg, borderRadius: radius, boxShadow: "0 4px 8px rgba(0,0,0,0.3)", zIndex: 1 } }, navItems.map((item, index) => /* @__PURE__ */ import_react11.default.createElement("div", { key: index, onClick: () => onNavItemClick(item), style: { padding: "10px", color: item.active ? accent : textColor } }, item.label))));
|
|
548
|
-
};
|
|
549
|
-
|
|
550
|
-
// src/components/FileUpload/FileUpload.jsx
|
|
551
|
-
var import_react12 = __toESM(require("react"));
|
|
552
|
-
var FileUpload = ({ bg = "#1e293b", textColor = "#f1f5f9", accent = "#7c3aed", radius = "12px", padding = "20px", placeholder = "Drag and drop files here or click to upload", onChange = () => {
|
|
553
|
-
} }) => {
|
|
554
|
-
const [file, setFile] = (0, import_react12.useState)(null);
|
|
555
|
-
const [progress, setProgress] = (0, import_react12.useState)(0);
|
|
556
|
-
const handleDrop = (event) => {
|
|
557
|
-
event.preventDefault();
|
|
558
|
-
const droppedFile = event.dataTransfer.files[0];
|
|
559
|
-
if (droppedFile) {
|
|
560
|
-
uploadFile(droppedFile);
|
|
561
|
-
}
|
|
562
|
-
};
|
|
563
|
-
const handleClick = () => {
|
|
564
|
-
document.getElementById("fileInput").click();
|
|
565
|
-
};
|
|
566
|
-
const handleFileChange = (event) => {
|
|
567
|
-
const selectedFile = event.target.files[0];
|
|
568
|
-
if (selectedFile) {
|
|
569
|
-
uploadFile(selectedFile);
|
|
570
|
-
}
|
|
571
|
-
};
|
|
572
|
-
const uploadFile = (selectedFile) => {
|
|
573
|
-
setFile(selectedFile);
|
|
574
|
-
const uploadProgress = setInterval(() => {
|
|
575
|
-
setProgress((prev) => {
|
|
576
|
-
if (prev >= 100) {
|
|
577
|
-
clearInterval(uploadProgress);
|
|
578
|
-
return 100;
|
|
579
|
-
}
|
|
580
|
-
return prev + 10;
|
|
581
|
-
});
|
|
582
|
-
}, 100);
|
|
583
|
-
onChange(selectedFile);
|
|
584
|
-
};
|
|
585
|
-
const handleRemove = () => {
|
|
586
|
-
setFile(null);
|
|
587
|
-
setProgress(0);
|
|
588
|
-
};
|
|
589
|
-
return /* @__PURE__ */ import_react12.default.createElement(
|
|
590
|
-
"div",
|
|
591
|
-
{
|
|
592
|
-
onDrop: handleDrop,
|
|
593
|
-
onDragOver: (e) => e.preventDefault(),
|
|
594
|
-
onClick: handleClick,
|
|
595
|
-
style: {
|
|
596
|
-
background: bg,
|
|
597
|
-
color: textColor,
|
|
598
|
-
border: `2px dashed ${accent}`,
|
|
599
|
-
borderRadius: radius,
|
|
600
|
-
padding,
|
|
601
|
-
textAlign: "center",
|
|
602
|
-
cursor: "pointer"
|
|
603
|
-
}
|
|
604
|
-
},
|
|
605
|
-
/* @__PURE__ */ import_react12.default.createElement(
|
|
606
|
-
"input",
|
|
607
|
-
{
|
|
608
|
-
id: "fileInput",
|
|
609
|
-
type: "file",
|
|
610
|
-
style: { display: "none" },
|
|
611
|
-
onChange: handleFileChange
|
|
612
|
-
}
|
|
613
|
-
),
|
|
614
|
-
file ? /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("p", null, file.name), /* @__PURE__ */ import_react12.default.createElement(
|
|
615
|
-
"button",
|
|
616
|
-
{
|
|
617
|
-
onClick: handleRemove,
|
|
618
|
-
style: {
|
|
619
|
-
background: accent,
|
|
620
|
-
color: "#fff",
|
|
621
|
-
border: "none",
|
|
622
|
-
borderRadius: radius,
|
|
623
|
-
padding: "8px 16px",
|
|
624
|
-
cursor: "pointer"
|
|
625
|
-
}
|
|
626
|
-
},
|
|
627
|
-
"Remove"
|
|
628
|
-
), /* @__PURE__ */ import_react12.default.createElement("div", { style: { background: "#e2e8f0", borderRadius: radius, overflow: "hidden", marginTop: "10px" } }, /* @__PURE__ */ import_react12.default.createElement("div", { style: { width: `${progress}%`, background: accent, height: "8px" } }))) : /* @__PURE__ */ import_react12.default.createElement("p", null, placeholder)
|
|
629
|
-
);
|
|
630
|
-
};
|
|
631
|
-
|
|
632
49
|
// src/components/Loader/Loader.jsx
|
|
633
|
-
var
|
|
50
|
+
var import_react = __toESM(require("react"));
|
|
634
51
|
var Loader = ({
|
|
635
52
|
type = "spinner",
|
|
636
53
|
size = 48,
|
|
@@ -639,15 +56,15 @@ var Loader = ({
|
|
|
639
56
|
label = "",
|
|
640
57
|
speed = 1
|
|
641
58
|
}) => {
|
|
642
|
-
const [dots, setDots] = (0,
|
|
643
|
-
const [progress, setProgress] = (0,
|
|
59
|
+
const [dots, setDots] = (0, import_react.useState)(0);
|
|
60
|
+
const [progress, setProgress] = (0, import_react.useState)(0);
|
|
644
61
|
const alpha = (hex, op) => {
|
|
645
62
|
const r = parseInt(hex.slice(1, 3), 16);
|
|
646
63
|
const g = parseInt(hex.slice(3, 5), 16);
|
|
647
64
|
const b = parseInt(hex.slice(5, 7), 16);
|
|
648
65
|
return `rgba(${r},${g},${b},${op})`;
|
|
649
66
|
};
|
|
650
|
-
(0,
|
|
67
|
+
(0, import_react.useEffect)(() => {
|
|
651
68
|
if (type === "dots") {
|
|
652
69
|
const t = setInterval(() => setDots((d) => (d + 1) % 4), 400 / speed);
|
|
653
70
|
return () => clearInterval(t);
|
|
@@ -669,8 +86,8 @@ var Loader = ({
|
|
|
669
86
|
borderRadius: "16px",
|
|
670
87
|
fontFamily: "system-ui, sans-serif"
|
|
671
88
|
};
|
|
672
|
-
const labelEl = label ? /* @__PURE__ */
|
|
673
|
-
if (type === "spinner") return /* @__PURE__ */
|
|
89
|
+
const labelEl = label ? /* @__PURE__ */ import_react.default.createElement("span", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", letterSpacing: "0.3px" } }, label) : null;
|
|
90
|
+
if (type === "spinner") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("svg", { width: size, height: size, viewBox: "0 0 48 48" }, /* @__PURE__ */ import_react.default.createElement(
|
|
674
91
|
"circle",
|
|
675
92
|
{
|
|
676
93
|
cx: "24",
|
|
@@ -680,7 +97,7 @@ var Loader = ({
|
|
|
680
97
|
stroke: alpha(accent, 0.15),
|
|
681
98
|
strokeWidth: "4"
|
|
682
99
|
}
|
|
683
|
-
), /* @__PURE__ */
|
|
100
|
+
), /* @__PURE__ */ import_react.default.createElement(
|
|
684
101
|
"circle",
|
|
685
102
|
{
|
|
686
103
|
cx: "24",
|
|
@@ -693,40 +110,40 @@ var Loader = ({
|
|
|
693
110
|
strokeDasharray: "31.4 94.2",
|
|
694
111
|
style: { transformOrigin: "center", animation: `spin ${dur} linear infinite` }
|
|
695
112
|
}
|
|
696
|
-
), /* @__PURE__ */
|
|
697
|
-
if (type === "pulse") return /* @__PURE__ */
|
|
113
|
+
), /* @__PURE__ */ import_react.default.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`)), labelEl);
|
|
114
|
+
if (type === "pulse") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("div", { style: { position: "relative", width: size, height: size } }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
|
|
698
115
|
position: "absolute",
|
|
699
116
|
inset: 0,
|
|
700
117
|
borderRadius: "50%",
|
|
701
118
|
background: alpha(accent, 0.2),
|
|
702
119
|
animation: `pulse ${dur} ease-out infinite`
|
|
703
|
-
} }), /* @__PURE__ */
|
|
120
|
+
} }), /* @__PURE__ */ import_react.default.createElement("div", { style: {
|
|
704
121
|
position: "absolute",
|
|
705
122
|
inset: "25%",
|
|
706
123
|
borderRadius: "50%",
|
|
707
124
|
background: accent
|
|
708
|
-
} }), /* @__PURE__ */
|
|
709
|
-
if (type === "dots") return /* @__PURE__ */
|
|
125
|
+
} }), /* @__PURE__ */ import_react.default.createElement("style", null, `@keyframes pulse { 0%{transform:scale(1);opacity:1} 100%{transform:scale(2);opacity:0} }`)), labelEl);
|
|
126
|
+
if (type === "dots") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ import_react.default.createElement("div", { key: i, style: {
|
|
710
127
|
width: size / 5,
|
|
711
128
|
height: size / 5,
|
|
712
129
|
borderRadius: "50%",
|
|
713
130
|
background: dots === i ? accent : alpha(accent, 0.25),
|
|
714
131
|
transition: "background 0.2s"
|
|
715
132
|
} }))), labelEl);
|
|
716
|
-
if (type === "bar") return /* @__PURE__ */
|
|
133
|
+
if (type === "bar") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
|
|
717
134
|
width: size * 3,
|
|
718
135
|
height: size / 8,
|
|
719
136
|
background: alpha(accent, 0.15),
|
|
720
137
|
borderRadius: "99px",
|
|
721
138
|
overflow: "hidden"
|
|
722
|
-
} }, /* @__PURE__ */
|
|
139
|
+
} }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
|
|
723
140
|
height: "100%",
|
|
724
141
|
borderRadius: "99px",
|
|
725
142
|
background: accent,
|
|
726
143
|
width: `${progress}%`,
|
|
727
144
|
transition: "width 0.03s linear"
|
|
728
145
|
} })), labelEl);
|
|
729
|
-
if (type === "ring") return /* @__PURE__ */
|
|
146
|
+
if (type === "ring") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
|
|
730
147
|
width: size,
|
|
731
148
|
height: size,
|
|
732
149
|
borderRadius: "50%",
|
|
@@ -734,86 +151,12 @@ var Loader = ({
|
|
|
734
151
|
borderTop: `4px solid ${accent}`,
|
|
735
152
|
borderRight: `4px solid ${accent}`,
|
|
736
153
|
animation: `spin ${dur} linear infinite`
|
|
737
|
-
} }), /* @__PURE__ */
|
|
154
|
+
} }), /* @__PURE__ */ import_react.default.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`), labelEl);
|
|
738
155
|
return null;
|
|
739
156
|
};
|
|
740
157
|
|
|
741
|
-
// src/components/Avatar/Avatar.jsx
|
|
742
|
-
var import_react14 = __toESM(require("react"));
|
|
743
|
-
var Avatar = ({
|
|
744
|
-
image = "https://i.pravatar.cc/150?img=32",
|
|
745
|
-
alt = "User Avatar",
|
|
746
|
-
size = "60px",
|
|
747
|
-
borderColor = "#7c3aed",
|
|
748
|
-
borderWidth = "4px",
|
|
749
|
-
radius = "50%"
|
|
750
|
-
}) => {
|
|
751
|
-
return /* @__PURE__ */ import_react14.default.createElement("div", { style: {
|
|
752
|
-
width: size,
|
|
753
|
-
height: size,
|
|
754
|
-
borderRadius: radius,
|
|
755
|
-
border: borderWidth + " solid " + borderColor,
|
|
756
|
-
overflow: "hidden",
|
|
757
|
-
display: "flex",
|
|
758
|
-
alignItems: "center",
|
|
759
|
-
justifyContent: "center",
|
|
760
|
-
background: "#f3f4f6"
|
|
761
|
-
} }, /* @__PURE__ */ import_react14.default.createElement("img", { src: image, alt, style: {
|
|
762
|
-
width: "100%",
|
|
763
|
-
height: "100%",
|
|
764
|
-
objectFit: "cover"
|
|
765
|
-
} }));
|
|
766
|
-
};
|
|
767
|
-
|
|
768
|
-
// src/components/DividerLine/DividerLine.jsx
|
|
769
|
-
var import_react15 = __toESM(require("react"));
|
|
770
|
-
var DividerLine = ({
|
|
771
|
-
text = "Section",
|
|
772
|
-
textColor = "#f1f5f9",
|
|
773
|
-
lineColor = "#334155",
|
|
774
|
-
spacing = "20px",
|
|
775
|
-
thickness = "2px",
|
|
776
|
-
borderRadius = "4px"
|
|
777
|
-
}) => {
|
|
778
|
-
return /* @__PURE__ */ import_react15.default.createElement("div", { style: { display: "flex", alignItems: "center", margin: spacing } }, /* @__PURE__ */ import_react15.default.createElement("div", { style: { flex: 1, height: thickness, background: lineColor, borderRadius } }), /* @__PURE__ */ import_react15.default.createElement("span", { style: { margin: "0 12px", color: textColor, fontSize: "14px", fontWeight: "600" } }, text), /* @__PURE__ */ import_react15.default.createElement("div", { style: { flex: 1, height: thickness, background: lineColor, borderRadius } }));
|
|
779
|
-
};
|
|
780
|
-
|
|
781
|
-
// src/components/Tabs/Tabs.jsx
|
|
782
|
-
var import_react16 = __toESM(require("react"));
|
|
783
|
-
var Tabs = ({
|
|
784
|
-
tabs = [
|
|
785
|
-
{ label: "Tab 1", content: "Content for Tab 1" },
|
|
786
|
-
{ label: "Tab 2", content: "Content for Tab 2" },
|
|
787
|
-
{ label: "Tab 3", content: "Content for Tab 3" }
|
|
788
|
-
],
|
|
789
|
-
bg = "#0f172a",
|
|
790
|
-
accent = "#2563eb",
|
|
791
|
-
textColor = "#f1f5f9",
|
|
792
|
-
radius = "8px"
|
|
793
|
-
}) => {
|
|
794
|
-
const [activeTab, setActiveTab] = (0, import_react16.useState)(0);
|
|
795
|
-
return /* @__PURE__ */ import_react16.default.createElement("div", { style: { background: bg, borderRadius: radius, padding: "16px", boxShadow: "0 4px 20px rgba(0,0,0,0.5)", fontFamily: "system-ui, sans-serif" } }, /* @__PURE__ */ import_react16.default.createElement("div", { style: { display: "flex", borderBottom: `2px solid ${accent}` } }, tabs.map((tab, index) => /* @__PURE__ */ import_react16.default.createElement(
|
|
796
|
-
"button",
|
|
797
|
-
{
|
|
798
|
-
key: index,
|
|
799
|
-
onClick: () => setActiveTab(index),
|
|
800
|
-
style: {
|
|
801
|
-
padding: "10px 20px",
|
|
802
|
-
background: activeTab === index ? accent : "transparent",
|
|
803
|
-
color: activeTab === index ? "white" : textColor,
|
|
804
|
-
border: "none",
|
|
805
|
-
borderRadius: radius,
|
|
806
|
-
cursor: "pointer",
|
|
807
|
-
fontWeight: activeTab === index ? "700" : "400",
|
|
808
|
-
transition: "background 0.3s, color 0.3s"
|
|
809
|
-
}
|
|
810
|
-
},
|
|
811
|
-
tab.label
|
|
812
|
-
))), /* @__PURE__ */ import_react16.default.createElement("div", { style: { padding: "16px", color: textColor } }, /* @__PURE__ */ import_react16.default.createElement("h4", { style: { margin: "0 0 8px", fontSize: "16px", fontWeight: "600" } }, tabs[activeTab].label), /* @__PURE__ */ import_react16.default.createElement("p", { style: { margin: "0", fontSize: "14px" } }, tabs[activeTab].content)));
|
|
813
|
-
};
|
|
814
|
-
|
|
815
158
|
// src/components/NotificationToast/NotificationToast.jsx
|
|
816
|
-
var
|
|
159
|
+
var import_react2 = __toESM(require("react"));
|
|
817
160
|
var NotificationToast = ({
|
|
818
161
|
title = "New Message",
|
|
819
162
|
message = "You have a new notification from the team.",
|
|
@@ -824,8 +167,8 @@ var NotificationToast = ({
|
|
|
824
167
|
radius = "14px",
|
|
825
168
|
showProgress = true
|
|
826
169
|
}) => {
|
|
827
|
-
const [visible, setVisible] = (0,
|
|
828
|
-
const [progress, setProgress] = (0,
|
|
170
|
+
const [visible, setVisible] = (0, import_react2.useState)(true);
|
|
171
|
+
const [progress, setProgress] = (0, import_react2.useState)(100);
|
|
829
172
|
const typeColors = {
|
|
830
173
|
success: "#10b981",
|
|
831
174
|
error: "#ef4444",
|
|
@@ -839,7 +182,7 @@ var NotificationToast = ({
|
|
|
839
182
|
info: "M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20A10 10 0 0012 2z"
|
|
840
183
|
};
|
|
841
184
|
const color = typeColors[type] || accent;
|
|
842
|
-
(0,
|
|
185
|
+
(0, import_react2.useEffect)(() => {
|
|
843
186
|
if (!showProgress) return;
|
|
844
187
|
const step = 100 / (duration / 50);
|
|
845
188
|
const timer = setInterval(() => {
|
|
@@ -855,7 +198,7 @@ var NotificationToast = ({
|
|
|
855
198
|
return () => clearInterval(timer);
|
|
856
199
|
}, [duration, showProgress]);
|
|
857
200
|
if (!visible) return null;
|
|
858
|
-
return /* @__PURE__ */
|
|
201
|
+
return /* @__PURE__ */ import_react2.default.createElement("div", { style: {
|
|
859
202
|
background: bg,
|
|
860
203
|
borderRadius: radius,
|
|
861
204
|
padding: "16px 18px",
|
|
@@ -866,7 +209,7 @@ var NotificationToast = ({
|
|
|
866
209
|
border: `1px solid rgba(255,255,255,0.08)`,
|
|
867
210
|
position: "relative",
|
|
868
211
|
overflow: "hidden"
|
|
869
|
-
} }, /* @__PURE__ */
|
|
212
|
+
} }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: {
|
|
870
213
|
width: 36,
|
|
871
214
|
height: 36,
|
|
872
215
|
borderRadius: "10px",
|
|
@@ -876,7 +219,7 @@ var NotificationToast = ({
|
|
|
876
219
|
display: "flex",
|
|
877
220
|
alignItems: "center",
|
|
878
221
|
justifyContent: "center"
|
|
879
|
-
} }, /* @__PURE__ */
|
|
222
|
+
} }, /* @__PURE__ */ import_react2.default.createElement(
|
|
880
223
|
"svg",
|
|
881
224
|
{
|
|
882
225
|
width: "16",
|
|
@@ -888,8 +231,8 @@ var NotificationToast = ({
|
|
|
888
231
|
strokeLinecap: "round",
|
|
889
232
|
strokeLinejoin: "round"
|
|
890
233
|
},
|
|
891
|
-
/* @__PURE__ */
|
|
892
|
-
)), /* @__PURE__ */
|
|
234
|
+
/* @__PURE__ */ import_react2.default.createElement("path", { d: typeIcons[type] || typeIcons.info })
|
|
235
|
+
)), /* @__PURE__ */ import_react2.default.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { fontSize: "14px", fontWeight: "700", marginBottom: "3px" } }, title), /* @__PURE__ */ import_react2.default.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.5)", lineHeight: 1.5 } }, message)), /* @__PURE__ */ import_react2.default.createElement(
|
|
893
236
|
"button",
|
|
894
237
|
{
|
|
895
238
|
onClick: () => setVisible(false),
|
|
@@ -903,7 +246,7 @@ var NotificationToast = ({
|
|
|
903
246
|
lineHeight: 1
|
|
904
247
|
}
|
|
905
248
|
},
|
|
906
|
-
/* @__PURE__ */
|
|
249
|
+
/* @__PURE__ */ import_react2.default.createElement(
|
|
907
250
|
"svg",
|
|
908
251
|
{
|
|
909
252
|
width: "14",
|
|
@@ -914,16 +257,16 @@ var NotificationToast = ({
|
|
|
914
257
|
strokeWidth: "2.5",
|
|
915
258
|
strokeLinecap: "round"
|
|
916
259
|
},
|
|
917
|
-
/* @__PURE__ */
|
|
260
|
+
/* @__PURE__ */ import_react2.default.createElement("path", { d: "M18 6L6 18M6 6l12 12" })
|
|
918
261
|
)
|
|
919
|
-
)), showProgress && /* @__PURE__ */
|
|
262
|
+
)), showProgress && /* @__PURE__ */ import_react2.default.createElement("div", { style: {
|
|
920
263
|
position: "absolute",
|
|
921
264
|
bottom: 0,
|
|
922
265
|
left: 0,
|
|
923
266
|
right: 0,
|
|
924
267
|
height: "3px",
|
|
925
268
|
background: "rgba(255,255,255,0.07)"
|
|
926
|
-
} }, /* @__PURE__ */
|
|
269
|
+
} }, /* @__PURE__ */ import_react2.default.createElement("div", { style: {
|
|
927
270
|
height: "100%",
|
|
928
271
|
width: `${progress}%`,
|
|
929
272
|
background: color,
|
|
@@ -933,7 +276,7 @@ var NotificationToast = ({
|
|
|
933
276
|
};
|
|
934
277
|
|
|
935
278
|
// src/components/AvatarCard/AvatarCard.jsx
|
|
936
|
-
var
|
|
279
|
+
var import_react3 = __toESM(require("react"));
|
|
937
280
|
var AvatarCard = ({
|
|
938
281
|
name = "Aryan Sharma",
|
|
939
282
|
role = "Frontend Developer",
|
|
@@ -946,7 +289,7 @@ var AvatarCard = ({
|
|
|
946
289
|
bg = "#0f172a",
|
|
947
290
|
radius = "20px"
|
|
948
291
|
}) => {
|
|
949
|
-
const [followed, setFollowed] = (0,
|
|
292
|
+
const [followed, setFollowed] = (0, import_react3.useState)(false);
|
|
950
293
|
const alpha = (hex, op) => {
|
|
951
294
|
const r = parseInt(hex.slice(1, 3), 16);
|
|
952
295
|
const g = parseInt(hex.slice(3, 5), 16);
|
|
@@ -959,7 +302,7 @@ var AvatarCard = ({
|
|
|
959
302
|
{ label: "Following", value: following },
|
|
960
303
|
{ label: "Projects", value: projects }
|
|
961
304
|
];
|
|
962
|
-
return /* @__PURE__ */
|
|
305
|
+
return /* @__PURE__ */ import_react3.default.createElement("div", { style: {
|
|
963
306
|
background: bg,
|
|
964
307
|
borderRadius: radius,
|
|
965
308
|
padding: "24px 20px",
|
|
@@ -970,14 +313,14 @@ var AvatarCard = ({
|
|
|
970
313
|
border: "1px solid rgba(255,255,255,0.08)",
|
|
971
314
|
position: "relative",
|
|
972
315
|
overflow: "hidden"
|
|
973
|
-
} }, /* @__PURE__ */
|
|
316
|
+
} }, /* @__PURE__ */ import_react3.default.createElement("div", { style: {
|
|
974
317
|
position: "absolute",
|
|
975
318
|
top: 0,
|
|
976
319
|
left: 0,
|
|
977
320
|
right: 0,
|
|
978
321
|
height: "3px",
|
|
979
322
|
background: `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.3)})`
|
|
980
|
-
} }), /* @__PURE__ */
|
|
323
|
+
} }), /* @__PURE__ */ import_react3.default.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", marginBottom: "16px" } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: {
|
|
981
324
|
width: 72,
|
|
982
325
|
height: 72,
|
|
983
326
|
borderRadius: "50%",
|
|
@@ -990,7 +333,7 @@ var AvatarCard = ({
|
|
|
990
333
|
color: "#fff",
|
|
991
334
|
border: `3px solid ${alpha(accent, 0.4)}`,
|
|
992
335
|
marginBottom: "12px"
|
|
993
|
-
} }, !avatar && initials), /* @__PURE__ */
|
|
336
|
+
} }, !avatar && initials), /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: "16px", fontWeight: "700", marginBottom: "3px" } }, name), /* @__PURE__ */ import_react3.default.createElement("div", { style: {
|
|
994
337
|
fontSize: "12px",
|
|
995
338
|
fontWeight: "600",
|
|
996
339
|
color: accent,
|
|
@@ -998,14 +341,14 @@ var AvatarCard = ({
|
|
|
998
341
|
padding: "2px 10px",
|
|
999
342
|
borderRadius: "20px",
|
|
1000
343
|
border: `1px solid ${alpha(accent, 0.3)}`
|
|
1001
|
-
} }, role)), /* @__PURE__ */
|
|
344
|
+
} }, role)), /* @__PURE__ */ import_react3.default.createElement("p", { style: {
|
|
1002
345
|
fontSize: "12px",
|
|
1003
346
|
color: "rgba(255,255,255,0.45)",
|
|
1004
347
|
textAlign: "center",
|
|
1005
348
|
lineHeight: 1.6,
|
|
1006
349
|
marginBottom: "18px",
|
|
1007
350
|
padding: "0 4px"
|
|
1008
|
-
} }, bio), /* @__PURE__ */
|
|
351
|
+
} }, bio), /* @__PURE__ */ import_react3.default.createElement("div", { style: {
|
|
1009
352
|
display: "flex",
|
|
1010
353
|
justifyContent: "space-around",
|
|
1011
354
|
background: "rgba(255,255,255,0.04)",
|
|
@@ -1013,11 +356,11 @@ var AvatarCard = ({
|
|
|
1013
356
|
borderRadius: "12px",
|
|
1014
357
|
padding: "12px 8px",
|
|
1015
358
|
marginBottom: "16px"
|
|
1016
|
-
} }, stats.map((s) => /* @__PURE__ */
|
|
359
|
+
} }, stats.map((s) => /* @__PURE__ */ import_react3.default.createElement("div", { key: s.label, style: { textAlign: "center" } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: "18px", fontWeight: "800" } }, s.value >= 1e3 ? (s.value / 1e3).toFixed(1) + "k" : s.value), /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: "10px", color: "rgba(255,255,255,0.4)", marginTop: "2px" } }, s.label)))));
|
|
1017
360
|
};
|
|
1018
361
|
|
|
1019
362
|
// src/components/PricingCard/PricingCard.jsx
|
|
1020
|
-
var
|
|
363
|
+
var import_react4 = __toESM(require("react"));
|
|
1021
364
|
var PricingCard = ({
|
|
1022
365
|
planName = "Pro Plan",
|
|
1023
366
|
description = "For teams that need more power.",
|
|
@@ -1045,7 +388,7 @@ var PricingCard = ({
|
|
|
1045
388
|
const b = parseInt(hex.slice(5, 7), 16);
|
|
1046
389
|
return `rgba(${r},${g},${b},${op})`;
|
|
1047
390
|
};
|
|
1048
|
-
return /* @__PURE__ */
|
|
391
|
+
return /* @__PURE__ */ import_react4.default.createElement("div", { style: {
|
|
1049
392
|
background: bg,
|
|
1050
393
|
borderRadius: radius,
|
|
1051
394
|
padding: "28px 24px",
|
|
@@ -1056,14 +399,14 @@ var PricingCard = ({
|
|
|
1056
399
|
border: `1px solid ${alpha(accent, 0.25)}`,
|
|
1057
400
|
position: "relative",
|
|
1058
401
|
overflow: "hidden"
|
|
1059
|
-
} }, /* @__PURE__ */
|
|
402
|
+
} }, /* @__PURE__ */ import_react4.default.createElement("div", { style: {
|
|
1060
403
|
position: "absolute",
|
|
1061
404
|
top: 0,
|
|
1062
405
|
left: 0,
|
|
1063
406
|
right: 0,
|
|
1064
407
|
height: "3px",
|
|
1065
408
|
background: `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.3)})`
|
|
1066
|
-
} }), badgeText && /* @__PURE__ */
|
|
409
|
+
} }), badgeText && /* @__PURE__ */ import_react4.default.createElement("div", { style: {
|
|
1067
410
|
display: "inline-flex",
|
|
1068
411
|
alignItems: "center",
|
|
1069
412
|
gap: "6px",
|
|
@@ -1077,7 +420,7 @@ var PricingCard = ({
|
|
|
1077
420
|
color: accent,
|
|
1078
421
|
letterSpacing: "0.5px",
|
|
1079
422
|
textTransform: "uppercase"
|
|
1080
|
-
} }, /* @__PURE__ */
|
|
423
|
+
} }, /* @__PURE__ */ import_react4.default.createElement("div", { style: { width: 6, height: 6, borderRadius: "50%", background: accent } }), badgeText), /* @__PURE__ */ import_react4.default.createElement("div", { style: { fontSize: "20px", fontWeight: "800", marginBottom: "4px" } }, planName), /* @__PURE__ */ import_react4.default.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", marginBottom: "20px", lineHeight: 1.5 } }, description), /* @__PURE__ */ import_react4.default.createElement("div", { style: { display: "flex", alignItems: "flex-end", gap: "3px", marginBottom: "4px" } }, /* @__PURE__ */ import_react4.default.createElement("span", { style: { fontSize: "18px", fontWeight: "700", color: "rgba(255,255,255,0.5)", lineHeight: 2 } }, currency), /* @__PURE__ */ import_react4.default.createElement("span", { style: { fontSize: "52px", fontWeight: "800", color: "#fff", lineHeight: 1 } }, Math.round(price))), /* @__PURE__ */ import_react4.default.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", marginBottom: "20px" } }, period), /* @__PURE__ */ import_react4.default.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", marginBottom: "16px" } }), /* @__PURE__ */ import_react4.default.createElement("ul", { style: { listStyle: "none", padding: 0, margin: "0 0 22px", display: "flex", flexDirection: "column", gap: "10px" } }, features.map((f, i) => /* @__PURE__ */ import_react4.default.createElement("li", { key: i, style: { display: "flex", alignItems: "center", gap: "10px", fontSize: "13px", color: "rgba(255,255,255,0.75)" } }, /* @__PURE__ */ import_react4.default.createElement("div", { style: {
|
|
1081
424
|
width: "18px",
|
|
1082
425
|
height: "18px",
|
|
1083
426
|
borderRadius: "50%",
|
|
@@ -1087,7 +430,7 @@ var PricingCard = ({
|
|
|
1087
430
|
justifyContent: "center",
|
|
1088
431
|
background: alpha(accent, 0.18),
|
|
1089
432
|
border: `1px solid ${alpha(accent, 0.4)}`
|
|
1090
|
-
} }, /* @__PURE__ */
|
|
433
|
+
} }, /* @__PURE__ */ import_react4.default.createElement(
|
|
1091
434
|
"svg",
|
|
1092
435
|
{
|
|
1093
436
|
width: "10",
|
|
@@ -1099,8 +442,8 @@ var PricingCard = ({
|
|
|
1099
442
|
strokeLinecap: "round",
|
|
1100
443
|
strokeLinejoin: "round"
|
|
1101
444
|
},
|
|
1102
|
-
/* @__PURE__ */
|
|
1103
|
-
)), f))), /* @__PURE__ */
|
|
445
|
+
/* @__PURE__ */ import_react4.default.createElement("polyline", { points: "1.5,6 4.5,9 10.5,3" })
|
|
446
|
+
)), f))), /* @__PURE__ */ import_react4.default.createElement(
|
|
1104
447
|
"button",
|
|
1105
448
|
{
|
|
1106
449
|
onClick: onCtaClick,
|
|
@@ -1125,7 +468,7 @@ var PricingCard = ({
|
|
|
1125
468
|
};
|
|
1126
469
|
|
|
1127
470
|
// src/components/Navbar/Navbar.jsx
|
|
1128
|
-
var
|
|
471
|
+
var import_react5 = __toESM(require("react"));
|
|
1129
472
|
var Navbar = ({
|
|
1130
473
|
logo = "VirtualAI",
|
|
1131
474
|
links = ["Home", "Features", "Pricing", "Blog"],
|
|
@@ -1137,28 +480,28 @@ var Navbar = ({
|
|
|
1137
480
|
onLinkClick = () => {
|
|
1138
481
|
}
|
|
1139
482
|
}) => {
|
|
1140
|
-
const [scrolled, setScrolled] = (0,
|
|
1141
|
-
const [menuOpen, setMenuOpen] = (0,
|
|
1142
|
-
const [active, setActive] = (0,
|
|
1143
|
-
const [isMobile, setIsMobile] = (0,
|
|
483
|
+
const [scrolled, setScrolled] = (0, import_react5.useState)(false);
|
|
484
|
+
const [menuOpen, setMenuOpen] = (0, import_react5.useState)(false);
|
|
485
|
+
const [active, setActive] = (0, import_react5.useState)("Home");
|
|
486
|
+
const [isMobile, setIsMobile] = (0, import_react5.useState)(false);
|
|
1144
487
|
const alpha = (hex, op) => {
|
|
1145
488
|
const r = parseInt(hex.slice(1, 3), 16);
|
|
1146
489
|
const g = parseInt(hex.slice(3, 5), 16);
|
|
1147
490
|
const b = parseInt(hex.slice(5, 7), 16);
|
|
1148
491
|
return `rgba(${r},${g},${b},${op})`;
|
|
1149
492
|
};
|
|
1150
|
-
(0,
|
|
493
|
+
(0, import_react5.useEffect)(() => {
|
|
1151
494
|
const checkMobile = () => setIsMobile(window.innerWidth < 768);
|
|
1152
495
|
checkMobile();
|
|
1153
496
|
window.addEventListener("resize", checkMobile);
|
|
1154
497
|
return () => window.removeEventListener("resize", checkMobile);
|
|
1155
498
|
}, []);
|
|
1156
|
-
(0,
|
|
499
|
+
(0, import_react5.useEffect)(() => {
|
|
1157
500
|
const handler = () => setScrolled(window.scrollY > 10);
|
|
1158
501
|
window.addEventListener("scroll", handler);
|
|
1159
502
|
return () => window.removeEventListener("scroll", handler);
|
|
1160
503
|
}, []);
|
|
1161
|
-
(0,
|
|
504
|
+
(0, import_react5.useEffect)(() => {
|
|
1162
505
|
if (!isMobile) setMenuOpen(false);
|
|
1163
506
|
}, [isMobile]);
|
|
1164
507
|
const handleLink = (link) => {
|
|
@@ -1166,7 +509,7 @@ var Navbar = ({
|
|
|
1166
509
|
setMenuOpen(false);
|
|
1167
510
|
onLinkClick(link);
|
|
1168
511
|
};
|
|
1169
|
-
return /* @__PURE__ */
|
|
512
|
+
return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement("style", null, `
|
|
1170
513
|
@keyframes nbSlideDown {
|
|
1171
514
|
from { opacity: 0; transform: translateY(-8px); }
|
|
1172
515
|
to { opacity: 1; transform: translateY(0); }
|
|
@@ -1175,7 +518,7 @@ var Navbar = ({
|
|
|
1175
518
|
.nb-cta:hover { opacity: 0.85 !important; }
|
|
1176
519
|
.nb-ham:hover { background: rgba(255,255,255,0.1) !important; }
|
|
1177
520
|
.nb-mlink:hover { background: rgba(255,255,255,0.06) !important; }
|
|
1178
|
-
`), /* @__PURE__ */
|
|
521
|
+
`), /* @__PURE__ */ import_react5.default.createElement("nav", { style: {
|
|
1179
522
|
position: "sticky",
|
|
1180
523
|
top: 0,
|
|
1181
524
|
left: 0,
|
|
@@ -1189,7 +532,7 @@ var Navbar = ({
|
|
|
1189
532
|
fontFamily: "system-ui, -apple-system, sans-serif",
|
|
1190
533
|
width: "100%",
|
|
1191
534
|
boxSizing: "border-box"
|
|
1192
|
-
} }, /* @__PURE__ */
|
|
535
|
+
} }, /* @__PURE__ */ import_react5.default.createElement("div", { style: {
|
|
1193
536
|
maxWidth: "1200px",
|
|
1194
537
|
margin: "0 auto",
|
|
1195
538
|
padding: "0 20px",
|
|
@@ -1199,7 +542,7 @@ var Navbar = ({
|
|
|
1199
542
|
justifyContent: "space-between",
|
|
1200
543
|
gap: "16px",
|
|
1201
544
|
boxSizing: "border-box"
|
|
1202
|
-
} }, /* @__PURE__ */
|
|
545
|
+
} }, /* @__PURE__ */ import_react5.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer", flexShrink: 0 } }, /* @__PURE__ */ import_react5.default.createElement("div", { style: {
|
|
1203
546
|
width: isMobile ? "26px" : "30px",
|
|
1204
547
|
height: isMobile ? "26px" : "30px",
|
|
1205
548
|
borderRadius: "8px",
|
|
@@ -1211,12 +554,12 @@ var Navbar = ({
|
|
|
1211
554
|
fontWeight: "800",
|
|
1212
555
|
color: "#fff",
|
|
1213
556
|
flexShrink: 0
|
|
1214
|
-
} }, logo[0]), /* @__PURE__ */
|
|
557
|
+
} }, logo[0]), /* @__PURE__ */ import_react5.default.createElement("span", { style: {
|
|
1215
558
|
fontSize: isMobile ? "14px" : "16px",
|
|
1216
559
|
fontWeight: "800",
|
|
1217
560
|
color: "#fff",
|
|
1218
561
|
letterSpacing: "-0.3px"
|
|
1219
|
-
} }, logo)), !isMobile && /* @__PURE__ */
|
|
562
|
+
} }, logo)), !isMobile && /* @__PURE__ */ import_react5.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "2px", flex: 1, justifyContent: "center" } }, links.map((link) => /* @__PURE__ */ import_react5.default.createElement(
|
|
1220
563
|
"button",
|
|
1221
564
|
{
|
|
1222
565
|
key: link,
|
|
@@ -1237,7 +580,7 @@ var Navbar = ({
|
|
|
1237
580
|
}
|
|
1238
581
|
},
|
|
1239
582
|
link
|
|
1240
|
-
))), /* @__PURE__ */
|
|
583
|
+
))), /* @__PURE__ */ import_react5.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 } }, /* @__PURE__ */ import_react5.default.createElement(
|
|
1241
584
|
"button",
|
|
1242
585
|
{
|
|
1243
586
|
className: "nb-cta",
|
|
@@ -1257,7 +600,7 @@ var Navbar = ({
|
|
|
1257
600
|
}
|
|
1258
601
|
},
|
|
1259
602
|
ctaText
|
|
1260
|
-
), isMobile && /* @__PURE__ */
|
|
603
|
+
), isMobile && /* @__PURE__ */ import_react5.default.createElement(
|
|
1261
604
|
"button",
|
|
1262
605
|
{
|
|
1263
606
|
className: "nb-ham",
|
|
@@ -1279,7 +622,7 @@ var Navbar = ({
|
|
|
1279
622
|
padding: 0
|
|
1280
623
|
}
|
|
1281
624
|
},
|
|
1282
|
-
/* @__PURE__ */
|
|
625
|
+
/* @__PURE__ */ import_react5.default.createElement("div", { style: {
|
|
1283
626
|
width: "16px",
|
|
1284
627
|
height: "1.5px",
|
|
1285
628
|
background: "rgba(255,255,255,0.7)",
|
|
@@ -1287,7 +630,7 @@ var Navbar = ({
|
|
|
1287
630
|
transform: menuOpen ? "rotate(45deg) translate(4px, 4px)" : "none",
|
|
1288
631
|
transition: "transform 0.25s"
|
|
1289
632
|
} }),
|
|
1290
|
-
/* @__PURE__ */
|
|
633
|
+
/* @__PURE__ */ import_react5.default.createElement("div", { style: {
|
|
1291
634
|
width: "16px",
|
|
1292
635
|
height: "1.5px",
|
|
1293
636
|
background: "rgba(255,255,255,0.7)",
|
|
@@ -1295,7 +638,7 @@ var Navbar = ({
|
|
|
1295
638
|
opacity: menuOpen ? 0 : 1,
|
|
1296
639
|
transition: "opacity 0.2s"
|
|
1297
640
|
} }),
|
|
1298
|
-
/* @__PURE__ */
|
|
641
|
+
/* @__PURE__ */ import_react5.default.createElement("div", { style: {
|
|
1299
642
|
width: "16px",
|
|
1300
643
|
height: "1.5px",
|
|
1301
644
|
background: "rgba(255,255,255,0.7)",
|
|
@@ -1303,7 +646,7 @@ var Navbar = ({
|
|
|
1303
646
|
transform: menuOpen ? "rotate(-45deg) translate(4px, -4px)" : "none",
|
|
1304
647
|
transition: "transform 0.25s"
|
|
1305
648
|
} })
|
|
1306
|
-
))), isMobile && menuOpen && /* @__PURE__ */
|
|
649
|
+
))), isMobile && menuOpen && /* @__PURE__ */ import_react5.default.createElement("div", { style: {
|
|
1307
650
|
animation: "nbSlideDown 0.2s ease",
|
|
1308
651
|
borderTop: "1px solid rgba(255,255,255,0.06)",
|
|
1309
652
|
padding: "10px 16px 16px",
|
|
@@ -1311,7 +654,7 @@ var Navbar = ({
|
|
|
1311
654
|
flexDirection: "column",
|
|
1312
655
|
gap: "3px",
|
|
1313
656
|
background: alpha(bg, 0.98)
|
|
1314
|
-
} }, links.map((link) => /* @__PURE__ */
|
|
657
|
+
} }, links.map((link) => /* @__PURE__ */ import_react5.default.createElement(
|
|
1315
658
|
"button",
|
|
1316
659
|
{
|
|
1317
660
|
key: link,
|
|
@@ -1336,7 +679,7 @@ var Navbar = ({
|
|
|
1336
679
|
}
|
|
1337
680
|
},
|
|
1338
681
|
link,
|
|
1339
|
-
active === link && /* @__PURE__ */
|
|
682
|
+
active === link && /* @__PURE__ */ import_react5.default.createElement(
|
|
1340
683
|
"svg",
|
|
1341
684
|
{
|
|
1342
685
|
width: "14",
|
|
@@ -1347,9 +690,9 @@ var Navbar = ({
|
|
|
1347
690
|
strokeWidth: "2.5",
|
|
1348
691
|
strokeLinecap: "round"
|
|
1349
692
|
},
|
|
1350
|
-
/* @__PURE__ */
|
|
693
|
+
/* @__PURE__ */ import_react5.default.createElement("polyline", { points: "9 18 15 12 9 6" })
|
|
1351
694
|
)
|
|
1352
|
-
)), /* @__PURE__ */
|
|
695
|
+
)), /* @__PURE__ */ import_react5.default.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", margin: "8px 0" } }), /* @__PURE__ */ import_react5.default.createElement(
|
|
1353
696
|
"button",
|
|
1354
697
|
{
|
|
1355
698
|
onClick: () => {
|
|
@@ -1374,7 +717,7 @@ var Navbar = ({
|
|
|
1374
717
|
};
|
|
1375
718
|
|
|
1376
719
|
// src/components/Footer/Footer.jsx
|
|
1377
|
-
var
|
|
720
|
+
var import_react6 = __toESM(require("react"));
|
|
1378
721
|
var Footer = ({
|
|
1379
722
|
logo = "VirtualAI",
|
|
1380
723
|
links = ["Home", "Features", "Pricing", "Blog", "Contact"],
|
|
@@ -1382,21 +725,21 @@ var Footer = ({
|
|
|
1382
725
|
accent = "#6366f1",
|
|
1383
726
|
bg = "#0f172a"
|
|
1384
727
|
}) => {
|
|
1385
|
-
return /* @__PURE__ */
|
|
728
|
+
return /* @__PURE__ */ import_react6.default.createElement("footer", { style: {
|
|
1386
729
|
background: bg,
|
|
1387
730
|
borderTop: "1px solid rgba(255,255,255,0.06)",
|
|
1388
731
|
fontFamily: "system-ui, sans-serif",
|
|
1389
732
|
width: "100%",
|
|
1390
733
|
boxSizing: "border-box",
|
|
1391
734
|
padding: "28px 24px"
|
|
1392
|
-
} }, /* @__PURE__ */
|
|
735
|
+
} }, /* @__PURE__ */ import_react6.default.createElement("div", { style: {
|
|
1393
736
|
maxWidth: "900px",
|
|
1394
737
|
margin: "0 auto",
|
|
1395
738
|
display: "flex",
|
|
1396
739
|
flexDirection: "column",
|
|
1397
740
|
alignItems: "center",
|
|
1398
741
|
gap: "20px"
|
|
1399
|
-
} }, /* @__PURE__ */
|
|
742
|
+
} }, /* @__PURE__ */ import_react6.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ import_react6.default.createElement("div", { style: {
|
|
1400
743
|
width: "26px",
|
|
1401
744
|
height: "26px",
|
|
1402
745
|
borderRadius: "7px",
|
|
@@ -1407,7 +750,7 @@ var Footer = ({
|
|
|
1407
750
|
fontSize: "12px",
|
|
1408
751
|
fontWeight: "800",
|
|
1409
752
|
color: "#fff"
|
|
1410
|
-
} }, logo[0]), /* @__PURE__ */
|
|
753
|
+
} }, logo[0]), /* @__PURE__ */ import_react6.default.createElement("span", { style: { fontSize: "15px", fontWeight: "800", color: "#fff" } }, logo)), /* @__PURE__ */ import_react6.default.createElement("div", { style: { display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "4px" } }, links.map((link) => /* @__PURE__ */ import_react6.default.createElement(
|
|
1411
754
|
"a",
|
|
1412
755
|
{
|
|
1413
756
|
key: link,
|
|
@@ -1424,11 +767,11 @@ var Footer = ({
|
|
|
1424
767
|
onMouseLeave: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.4)"
|
|
1425
768
|
},
|
|
1426
769
|
link
|
|
1427
|
-
))), /* @__PURE__ */
|
|
770
|
+
))), /* @__PURE__ */ import_react6.default.createElement("div", { style: { width: "100%", height: "1px", background: "rgba(255,255,255,0.06)" } }), /* @__PURE__ */ import_react6.default.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.22)", margin: 0 } }, "\xA9 ", (/* @__PURE__ */ new Date()).getFullYear(), " ", copyright, ". All rights reserved.")));
|
|
1428
771
|
};
|
|
1429
772
|
|
|
1430
773
|
// src/components/Sidebar/Sidebar.jsx
|
|
1431
|
-
var
|
|
774
|
+
var import_react7 = __toESM(require("react"));
|
|
1432
775
|
var Sidebar = ({
|
|
1433
776
|
logo = "VirtualAI",
|
|
1434
777
|
accent = "#6366f1",
|
|
@@ -1437,27 +780,27 @@ var Sidebar = ({
|
|
|
1437
780
|
{
|
|
1438
781
|
label: "Dashboard",
|
|
1439
782
|
icon: "M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z",
|
|
1440
|
-
component: /* @__PURE__ */
|
|
783
|
+
component: /* @__PURE__ */ import_react7.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react7.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Dashboard"), /* @__PURE__ */ import_react7.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Welcome to your dashboard overview."))
|
|
1441
784
|
},
|
|
1442
785
|
{
|
|
1443
786
|
label: "Analytics",
|
|
1444
787
|
icon: "M18 20V10M12 20V4M6 20v-6",
|
|
1445
|
-
component: /* @__PURE__ */
|
|
788
|
+
component: /* @__PURE__ */ import_react7.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react7.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Analytics"), /* @__PURE__ */ import_react7.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "View your stats and performance here."))
|
|
1446
789
|
},
|
|
1447
790
|
{
|
|
1448
791
|
label: "Users",
|
|
1449
792
|
icon: "M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75",
|
|
1450
|
-
component: /* @__PURE__ */
|
|
793
|
+
component: /* @__PURE__ */ import_react7.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react7.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Users"), /* @__PURE__ */ import_react7.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Manage your users and permissions."))
|
|
1451
794
|
},
|
|
1452
795
|
{
|
|
1453
796
|
label: "Settings",
|
|
1454
797
|
icon: "M12 15a3 3 0 100-6 3 3 0 000 6zM19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z",
|
|
1455
|
-
component: /* @__PURE__ */
|
|
798
|
+
component: /* @__PURE__ */ import_react7.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react7.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Settings"), /* @__PURE__ */ import_react7.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Configure your preferences here."))
|
|
1456
799
|
}
|
|
1457
800
|
]
|
|
1458
801
|
}) => {
|
|
1459
|
-
const [active, setActive] = (0,
|
|
1460
|
-
const [collapsed, setCollapsed] = (0,
|
|
802
|
+
const [active, setActive] = (0, import_react7.useState)(0);
|
|
803
|
+
const [collapsed, setCollapsed] = (0, import_react7.useState)(false);
|
|
1461
804
|
const alpha = (hex, op) => {
|
|
1462
805
|
const r = parseInt(hex.slice(1, 3), 16);
|
|
1463
806
|
const g = parseInt(hex.slice(3, 5), 16);
|
|
@@ -1465,14 +808,14 @@ var Sidebar = ({
|
|
|
1465
808
|
return `rgba(${r},${g},${b},${op})`;
|
|
1466
809
|
};
|
|
1467
810
|
const activeItem = items[active];
|
|
1468
|
-
return /* @__PURE__ */
|
|
811
|
+
return /* @__PURE__ */ import_react7.default.createElement("div", { style: {
|
|
1469
812
|
display: "flex",
|
|
1470
813
|
height: "480px",
|
|
1471
814
|
fontFamily: "system-ui, sans-serif",
|
|
1472
815
|
borderRadius: "16px",
|
|
1473
816
|
overflow: "hidden",
|
|
1474
817
|
border: "1px solid rgba(255,255,255,0.07)"
|
|
1475
|
-
} }, /* @__PURE__ */
|
|
818
|
+
} }, /* @__PURE__ */ import_react7.default.createElement("div", { style: {
|
|
1476
819
|
width: collapsed ? "60px" : "200px",
|
|
1477
820
|
background: bg,
|
|
1478
821
|
borderRight: "1px solid rgba(255,255,255,0.06)",
|
|
@@ -1481,7 +824,7 @@ var Sidebar = ({
|
|
|
1481
824
|
transition: "width 0.25s ease",
|
|
1482
825
|
flexShrink: 0,
|
|
1483
826
|
overflow: "hidden"
|
|
1484
|
-
} }, /* @__PURE__ */
|
|
827
|
+
} }, /* @__PURE__ */ import_react7.default.createElement("div", { style: {
|
|
1485
828
|
height: "56px",
|
|
1486
829
|
display: "flex",
|
|
1487
830
|
alignItems: "center",
|
|
@@ -1490,7 +833,7 @@ var Sidebar = ({
|
|
|
1490
833
|
borderBottom: "1px solid rgba(255,255,255,0.05)",
|
|
1491
834
|
overflow: "hidden",
|
|
1492
835
|
flexShrink: 0
|
|
1493
|
-
} }, /* @__PURE__ */
|
|
836
|
+
} }, /* @__PURE__ */ import_react7.default.createElement("div", { style: {
|
|
1494
837
|
width: "28px",
|
|
1495
838
|
height: "28px",
|
|
1496
839
|
borderRadius: "8px",
|
|
@@ -1502,7 +845,7 @@ var Sidebar = ({
|
|
|
1502
845
|
fontSize: "13px",
|
|
1503
846
|
fontWeight: "800",
|
|
1504
847
|
color: "#fff"
|
|
1505
|
-
} }, logo[0]), !collapsed && /* @__PURE__ */
|
|
848
|
+
} }, logo[0]), !collapsed && /* @__PURE__ */ import_react7.default.createElement("span", { style: { fontSize: "14px", fontWeight: "800", color: "#fff", whiteSpace: "nowrap" } }, logo)), /* @__PURE__ */ import_react7.default.createElement("nav", { style: { flex: 1, padding: "10px 8px", display: "flex", flexDirection: "column", gap: "3px", overflowY: "auto" } }, items.map((item, i) => /* @__PURE__ */ import_react7.default.createElement(
|
|
1506
849
|
"button",
|
|
1507
850
|
{
|
|
1508
851
|
key: i,
|
|
@@ -1537,7 +880,7 @@ var Sidebar = ({
|
|
|
1537
880
|
}
|
|
1538
881
|
}
|
|
1539
882
|
},
|
|
1540
|
-
/* @__PURE__ */
|
|
883
|
+
/* @__PURE__ */ import_react7.default.createElement(
|
|
1541
884
|
"svg",
|
|
1542
885
|
{
|
|
1543
886
|
width: "16",
|
|
@@ -1550,10 +893,10 @@ var Sidebar = ({
|
|
|
1550
893
|
strokeLinejoin: "round",
|
|
1551
894
|
style: { flexShrink: 0 }
|
|
1552
895
|
},
|
|
1553
|
-
/* @__PURE__ */
|
|
896
|
+
/* @__PURE__ */ import_react7.default.createElement("path", { d: item.icon })
|
|
1554
897
|
),
|
|
1555
|
-
!collapsed && /* @__PURE__ */
|
|
1556
|
-
))), /* @__PURE__ */
|
|
898
|
+
!collapsed && /* @__PURE__ */ import_react7.default.createElement("span", { style: { fontSize: "13px", fontWeight: active === i ? "700" : "500", whiteSpace: "nowrap" } }, item.label)
|
|
899
|
+
))), /* @__PURE__ */ import_react7.default.createElement("div", { style: { padding: "8px", borderTop: "1px solid rgba(255,255,255,0.05)" } }, /* @__PURE__ */ import_react7.default.createElement(
|
|
1557
900
|
"button",
|
|
1558
901
|
{
|
|
1559
902
|
onClick: () => setCollapsed((c) => !c),
|
|
@@ -1573,7 +916,7 @@ var Sidebar = ({
|
|
|
1573
916
|
onMouseEnter: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.7)",
|
|
1574
917
|
onMouseLeave: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.3)"
|
|
1575
918
|
},
|
|
1576
|
-
/* @__PURE__ */
|
|
919
|
+
/* @__PURE__ */ import_react7.default.createElement(
|
|
1577
920
|
"svg",
|
|
1578
921
|
{
|
|
1579
922
|
width: "15",
|
|
@@ -1584,29 +927,29 @@ var Sidebar = ({
|
|
|
1584
927
|
strokeWidth: "2",
|
|
1585
928
|
strokeLinecap: "round"
|
|
1586
929
|
},
|
|
1587
|
-
/* @__PURE__ */
|
|
930
|
+
/* @__PURE__ */ import_react7.default.createElement("path", { d: collapsed ? "M9 18l6-6-6-6" : "M15 18l-6-6 6-6" })
|
|
1588
931
|
)
|
|
1589
|
-
))), /* @__PURE__ */
|
|
932
|
+
))), /* @__PURE__ */ import_react7.default.createElement("div", { style: {
|
|
1590
933
|
flex: 1,
|
|
1591
934
|
background: "rgba(255,255,255,0.02)",
|
|
1592
935
|
overflow: "auto"
|
|
1593
|
-
} }, /* @__PURE__ */
|
|
936
|
+
} }, /* @__PURE__ */ import_react7.default.createElement("div", { style: {
|
|
1594
937
|
height: "56px",
|
|
1595
938
|
display: "flex",
|
|
1596
939
|
alignItems: "center",
|
|
1597
940
|
padding: "0 20px",
|
|
1598
941
|
borderBottom: "1px solid rgba(255,255,255,0.05)",
|
|
1599
942
|
gap: "10px"
|
|
1600
|
-
} }, /* @__PURE__ */
|
|
943
|
+
} }, /* @__PURE__ */ import_react7.default.createElement("div", { style: {
|
|
1601
944
|
width: "6px",
|
|
1602
945
|
height: "6px",
|
|
1603
946
|
borderRadius: "50%",
|
|
1604
947
|
background: accent
|
|
1605
|
-
} }), /* @__PURE__ */
|
|
948
|
+
} }), /* @__PURE__ */ import_react7.default.createElement("span", { style: { fontSize: "14px", fontWeight: "700", color: "#fff" } }, activeItem == null ? void 0 : activeItem.label)), /* @__PURE__ */ import_react7.default.createElement("div", { style: { color: "#fff" } }, activeItem == null ? void 0 : activeItem.component)));
|
|
1606
949
|
};
|
|
1607
950
|
|
|
1608
951
|
// src/components/Charts/Charts.jsx
|
|
1609
|
-
var
|
|
952
|
+
var import_react8 = __toESM(require("react"));
|
|
1610
953
|
var Charts = ({
|
|
1611
954
|
type = "bar",
|
|
1612
955
|
data = [
|
|
@@ -1626,7 +969,7 @@ var Charts = ({
|
|
|
1626
969
|
showGrid = true,
|
|
1627
970
|
showValues = true
|
|
1628
971
|
}) => {
|
|
1629
|
-
const [hovered, setHovered] = (0,
|
|
972
|
+
const [hovered, setHovered] = (0, import_react8.useState)(null);
|
|
1630
973
|
const alpha = (hex, op) => {
|
|
1631
974
|
const r = parseInt(hex.slice(1, 3), 16);
|
|
1632
975
|
const g = parseInt(hex.slice(3, 5), 16);
|
|
@@ -1653,7 +996,7 @@ var Charts = ({
|
|
|
1653
996
|
}));
|
|
1654
997
|
const BarChart = () => {
|
|
1655
998
|
const barW = Math.min(28, chartW / data.length * 0.55);
|
|
1656
|
-
return /* @__PURE__ */
|
|
999
|
+
return /* @__PURE__ */ import_react8.default.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, showGrid && gridLines.map((g, i) => /* @__PURE__ */ import_react8.default.createElement("g", { key: i }, /* @__PURE__ */ import_react8.default.createElement(
|
|
1657
1000
|
"line",
|
|
1658
1001
|
{
|
|
1659
1002
|
x1: padL,
|
|
@@ -1663,7 +1006,7 @@ var Charts = ({
|
|
|
1663
1006
|
stroke: "rgba(255,255,255,0.05)",
|
|
1664
1007
|
strokeWidth: "1"
|
|
1665
1008
|
}
|
|
1666
|
-
), /* @__PURE__ */
|
|
1009
|
+
), /* @__PURE__ */ import_react8.default.createElement(
|
|
1667
1010
|
"text",
|
|
1668
1011
|
{
|
|
1669
1012
|
x: padL - 4,
|
|
@@ -1678,7 +1021,7 @@ var Charts = ({
|
|
|
1678
1021
|
const barH = (d.value - min) / (max - min || 1) * chartH;
|
|
1679
1022
|
const y = padT + chartH - barH;
|
|
1680
1023
|
const isH = hovered === i;
|
|
1681
|
-
return /* @__PURE__ */
|
|
1024
|
+
return /* @__PURE__ */ import_react8.default.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ import_react8.default.createElement(
|
|
1682
1025
|
"rect",
|
|
1683
1026
|
{
|
|
1684
1027
|
x,
|
|
@@ -1688,7 +1031,7 @@ var Charts = ({
|
|
|
1688
1031
|
fill: "transparent",
|
|
1689
1032
|
rx: "4"
|
|
1690
1033
|
}
|
|
1691
|
-
), /* @__PURE__ */
|
|
1034
|
+
), /* @__PURE__ */ import_react8.default.createElement(
|
|
1692
1035
|
"rect",
|
|
1693
1036
|
{
|
|
1694
1037
|
x,
|
|
@@ -1699,7 +1042,7 @@ var Charts = ({
|
|
|
1699
1042
|
rx: "4",
|
|
1700
1043
|
style: { transition: "fill 0.15s" }
|
|
1701
1044
|
}
|
|
1702
|
-
), showValues && isH && /* @__PURE__ */
|
|
1045
|
+
), showValues && isH && /* @__PURE__ */ import_react8.default.createElement(
|
|
1703
1046
|
"text",
|
|
1704
1047
|
{
|
|
1705
1048
|
x: x + barW / 2,
|
|
@@ -1710,7 +1053,7 @@ var Charts = ({
|
|
|
1710
1053
|
fontWeight: "700"
|
|
1711
1054
|
},
|
|
1712
1055
|
d.value
|
|
1713
|
-
), /* @__PURE__ */
|
|
1056
|
+
), /* @__PURE__ */ import_react8.default.createElement(
|
|
1714
1057
|
"text",
|
|
1715
1058
|
{
|
|
1716
1059
|
x: x + barW / 2,
|
|
@@ -1723,7 +1066,7 @@ var Charts = ({
|
|
|
1723
1066
|
));
|
|
1724
1067
|
}));
|
|
1725
1068
|
};
|
|
1726
|
-
const LineChart = () => /* @__PURE__ */
|
|
1069
|
+
const LineChart = () => /* @__PURE__ */ import_react8.default.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, /* @__PURE__ */ import_react8.default.createElement("defs", null, /* @__PURE__ */ import_react8.default.createElement("linearGradient", { id: "lg", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ import_react8.default.createElement("stop", { offset: "0%", stopColor: accent, stopOpacity: "0.3" }), /* @__PURE__ */ import_react8.default.createElement("stop", { offset: "100%", stopColor: accent, stopOpacity: "0" }))), showGrid && gridLines.map((g, i) => /* @__PURE__ */ import_react8.default.createElement("g", { key: i }, /* @__PURE__ */ import_react8.default.createElement(
|
|
1727
1070
|
"line",
|
|
1728
1071
|
{
|
|
1729
1072
|
x1: padL,
|
|
@@ -1733,7 +1076,7 @@ var Charts = ({
|
|
|
1733
1076
|
stroke: "rgba(255,255,255,0.05)",
|
|
1734
1077
|
strokeWidth: "1"
|
|
1735
1078
|
}
|
|
1736
|
-
), /* @__PURE__ */
|
|
1079
|
+
), /* @__PURE__ */ import_react8.default.createElement(
|
|
1737
1080
|
"text",
|
|
1738
1081
|
{
|
|
1739
1082
|
x: padL - 4,
|
|
@@ -1743,7 +1086,7 @@ var Charts = ({
|
|
|
1743
1086
|
fontSize: "9"
|
|
1744
1087
|
},
|
|
1745
1088
|
g.val
|
|
1746
|
-
))), /* @__PURE__ */
|
|
1089
|
+
))), /* @__PURE__ */ import_react8.default.createElement("polygon", { points: areaPoints, fill: "url(#lg)" }), /* @__PURE__ */ import_react8.default.createElement(
|
|
1747
1090
|
"polyline",
|
|
1748
1091
|
{
|
|
1749
1092
|
points,
|
|
@@ -1755,7 +1098,7 @@ var Charts = ({
|
|
|
1755
1098
|
}
|
|
1756
1099
|
), data.map((d, i) => {
|
|
1757
1100
|
const isH = hovered === i;
|
|
1758
|
-
return /* @__PURE__ */
|
|
1101
|
+
return /* @__PURE__ */ import_react8.default.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ import_react8.default.createElement("circle", { cx: getX(i), cy: getY(d.value), r: "10", fill: "transparent" }), /* @__PURE__ */ import_react8.default.createElement(
|
|
1759
1102
|
"circle",
|
|
1760
1103
|
{
|
|
1761
1104
|
cx: getX(i),
|
|
@@ -1766,7 +1109,7 @@ var Charts = ({
|
|
|
1766
1109
|
strokeWidth: "2",
|
|
1767
1110
|
style: { transition: "all 0.15s" }
|
|
1768
1111
|
}
|
|
1769
|
-
), showValues && isH && /* @__PURE__ */
|
|
1112
|
+
), showValues && isH && /* @__PURE__ */ import_react8.default.createElement(
|
|
1770
1113
|
"text",
|
|
1771
1114
|
{
|
|
1772
1115
|
x: getX(i),
|
|
@@ -1777,7 +1120,7 @@ var Charts = ({
|
|
|
1777
1120
|
fontWeight: "700"
|
|
1778
1121
|
},
|
|
1779
1122
|
d.value
|
|
1780
|
-
), /* @__PURE__ */
|
|
1123
|
+
), /* @__PURE__ */ import_react8.default.createElement(
|
|
1781
1124
|
"text",
|
|
1782
1125
|
{
|
|
1783
1126
|
x: getX(i),
|
|
@@ -1817,7 +1160,7 @@ var Charts = ({
|
|
|
1817
1160
|
startAngle += angle;
|
|
1818
1161
|
return slice;
|
|
1819
1162
|
});
|
|
1820
|
-
return /* @__PURE__ */
|
|
1163
|
+
return /* @__PURE__ */ import_react8.default.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, slices.map((s) => /* @__PURE__ */ import_react8.default.createElement("g", { key: s.i, onMouseEnter: () => setHovered(s.i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ import_react8.default.createElement(
|
|
1821
1164
|
"path",
|
|
1822
1165
|
{
|
|
1823
1166
|
d: s.path,
|
|
@@ -1827,7 +1170,7 @@ var Charts = ({
|
|
|
1827
1170
|
transform: hovered === s.i ? `translate(${Math.cos(s.angle / 2 - Math.PI / 2) * 4}, ${Math.sin(s.angle / 2 - Math.PI / 2) * 4})` : "",
|
|
1828
1171
|
style: { transition: "transform 0.15s", cursor: "pointer" }
|
|
1829
1172
|
}
|
|
1830
|
-
))), hovered !== null && /* @__PURE__ */
|
|
1173
|
+
))), hovered !== null && /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(
|
|
1831
1174
|
"text",
|
|
1832
1175
|
{
|
|
1833
1176
|
x: cx,
|
|
@@ -1838,7 +1181,7 @@ var Charts = ({
|
|
|
1838
1181
|
fontWeight: "800"
|
|
1839
1182
|
},
|
|
1840
1183
|
(_a = data[hovered]) == null ? void 0 : _a.value
|
|
1841
|
-
), /* @__PURE__ */
|
|
1184
|
+
), /* @__PURE__ */ import_react8.default.createElement(
|
|
1842
1185
|
"text",
|
|
1843
1186
|
{
|
|
1844
1187
|
x: cx,
|
|
@@ -1848,7 +1191,7 @@ var Charts = ({
|
|
|
1848
1191
|
fontSize: "9"
|
|
1849
1192
|
},
|
|
1850
1193
|
(_b = data[hovered]) == null ? void 0 : _b.label
|
|
1851
|
-
)), hovered === null && /* @__PURE__ */
|
|
1194
|
+
)), hovered === null && /* @__PURE__ */ import_react8.default.createElement(
|
|
1852
1195
|
"text",
|
|
1853
1196
|
{
|
|
1854
1197
|
x: cx,
|
|
@@ -1860,7 +1203,7 @@ var Charts = ({
|
|
|
1860
1203
|
"Hover slice"
|
|
1861
1204
|
));
|
|
1862
1205
|
};
|
|
1863
|
-
const AreaChart = () => /* @__PURE__ */
|
|
1206
|
+
const AreaChart = () => /* @__PURE__ */ import_react8.default.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, /* @__PURE__ */ import_react8.default.createElement("defs", null, /* @__PURE__ */ import_react8.default.createElement("linearGradient", { id: "ag", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ import_react8.default.createElement("stop", { offset: "0%", stopColor: accent, stopOpacity: "0.5" }), /* @__PURE__ */ import_react8.default.createElement("stop", { offset: "100%", stopColor: accent, stopOpacity: "0.02" }))), showGrid && gridLines.map((g, i) => /* @__PURE__ */ import_react8.default.createElement("g", { key: i }, /* @__PURE__ */ import_react8.default.createElement(
|
|
1864
1207
|
"line",
|
|
1865
1208
|
{
|
|
1866
1209
|
x1: padL,
|
|
@@ -1870,7 +1213,7 @@ var Charts = ({
|
|
|
1870
1213
|
stroke: "rgba(255,255,255,0.05)",
|
|
1871
1214
|
strokeWidth: "1"
|
|
1872
1215
|
}
|
|
1873
|
-
), /* @__PURE__ */
|
|
1216
|
+
), /* @__PURE__ */ import_react8.default.createElement(
|
|
1874
1217
|
"text",
|
|
1875
1218
|
{
|
|
1876
1219
|
x: padL - 4,
|
|
@@ -1880,7 +1223,7 @@ var Charts = ({
|
|
|
1880
1223
|
fontSize: "9"
|
|
1881
1224
|
},
|
|
1882
1225
|
g.val
|
|
1883
|
-
))), /* @__PURE__ */
|
|
1226
|
+
))), /* @__PURE__ */ import_react8.default.createElement("polygon", { points: areaPoints, fill: "url(#ag)" }), /* @__PURE__ */ import_react8.default.createElement(
|
|
1884
1227
|
"polyline",
|
|
1885
1228
|
{
|
|
1886
1229
|
points,
|
|
@@ -1890,7 +1233,7 @@ var Charts = ({
|
|
|
1890
1233
|
strokeLinejoin: "round",
|
|
1891
1234
|
strokeLinecap: "round"
|
|
1892
1235
|
}
|
|
1893
|
-
), data.map((d, i) => /* @__PURE__ */
|
|
1236
|
+
), data.map((d, i) => /* @__PURE__ */ import_react8.default.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ import_react8.default.createElement("rect", { x: getX(i) - 12, y: padT, width: 24, height: chartH, fill: "transparent" }), hovered === i && /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(
|
|
1894
1237
|
"line",
|
|
1895
1238
|
{
|
|
1896
1239
|
x1: getX(i),
|
|
@@ -1901,7 +1244,7 @@ var Charts = ({
|
|
|
1901
1244
|
strokeWidth: "1",
|
|
1902
1245
|
strokeDasharray: "3 3"
|
|
1903
1246
|
}
|
|
1904
|
-
), showValues && /* @__PURE__ */
|
|
1247
|
+
), showValues && /* @__PURE__ */ import_react8.default.createElement(
|
|
1905
1248
|
"text",
|
|
1906
1249
|
{
|
|
1907
1250
|
x: getX(i),
|
|
@@ -1912,7 +1255,7 @@ var Charts = ({
|
|
|
1912
1255
|
fontWeight: "700"
|
|
1913
1256
|
},
|
|
1914
1257
|
d.value
|
|
1915
|
-
)), /* @__PURE__ */
|
|
1258
|
+
)), /* @__PURE__ */ import_react8.default.createElement(
|
|
1916
1259
|
"text",
|
|
1917
1260
|
{
|
|
1918
1261
|
x: getX(i),
|
|
@@ -1924,12 +1267,12 @@ var Charts = ({
|
|
|
1924
1267
|
d.label
|
|
1925
1268
|
))));
|
|
1926
1269
|
const renderChart = () => {
|
|
1927
|
-
if (type === "line") return /* @__PURE__ */
|
|
1928
|
-
if (type === "pie") return /* @__PURE__ */
|
|
1929
|
-
if (type === "area") return /* @__PURE__ */
|
|
1930
|
-
return /* @__PURE__ */
|
|
1270
|
+
if (type === "line") return /* @__PURE__ */ import_react8.default.createElement(LineChart, null);
|
|
1271
|
+
if (type === "pie") return /* @__PURE__ */ import_react8.default.createElement(PieChart, null);
|
|
1272
|
+
if (type === "area") return /* @__PURE__ */ import_react8.default.createElement(AreaChart, null);
|
|
1273
|
+
return /* @__PURE__ */ import_react8.default.createElement(BarChart, null);
|
|
1931
1274
|
};
|
|
1932
|
-
return /* @__PURE__ */
|
|
1275
|
+
return /* @__PURE__ */ import_react8.default.createElement("div", { style: {
|
|
1933
1276
|
background: bg,
|
|
1934
1277
|
borderRadius: radius,
|
|
1935
1278
|
padding: "20px",
|
|
@@ -1938,7 +1281,7 @@ var Charts = ({
|
|
|
1938
1281
|
width: "100%",
|
|
1939
1282
|
maxWidth: "360px",
|
|
1940
1283
|
boxSizing: "border-box"
|
|
1941
|
-
} }, /* @__PURE__ */
|
|
1284
|
+
} }, /* @__PURE__ */ import_react8.default.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "16px" } }, /* @__PURE__ */ import_react8.default.createElement("p", { style: { fontSize: "14px", fontWeight: "700", color: "#fff", margin: 0 } }, title), /* @__PURE__ */ import_react8.default.createElement("span", { style: {
|
|
1942
1285
|
fontSize: "10px",
|
|
1943
1286
|
fontWeight: "700",
|
|
1944
1287
|
padding: "3px 9px",
|
|
@@ -1951,7 +1294,7 @@ var Charts = ({
|
|
|
1951
1294
|
};
|
|
1952
1295
|
|
|
1953
1296
|
// src/components/ImageCard/ImageCard.jsx
|
|
1954
|
-
var
|
|
1297
|
+
var import_react9 = __toESM(require("react"));
|
|
1955
1298
|
var ImageCard = ({
|
|
1956
1299
|
image = "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
|
|
1957
1300
|
tag = "Travel",
|
|
@@ -1964,14 +1307,14 @@ var ImageCard = ({
|
|
|
1964
1307
|
onButtonClick = () => {
|
|
1965
1308
|
}
|
|
1966
1309
|
}) => {
|
|
1967
|
-
const [hovered, setHovered] = (0,
|
|
1310
|
+
const [hovered, setHovered] = (0, import_react9.useState)(false);
|
|
1968
1311
|
const alpha = (hex, op) => {
|
|
1969
1312
|
const r = parseInt(hex.slice(1, 3), 16);
|
|
1970
1313
|
const g = parseInt(hex.slice(3, 5), 16);
|
|
1971
1314
|
const b = parseInt(hex.slice(5, 7), 16);
|
|
1972
1315
|
return `rgba(${r},${g},${b},${op})`;
|
|
1973
1316
|
};
|
|
1974
|
-
return /* @__PURE__ */
|
|
1317
|
+
return /* @__PURE__ */ import_react9.default.createElement(
|
|
1975
1318
|
"div",
|
|
1976
1319
|
{
|
|
1977
1320
|
onMouseEnter: () => setHovered(true),
|
|
@@ -1988,7 +1331,7 @@ var ImageCard = ({
|
|
|
1988
1331
|
boxShadow: hovered ? `0 16px 40px rgba(0,0,0,0.5)` : "0 4px 20px rgba(0,0,0,0.3)"
|
|
1989
1332
|
}
|
|
1990
1333
|
},
|
|
1991
|
-
/* @__PURE__ */
|
|
1334
|
+
/* @__PURE__ */ import_react9.default.createElement("div", { style: { position: "relative", width: "100%", height: "180px", overflow: "hidden" } }, /* @__PURE__ */ import_react9.default.createElement(
|
|
1992
1335
|
"img",
|
|
1993
1336
|
{
|
|
1994
1337
|
src: image,
|
|
@@ -2001,11 +1344,11 @@ var ImageCard = ({
|
|
|
2001
1344
|
transition: "transform 0.4s ease"
|
|
2002
1345
|
}
|
|
2003
1346
|
}
|
|
2004
|
-
), /* @__PURE__ */
|
|
1347
|
+
), /* @__PURE__ */ import_react9.default.createElement("div", { style: {
|
|
2005
1348
|
position: "absolute",
|
|
2006
1349
|
inset: 0,
|
|
2007
1350
|
background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)"
|
|
2008
|
-
} }), tag && /* @__PURE__ */
|
|
1351
|
+
} }), tag && /* @__PURE__ */ import_react9.default.createElement("div", { style: {
|
|
2009
1352
|
position: "absolute",
|
|
2010
1353
|
top: "12px",
|
|
2011
1354
|
left: "12px",
|
|
@@ -2018,18 +1361,18 @@ var ImageCard = ({
|
|
|
2018
1361
|
letterSpacing: "0.5px",
|
|
2019
1362
|
textTransform: "uppercase"
|
|
2020
1363
|
} }, tag)),
|
|
2021
|
-
/* @__PURE__ */
|
|
1364
|
+
/* @__PURE__ */ import_react9.default.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ import_react9.default.createElement("h3", { style: {
|
|
2022
1365
|
fontSize: "15px",
|
|
2023
1366
|
fontWeight: "700",
|
|
2024
1367
|
color: "#fff",
|
|
2025
1368
|
margin: "0 0 8px",
|
|
2026
1369
|
lineHeight: 1.4
|
|
2027
|
-
} }, title), /* @__PURE__ */
|
|
1370
|
+
} }, title), /* @__PURE__ */ import_react9.default.createElement("p", { style: {
|
|
2028
1371
|
fontSize: "13px",
|
|
2029
1372
|
color: "rgba(255,255,255,0.45)",
|
|
2030
1373
|
lineHeight: 1.65,
|
|
2031
1374
|
margin: "0 0 18px"
|
|
2032
|
-
} }, description), /* @__PURE__ */
|
|
1375
|
+
} }, description), /* @__PURE__ */ import_react9.default.createElement(
|
|
2033
1376
|
"button",
|
|
2034
1377
|
{
|
|
2035
1378
|
onClick: onButtonClick,
|
|
@@ -2055,7 +1398,7 @@ var ImageCard = ({
|
|
|
2055
1398
|
};
|
|
2056
1399
|
|
|
2057
1400
|
// src/components/ImageSlider/ImageSlider.jsx
|
|
2058
|
-
var
|
|
1401
|
+
var import_react10 = __toESM(require("react"));
|
|
2059
1402
|
var ImageSlider = ({
|
|
2060
1403
|
images = [
|
|
2061
1404
|
{
|
|
@@ -2086,8 +1429,8 @@ var ImageSlider = ({
|
|
|
2086
1429
|
showCaption = true,
|
|
2087
1430
|
autoPlay = false
|
|
2088
1431
|
}) => {
|
|
2089
|
-
const [current, setCurrent] = (0,
|
|
2090
|
-
const [dir, setDir] = (0,
|
|
1432
|
+
const [current, setCurrent] = (0, import_react10.useState)(0);
|
|
1433
|
+
const [dir, setDir] = (0, import_react10.useState)(null);
|
|
2091
1434
|
const alpha = (hex, op) => {
|
|
2092
1435
|
const r = parseInt(hex.slice(1, 3), 16);
|
|
2093
1436
|
const g = parseInt(hex.slice(3, 5), 16);
|
|
@@ -2107,7 +1450,7 @@ var ImageSlider = ({
|
|
|
2107
1450
|
setCurrent(i);
|
|
2108
1451
|
};
|
|
2109
1452
|
const img = images[current];
|
|
2110
|
-
return /* @__PURE__ */
|
|
1453
|
+
return /* @__PURE__ */ import_react10.default.createElement("div", { style: {
|
|
2111
1454
|
background: bg,
|
|
2112
1455
|
borderRadius: radius,
|
|
2113
1456
|
overflow: "hidden",
|
|
@@ -2115,7 +1458,7 @@ var ImageSlider = ({
|
|
|
2115
1458
|
border: "1px solid rgba(255,255,255,0.07)",
|
|
2116
1459
|
fontFamily: "system-ui, sans-serif",
|
|
2117
1460
|
boxShadow: "0 10px 40px rgba(0,0,0,0.4)"
|
|
2118
|
-
} }, /* @__PURE__ */
|
|
1461
|
+
} }, /* @__PURE__ */ import_react10.default.createElement("div", { style: { position: "relative", width: "100%", height: "200px", overflow: "hidden", background: "#000" } }, /* @__PURE__ */ import_react10.default.createElement(
|
|
2119
1462
|
"img",
|
|
2120
1463
|
{
|
|
2121
1464
|
key: current,
|
|
@@ -2128,11 +1471,11 @@ var ImageSlider = ({
|
|
|
2128
1471
|
animation: `sliderFade 0.35s ease`
|
|
2129
1472
|
}
|
|
2130
1473
|
}
|
|
2131
|
-
), /* @__PURE__ */
|
|
1474
|
+
), /* @__PURE__ */ import_react10.default.createElement("style", null, `@keyframes sliderFade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }`), /* @__PURE__ */ import_react10.default.createElement("div", { style: {
|
|
2132
1475
|
position: "absolute",
|
|
2133
1476
|
inset: 0,
|
|
2134
1477
|
background: "linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%)"
|
|
2135
|
-
} }), img.tag && /* @__PURE__ */
|
|
1478
|
+
} }), img.tag && /* @__PURE__ */ import_react10.default.createElement("div", { style: {
|
|
2136
1479
|
position: "absolute",
|
|
2137
1480
|
top: "12px",
|
|
2138
1481
|
left: "12px",
|
|
@@ -2144,7 +1487,7 @@ var ImageSlider = ({
|
|
|
2144
1487
|
color: "#fff",
|
|
2145
1488
|
letterSpacing: "0.5px",
|
|
2146
1489
|
textTransform: "uppercase"
|
|
2147
|
-
} }, img.tag), /* @__PURE__ */
|
|
1490
|
+
} }, img.tag), /* @__PURE__ */ import_react10.default.createElement("div", { style: {
|
|
2148
1491
|
position: "absolute",
|
|
2149
1492
|
top: "12px",
|
|
2150
1493
|
right: "12px",
|
|
@@ -2154,7 +1497,7 @@ var ImageSlider = ({
|
|
|
2154
1497
|
fontSize: "10px",
|
|
2155
1498
|
fontWeight: "600",
|
|
2156
1499
|
color: "rgba(255,255,255,0.7)"
|
|
2157
|
-
} }, current + 1, " / ", images.length), /* @__PURE__ */
|
|
1500
|
+
} }, current + 1, " / ", images.length), /* @__PURE__ */ import_react10.default.createElement(
|
|
2158
1501
|
"button",
|
|
2159
1502
|
{
|
|
2160
1503
|
onClick: prev,
|
|
@@ -2179,7 +1522,7 @@ var ImageSlider = ({
|
|
|
2179
1522
|
onMouseEnter: (e) => e.currentTarget.style.background = alpha(accent, 0.8),
|
|
2180
1523
|
onMouseLeave: (e) => e.currentTarget.style.background = "rgba(0,0,0,0.5)"
|
|
2181
1524
|
},
|
|
2182
|
-
/* @__PURE__ */
|
|
1525
|
+
/* @__PURE__ */ import_react10.default.createElement(
|
|
2183
1526
|
"svg",
|
|
2184
1527
|
{
|
|
2185
1528
|
width: "14",
|
|
@@ -2190,9 +1533,9 @@ var ImageSlider = ({
|
|
|
2190
1533
|
strokeWidth: "2.5",
|
|
2191
1534
|
strokeLinecap: "round"
|
|
2192
1535
|
},
|
|
2193
|
-
/* @__PURE__ */
|
|
1536
|
+
/* @__PURE__ */ import_react10.default.createElement("polyline", { points: "15 18 9 12 15 6" })
|
|
2194
1537
|
)
|
|
2195
|
-
), /* @__PURE__ */
|
|
1538
|
+
), /* @__PURE__ */ import_react10.default.createElement(
|
|
2196
1539
|
"button",
|
|
2197
1540
|
{
|
|
2198
1541
|
onClick: next,
|
|
@@ -2217,7 +1560,7 @@ var ImageSlider = ({
|
|
|
2217
1560
|
onMouseEnter: (e) => e.currentTarget.style.background = alpha(accent, 0.8),
|
|
2218
1561
|
onMouseLeave: (e) => e.currentTarget.style.background = "rgba(0,0,0,0.5)"
|
|
2219
1562
|
},
|
|
2220
|
-
/* @__PURE__ */
|
|
1563
|
+
/* @__PURE__ */ import_react10.default.createElement(
|
|
2221
1564
|
"svg",
|
|
2222
1565
|
{
|
|
2223
1566
|
width: "14",
|
|
@@ -2228,9 +1571,9 @@ var ImageSlider = ({
|
|
|
2228
1571
|
strokeWidth: "2.5",
|
|
2229
1572
|
strokeLinecap: "round"
|
|
2230
1573
|
},
|
|
2231
|
-
/* @__PURE__ */
|
|
1574
|
+
/* @__PURE__ */ import_react10.default.createElement("polyline", { points: "9 18 15 12 9 6" })
|
|
2232
1575
|
)
|
|
2233
|
-
)), showCaption && /* @__PURE__ */
|
|
1576
|
+
)), showCaption && /* @__PURE__ */ import_react10.default.createElement("div", { style: { padding: "14px 16px 4px" } }, /* @__PURE__ */ import_react10.default.createElement(
|
|
2234
1577
|
"p",
|
|
2235
1578
|
{
|
|
2236
1579
|
style: {
|
|
@@ -2244,12 +1587,12 @@ var ImageSlider = ({
|
|
|
2244
1587
|
key: current + "-title"
|
|
2245
1588
|
},
|
|
2246
1589
|
img.title
|
|
2247
|
-
)), showDots && /* @__PURE__ */
|
|
1590
|
+
)), showDots && /* @__PURE__ */ import_react10.default.createElement("div", { style: {
|
|
2248
1591
|
display: "flex",
|
|
2249
1592
|
justifyContent: "center",
|
|
2250
1593
|
gap: "6px",
|
|
2251
1594
|
padding: "12px 16px 16px"
|
|
2252
|
-
} }, images.map((_, i) => /* @__PURE__ */
|
|
1595
|
+
} }, images.map((_, i) => /* @__PURE__ */ import_react10.default.createElement(
|
|
2253
1596
|
"button",
|
|
2254
1597
|
{
|
|
2255
1598
|
key: i,
|
|
@@ -2269,7 +1612,7 @@ var ImageSlider = ({
|
|
|
2269
1612
|
};
|
|
2270
1613
|
|
|
2271
1614
|
// src/components/BackgoundImageSlider/BackgoundImageSlider.jsx
|
|
2272
|
-
var
|
|
1615
|
+
var import_react11 = __toESM(require("react"));
|
|
2273
1616
|
var BackgoundImageSlider = ({
|
|
2274
1617
|
images = [
|
|
2275
1618
|
{
|
|
@@ -2305,15 +1648,15 @@ var BackgoundImageSlider = ({
|
|
|
2305
1648
|
autoPlay = false,
|
|
2306
1649
|
autoPlayInterval = 4e3
|
|
2307
1650
|
}) => {
|
|
2308
|
-
const [current, setCurrent] = (0,
|
|
2309
|
-
const [animating, setAnimating] = (0,
|
|
1651
|
+
const [current, setCurrent] = (0, import_react11.useState)(0);
|
|
1652
|
+
const [animating, setAnimating] = (0, import_react11.useState)(false);
|
|
2310
1653
|
const alpha = (hex, op) => {
|
|
2311
1654
|
const r = parseInt(hex.slice(1, 3), 16);
|
|
2312
1655
|
const g = parseInt(hex.slice(3, 5), 16);
|
|
2313
1656
|
const b = parseInt(hex.slice(5, 7), 16);
|
|
2314
1657
|
return `rgba(${r},${g},${b},${op})`;
|
|
2315
1658
|
};
|
|
2316
|
-
const go = (0,
|
|
1659
|
+
const go = (0, import_react11.useCallback)((index) => {
|
|
2317
1660
|
if (animating) return;
|
|
2318
1661
|
setAnimating(true);
|
|
2319
1662
|
setCurrent((index + images.length) % images.length);
|
|
@@ -2321,17 +1664,17 @@ var BackgoundImageSlider = ({
|
|
|
2321
1664
|
}, [animating, images.length]);
|
|
2322
1665
|
const prev = () => go(current - 1);
|
|
2323
1666
|
const next = () => go(current + 1);
|
|
2324
|
-
(0,
|
|
1667
|
+
(0, import_react11.useEffect)(() => {
|
|
2325
1668
|
if (!autoPlay) return;
|
|
2326
1669
|
const t = setInterval(() => go(current + 1), autoPlayInterval);
|
|
2327
1670
|
return () => clearInterval(t);
|
|
2328
1671
|
}, [autoPlay, autoPlayInterval, current, go]);
|
|
2329
1672
|
const img = images[current];
|
|
2330
|
-
return /* @__PURE__ */
|
|
1673
|
+
return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement("style", null, `
|
|
2331
1674
|
@keyframes hs-fade { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
|
|
2332
1675
|
@keyframes hs-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
|
|
2333
1676
|
.hs-prev:hover, .hs-next:hover { background: rgba(0,0,0,0.65) !important; border-color: rgba(255,255,255,0.35) !important; }
|
|
2334
|
-
`), /* @__PURE__ */
|
|
1677
|
+
`), /* @__PURE__ */ import_react11.default.createElement("div", { style: {
|
|
2335
1678
|
position: "relative",
|
|
2336
1679
|
width,
|
|
2337
1680
|
height,
|
|
@@ -2339,7 +1682,7 @@ var BackgoundImageSlider = ({
|
|
|
2339
1682
|
overflow: "hidden",
|
|
2340
1683
|
fontFamily: "system-ui, -apple-system, sans-serif",
|
|
2341
1684
|
userSelect: "none"
|
|
2342
|
-
} }, /* @__PURE__ */
|
|
1685
|
+
} }, /* @__PURE__ */ import_react11.default.createElement(
|
|
2343
1686
|
"img",
|
|
2344
1687
|
{
|
|
2345
1688
|
key: current,
|
|
@@ -2354,11 +1697,11 @@ var BackgoundImageSlider = ({
|
|
|
2354
1697
|
animation: "hs-fade 0.4s ease"
|
|
2355
1698
|
}
|
|
2356
1699
|
}
|
|
2357
|
-
), /* @__PURE__ */
|
|
1700
|
+
), /* @__PURE__ */ import_react11.default.createElement("div", { style: {
|
|
2358
1701
|
position: "absolute",
|
|
2359
1702
|
inset: 0,
|
|
2360
1703
|
background: "linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.1) 100%)"
|
|
2361
|
-
} }), img.tag && /* @__PURE__ */
|
|
1704
|
+
} }), img.tag && /* @__PURE__ */ import_react11.default.createElement(
|
|
2362
1705
|
"div",
|
|
2363
1706
|
{
|
|
2364
1707
|
key: current + "-tag",
|
|
@@ -2378,7 +1721,7 @@ var BackgoundImageSlider = ({
|
|
|
2378
1721
|
}
|
|
2379
1722
|
},
|
|
2380
1723
|
img.tag
|
|
2381
|
-
), /* @__PURE__ */
|
|
1724
|
+
), /* @__PURE__ */ import_react11.default.createElement("div", { style: {
|
|
2382
1725
|
position: "absolute",
|
|
2383
1726
|
top: "24px",
|
|
2384
1727
|
right: "28px",
|
|
@@ -2388,7 +1731,7 @@ var BackgoundImageSlider = ({
|
|
|
2388
1731
|
fontSize: "11px",
|
|
2389
1732
|
fontWeight: "600",
|
|
2390
1733
|
color: "rgba(255,255,255,0.7)"
|
|
2391
|
-
} }, current + 1, " / ", images.length), /* @__PURE__ */
|
|
1734
|
+
} }, current + 1, " / ", images.length), /* @__PURE__ */ import_react11.default.createElement(
|
|
2392
1735
|
"button",
|
|
2393
1736
|
{
|
|
2394
1737
|
className: "hs-prev",
|
|
@@ -2413,7 +1756,7 @@ var BackgoundImageSlider = ({
|
|
|
2413
1756
|
zIndex: 10
|
|
2414
1757
|
}
|
|
2415
1758
|
},
|
|
2416
|
-
/* @__PURE__ */
|
|
1759
|
+
/* @__PURE__ */ import_react11.default.createElement(
|
|
2417
1760
|
"svg",
|
|
2418
1761
|
{
|
|
2419
1762
|
width: "18",
|
|
@@ -2425,9 +1768,9 @@ var BackgoundImageSlider = ({
|
|
|
2425
1768
|
strokeLinecap: "round",
|
|
2426
1769
|
strokeLinejoin: "round"
|
|
2427
1770
|
},
|
|
2428
|
-
/* @__PURE__ */
|
|
1771
|
+
/* @__PURE__ */ import_react11.default.createElement("polyline", { points: "15 18 9 12 15 6" })
|
|
2429
1772
|
)
|
|
2430
|
-
), /* @__PURE__ */
|
|
1773
|
+
), /* @__PURE__ */ import_react11.default.createElement(
|
|
2431
1774
|
"button",
|
|
2432
1775
|
{
|
|
2433
1776
|
className: "hs-next",
|
|
@@ -2452,7 +1795,7 @@ var BackgoundImageSlider = ({
|
|
|
2452
1795
|
zIndex: 10
|
|
2453
1796
|
}
|
|
2454
1797
|
},
|
|
2455
|
-
/* @__PURE__ */
|
|
1798
|
+
/* @__PURE__ */ import_react11.default.createElement(
|
|
2456
1799
|
"svg",
|
|
2457
1800
|
{
|
|
2458
1801
|
width: "18",
|
|
@@ -2464,15 +1807,15 @@ var BackgoundImageSlider = ({
|
|
|
2464
1807
|
strokeLinecap: "round",
|
|
2465
1808
|
strokeLinejoin: "round"
|
|
2466
1809
|
},
|
|
2467
|
-
/* @__PURE__ */
|
|
1810
|
+
/* @__PURE__ */ import_react11.default.createElement("polyline", { points: "9 18 15 12 9 6" })
|
|
2468
1811
|
)
|
|
2469
|
-
), /* @__PURE__ */
|
|
1812
|
+
), /* @__PURE__ */ import_react11.default.createElement("div", { style: {
|
|
2470
1813
|
position: "absolute",
|
|
2471
1814
|
bottom: showDots ? "56px" : "28px",
|
|
2472
1815
|
left: "28px",
|
|
2473
1816
|
right: "28px",
|
|
2474
1817
|
zIndex: 5
|
|
2475
|
-
} }, /* @__PURE__ */
|
|
1818
|
+
} }, /* @__PURE__ */ import_react11.default.createElement(
|
|
2476
1819
|
"h2",
|
|
2477
1820
|
{
|
|
2478
1821
|
key: current + "-title",
|
|
@@ -2488,7 +1831,7 @@ var BackgoundImageSlider = ({
|
|
|
2488
1831
|
}
|
|
2489
1832
|
},
|
|
2490
1833
|
img.title
|
|
2491
|
-
), /* @__PURE__ */
|
|
1834
|
+
), /* @__PURE__ */ import_react11.default.createElement(
|
|
2492
1835
|
"p",
|
|
2493
1836
|
{
|
|
2494
1837
|
key: current + "-desc",
|
|
@@ -2503,7 +1846,7 @@ var BackgoundImageSlider = ({
|
|
|
2503
1846
|
}
|
|
2504
1847
|
},
|
|
2505
1848
|
img.description
|
|
2506
|
-
)), showDots && /* @__PURE__ */
|
|
1849
|
+
)), showDots && /* @__PURE__ */ import_react11.default.createElement("div", { style: {
|
|
2507
1850
|
position: "absolute",
|
|
2508
1851
|
bottom: "20px",
|
|
2509
1852
|
left: 0,
|
|
@@ -2512,7 +1855,7 @@ var BackgoundImageSlider = ({
|
|
|
2512
1855
|
justifyContent: "center",
|
|
2513
1856
|
gap: "6px",
|
|
2514
1857
|
zIndex: 5
|
|
2515
|
-
} }, images.map((_, i) => /* @__PURE__ */
|
|
1858
|
+
} }, images.map((_, i) => /* @__PURE__ */ import_react11.default.createElement(
|
|
2516
1859
|
"button",
|
|
2517
1860
|
{
|
|
2518
1861
|
key: i,
|
|
@@ -2532,7 +1875,7 @@ var BackgoundImageSlider = ({
|
|
|
2532
1875
|
};
|
|
2533
1876
|
|
|
2534
1877
|
// src/components/PageLoader/PageLoader.jsx
|
|
2535
|
-
var
|
|
1878
|
+
var import_react12 = __toESM(require("react"));
|
|
2536
1879
|
var PageLoader = ({
|
|
2537
1880
|
logo = "VirtualAI",
|
|
2538
1881
|
accent = "#6366f1",
|
|
@@ -2544,15 +1887,15 @@ var PageLoader = ({
|
|
|
2544
1887
|
onComplete = () => {
|
|
2545
1888
|
}
|
|
2546
1889
|
}) => {
|
|
2547
|
-
const [progress, setProgress] = (0,
|
|
2548
|
-
const [done, setDone] = (0,
|
|
1890
|
+
const [progress, setProgress] = (0, import_react12.useState)(0);
|
|
1891
|
+
const [done, setDone] = (0, import_react12.useState)(false);
|
|
2549
1892
|
const alpha = (hex, op) => {
|
|
2550
1893
|
const r = parseInt(hex.slice(1, 3), 16);
|
|
2551
1894
|
const g = parseInt(hex.slice(3, 5), 16);
|
|
2552
1895
|
const b = parseInt(hex.slice(5, 7), 16);
|
|
2553
1896
|
return `rgba(${r},${g},${b},${op})`;
|
|
2554
1897
|
};
|
|
2555
|
-
(0,
|
|
1898
|
+
(0, import_react12.useEffect)(() => {
|
|
2556
1899
|
const steps = 100;
|
|
2557
1900
|
const interval = duration / steps;
|
|
2558
1901
|
let current = 0;
|
|
@@ -2570,13 +1913,13 @@ var PageLoader = ({
|
|
|
2570
1913
|
return () => clearInterval(timer);
|
|
2571
1914
|
}, [duration]);
|
|
2572
1915
|
if (done) return null;
|
|
2573
|
-
return /* @__PURE__ */
|
|
1916
|
+
return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement("style", null, `
|
|
2574
1917
|
@keyframes pl-spin { to { transform: rotate(360deg); } }
|
|
2575
1918
|
@keyframes pl-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.15);opacity:0.7} }
|
|
2576
1919
|
@keyframes pl-dot { 0%,80%,100%{transform:scale(0.6);opacity:0.3} 40%{transform:scale(1);opacity:1} }
|
|
2577
1920
|
@keyframes pl-fade { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
|
|
2578
1921
|
@keyframes pl-bar { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
|
|
2579
|
-
`), /* @__PURE__ */
|
|
1922
|
+
`), /* @__PURE__ */ import_react12.default.createElement("div", { style: {
|
|
2580
1923
|
width: "100%",
|
|
2581
1924
|
height: "100%",
|
|
2582
1925
|
background: bg,
|
|
@@ -2587,7 +1930,7 @@ var PageLoader = ({
|
|
|
2587
1930
|
gap: "28px",
|
|
2588
1931
|
fontFamily: "system-ui, -apple-system, sans-serif",
|
|
2589
1932
|
animation: "pl-fade 0.3s ease"
|
|
2590
|
-
} }, /* @__PURE__ */
|
|
1933
|
+
} }, /* @__PURE__ */ import_react12.default.createElement("div", { style: {
|
|
2591
1934
|
position: "absolute",
|
|
2592
1935
|
top: "-100px",
|
|
2593
1936
|
left: "-100px",
|
|
@@ -2597,7 +1940,7 @@ var PageLoader = ({
|
|
|
2597
1940
|
background: `radial-gradient(circle, ${alpha(accent, 0.12)}, transparent 70%)`,
|
|
2598
1941
|
filter: "blur(60px)",
|
|
2599
1942
|
pointerEvents: "none"
|
|
2600
|
-
} }), /* @__PURE__ */
|
|
1943
|
+
} }), /* @__PURE__ */ import_react12.default.createElement("div", { style: {
|
|
2601
1944
|
position: "absolute",
|
|
2602
1945
|
bottom: "-100px",
|
|
2603
1946
|
right: "-100px",
|
|
@@ -2607,7 +1950,7 @@ var PageLoader = ({
|
|
|
2607
1950
|
background: `radial-gradient(circle, ${alpha(accent, 0.08)}, transparent 70%)`,
|
|
2608
1951
|
filter: "blur(60px)",
|
|
2609
1952
|
pointerEvents: "none"
|
|
2610
|
-
} }), /* @__PURE__ */
|
|
1953
|
+
} }), /* @__PURE__ */ import_react12.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", animation: "pl-fade 0.4s ease" } }, /* @__PURE__ */ import_react12.default.createElement("div", { style: {
|
|
2611
1954
|
width: "36px",
|
|
2612
1955
|
height: "36px",
|
|
2613
1956
|
borderRadius: "10px",
|
|
@@ -2619,7 +1962,7 @@ var PageLoader = ({
|
|
|
2619
1962
|
fontWeight: "800",
|
|
2620
1963
|
color: "#fff",
|
|
2621
1964
|
animation: type === "pulse" ? `pl-pulse 1.5s ease infinite` : "none"
|
|
2622
|
-
} }, logo[0]), /* @__PURE__ */
|
|
1965
|
+
} }, logo[0]), /* @__PURE__ */ import_react12.default.createElement("span", { style: { fontSize: "20px", fontWeight: "800", color: "#fff", letterSpacing: "-0.5px" } }, logo)), type === "spinner" && /* @__PURE__ */ import_react12.default.createElement("div", { style: { position: "relative", width: "56px", height: "56px" } }, /* @__PURE__ */ import_react12.default.createElement("svg", { width: "56", height: "56", viewBox: "0 0 56 56" }, /* @__PURE__ */ import_react12.default.createElement(
|
|
2623
1966
|
"circle",
|
|
2624
1967
|
{
|
|
2625
1968
|
cx: "28",
|
|
@@ -2629,7 +1972,7 @@ var PageLoader = ({
|
|
|
2629
1972
|
stroke: alpha(accent, 0.12),
|
|
2630
1973
|
strokeWidth: "4"
|
|
2631
1974
|
}
|
|
2632
|
-
), /* @__PURE__ */
|
|
1975
|
+
), /* @__PURE__ */ import_react12.default.createElement(
|
|
2633
1976
|
"circle",
|
|
2634
1977
|
{
|
|
2635
1978
|
cx: "28",
|
|
@@ -2642,7 +1985,7 @@ var PageLoader = ({
|
|
|
2642
1985
|
strokeDasharray: "34.8 104.4",
|
|
2643
1986
|
style: { transformOrigin: "center", animation: "pl-spin 0.9s linear infinite" }
|
|
2644
1987
|
}
|
|
2645
|
-
)), /* @__PURE__ */
|
|
1988
|
+
)), /* @__PURE__ */ import_react12.default.createElement("span", { style: {
|
|
2646
1989
|
position: "absolute",
|
|
2647
1990
|
inset: 0,
|
|
2648
1991
|
display: "flex",
|
|
@@ -2651,26 +1994,26 @@ var PageLoader = ({
|
|
|
2651
1994
|
fontSize: "11px",
|
|
2652
1995
|
fontWeight: "700",
|
|
2653
1996
|
color: accent
|
|
2654
|
-
} }, Math.round(progress), "%")), type === "dots" && /* @__PURE__ */
|
|
1997
|
+
} }, Math.round(progress), "%")), type === "dots" && /* @__PURE__ */ import_react12.default.createElement("div", { style: { display: "flex", gap: "10px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ import_react12.default.createElement("div", { key: i, style: {
|
|
2655
1998
|
width: "12px",
|
|
2656
1999
|
height: "12px",
|
|
2657
2000
|
borderRadius: "50%",
|
|
2658
2001
|
background: accent,
|
|
2659
2002
|
animation: `pl-dot 1.2s ease infinite`,
|
|
2660
2003
|
animationDelay: `${i * 0.2}s`
|
|
2661
|
-
} }))), type === "pulse" && /* @__PURE__ */
|
|
2004
|
+
} }))), type === "pulse" && /* @__PURE__ */ import_react12.default.createElement("div", { style: { position: "relative", width: "56px", height: "56px" } }, [0, 1].map((i) => /* @__PURE__ */ import_react12.default.createElement("div", { key: i, style: {
|
|
2662
2005
|
position: "absolute",
|
|
2663
2006
|
inset: 0,
|
|
2664
2007
|
borderRadius: "50%",
|
|
2665
2008
|
background: alpha(accent, 0.3),
|
|
2666
2009
|
animation: `pl-pulse 1.5s ease infinite`,
|
|
2667
2010
|
animationDelay: `${i * 0.4}s`
|
|
2668
|
-
} })), /* @__PURE__ */
|
|
2011
|
+
} })), /* @__PURE__ */ import_react12.default.createElement("div", { style: {
|
|
2669
2012
|
position: "absolute",
|
|
2670
2013
|
inset: "30%",
|
|
2671
2014
|
borderRadius: "50%",
|
|
2672
2015
|
background: accent
|
|
2673
|
-
} })), type === "ring" && /* @__PURE__ */
|
|
2016
|
+
} })), type === "ring" && /* @__PURE__ */ import_react12.default.createElement("div", { style: {
|
|
2674
2017
|
width: "52px",
|
|
2675
2018
|
height: "52px",
|
|
2676
2019
|
borderRadius: "50%",
|
|
@@ -2678,13 +2021,13 @@ var PageLoader = ({
|
|
|
2678
2021
|
borderTop: `4px solid ${accent}`,
|
|
2679
2022
|
borderRight: `4px solid ${accent}`,
|
|
2680
2023
|
animation: "pl-spin 0.9s linear infinite"
|
|
2681
|
-
} }), type === "bar" && /* @__PURE__ */
|
|
2024
|
+
} }), type === "bar" && /* @__PURE__ */ import_react12.default.createElement("div", { style: { width: "200px", display: "flex", flexDirection: "column", gap: "8px" } }, /* @__PURE__ */ import_react12.default.createElement("div", { style: {
|
|
2682
2025
|
width: "100%",
|
|
2683
2026
|
height: "4px",
|
|
2684
2027
|
background: alpha(accent, 0.15),
|
|
2685
2028
|
borderRadius: "2px",
|
|
2686
2029
|
overflow: "hidden"
|
|
2687
|
-
} }, /* @__PURE__ */
|
|
2030
|
+
} }, /* @__PURE__ */ import_react12.default.createElement("div", { style: {
|
|
2688
2031
|
height: "100%",
|
|
2689
2032
|
width: `${progress}%`,
|
|
2690
2033
|
borderRadius: "2px",
|
|
@@ -2692,40 +2035,479 @@ var PageLoader = ({
|
|
|
2692
2035
|
backgroundSize: "200% 100%",
|
|
2693
2036
|
animation: "pl-bar 1.2s linear infinite",
|
|
2694
2037
|
transition: "width 0.03s linear"
|
|
2695
|
-
} })), /* @__PURE__ */
|
|
2038
|
+
} })), /* @__PURE__ */ import_react12.default.createElement("div", { style: {
|
|
2696
2039
|
display: "flex",
|
|
2697
2040
|
justifyContent: "space-between",
|
|
2698
2041
|
fontSize: "11px",
|
|
2699
2042
|
color: "rgba(255,255,255,0.3)"
|
|
2700
|
-
} }, /* @__PURE__ */
|
|
2043
|
+
} }, /* @__PURE__ */ import_react12.default.createElement("span", null, loadingText), /* @__PURE__ */ import_react12.default.createElement("span", null, Math.round(progress), "%")), subText && /* @__PURE__ */ import_react12.default.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.18)", margin: "4px 0 0", textAlign: "center" } }, subText)), type !== "bar" && /* @__PURE__ */ import_react12.default.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ import_react12.default.createElement("p", { style: { fontSize: "13px", color: "rgba(255,255,255,0.3)", margin: "0 0 4px" } }, loadingText), subText && /* @__PURE__ */ import_react12.default.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.15)", margin: 0 } }, subText))));
|
|
2044
|
+
};
|
|
2045
|
+
|
|
2046
|
+
// src/components/OTPInput/OTPInput.jsx
|
|
2047
|
+
var import_react13 = __toESM(require("react"));
|
|
2048
|
+
var OTPInput = ({
|
|
2049
|
+
length = 6,
|
|
2050
|
+
onComplete = () => {
|
|
2051
|
+
},
|
|
2052
|
+
onCancel = () => {
|
|
2053
|
+
},
|
|
2054
|
+
accent = "#6366f1",
|
|
2055
|
+
bg = "#0f172a",
|
|
2056
|
+
radius = "16px",
|
|
2057
|
+
label = "Enter verification code",
|
|
2058
|
+
subLabel = "We sent a code to your email",
|
|
2059
|
+
errorText = "",
|
|
2060
|
+
resendText = "Resend code",
|
|
2061
|
+
onResend = () => {
|
|
2062
|
+
}
|
|
2063
|
+
}) => {
|
|
2064
|
+
const [otp, setOtp] = (0, import_react13.useState)(Array(length).fill(""));
|
|
2065
|
+
const [focused, setFocused] = (0, import_react13.useState)(0);
|
|
2066
|
+
const [completed, setCompleted] = (0, import_react13.useState)(false);
|
|
2067
|
+
const [resendTimer, setResendTimer] = (0, import_react13.useState)(30);
|
|
2068
|
+
const inputs = (0, import_react13.useRef)([]);
|
|
2069
|
+
const alpha = (hex, op) => {
|
|
2070
|
+
const r = parseInt(hex.slice(1, 3), 16);
|
|
2071
|
+
const g = parseInt(hex.slice(3, 5), 16);
|
|
2072
|
+
const b = parseInt(hex.slice(5, 7), 16);
|
|
2073
|
+
return `rgba(${r},${g},${b},${op})`;
|
|
2074
|
+
};
|
|
2075
|
+
(0, import_react13.useEffect)(() => {
|
|
2076
|
+
var _a;
|
|
2077
|
+
(_a = inputs.current[0]) == null ? void 0 : _a.focus();
|
|
2078
|
+
}, []);
|
|
2079
|
+
(0, import_react13.useEffect)(() => {
|
|
2080
|
+
if (resendTimer <= 0) return;
|
|
2081
|
+
const t = setInterval(() => setResendTimer((s) => s - 1), 1e3);
|
|
2082
|
+
return () => clearInterval(t);
|
|
2083
|
+
}, [resendTimer]);
|
|
2084
|
+
const handleChange = (e, i) => {
|
|
2085
|
+
var _a;
|
|
2086
|
+
const val = e.target.value.replace(/\D/g, "").slice(-1);
|
|
2087
|
+
const newOtp = [...otp];
|
|
2088
|
+
newOtp[i] = val;
|
|
2089
|
+
setOtp(newOtp);
|
|
2090
|
+
if (val && i < length - 1) {
|
|
2091
|
+
(_a = inputs.current[i + 1]) == null ? void 0 : _a.focus();
|
|
2092
|
+
setFocused(i + 1);
|
|
2093
|
+
}
|
|
2094
|
+
if (newOtp.every((v) => v !== "")) {
|
|
2095
|
+
setCompleted(true);
|
|
2096
|
+
onComplete(newOtp.join(""));
|
|
2097
|
+
} else {
|
|
2098
|
+
setCompleted(false);
|
|
2099
|
+
}
|
|
2100
|
+
};
|
|
2101
|
+
const handleKeyDown = (e, i) => {
|
|
2102
|
+
var _a, _b, _c;
|
|
2103
|
+
if (e.key === "Backspace") {
|
|
2104
|
+
const newOtp = [...otp];
|
|
2105
|
+
if (otp[i]) {
|
|
2106
|
+
newOtp[i] = "";
|
|
2107
|
+
setOtp(newOtp);
|
|
2108
|
+
} else if (i > 0) {
|
|
2109
|
+
newOtp[i - 1] = "";
|
|
2110
|
+
setOtp(newOtp);
|
|
2111
|
+
(_a = inputs.current[i - 1]) == null ? void 0 : _a.focus();
|
|
2112
|
+
setFocused(i - 1);
|
|
2113
|
+
}
|
|
2114
|
+
setCompleted(false);
|
|
2115
|
+
}
|
|
2116
|
+
if (e.key === "ArrowLeft" && i > 0) {
|
|
2117
|
+
(_b = inputs.current[i - 1]) == null ? void 0 : _b.focus();
|
|
2118
|
+
setFocused(i - 1);
|
|
2119
|
+
}
|
|
2120
|
+
if (e.key === "ArrowRight" && i < length - 1) {
|
|
2121
|
+
(_c = inputs.current[i + 1]) == null ? void 0 : _c.focus();
|
|
2122
|
+
setFocused(i + 1);
|
|
2123
|
+
}
|
|
2124
|
+
};
|
|
2125
|
+
const handlePaste = (e) => {
|
|
2126
|
+
var _a;
|
|
2127
|
+
e.preventDefault();
|
|
2128
|
+
const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
|
|
2129
|
+
if (!pasted) return;
|
|
2130
|
+
const newOtp = [...otp];
|
|
2131
|
+
pasted.split("").forEach((ch, i) => {
|
|
2132
|
+
newOtp[i] = ch;
|
|
2133
|
+
});
|
|
2134
|
+
setOtp(newOtp);
|
|
2135
|
+
const nextIndex = Math.min(pasted.length, length - 1);
|
|
2136
|
+
(_a = inputs.current[nextIndex]) == null ? void 0 : _a.focus();
|
|
2137
|
+
setFocused(nextIndex);
|
|
2138
|
+
if (newOtp.every((v) => v !== "")) {
|
|
2139
|
+
setCompleted(true);
|
|
2140
|
+
onComplete(newOtp.join(""));
|
|
2141
|
+
}
|
|
2142
|
+
};
|
|
2143
|
+
const handleResend = () => {
|
|
2144
|
+
var _a;
|
|
2145
|
+
setOtp(Array(length).fill(""));
|
|
2146
|
+
setCompleted(false);
|
|
2147
|
+
setResendTimer(30);
|
|
2148
|
+
(_a = inputs.current[0]) == null ? void 0 : _a.focus();
|
|
2149
|
+
setFocused(0);
|
|
2150
|
+
onResend();
|
|
2151
|
+
};
|
|
2152
|
+
return /* @__PURE__ */ import_react13.default.createElement("div", { style: {
|
|
2153
|
+
background: bg,
|
|
2154
|
+
borderRadius: radius,
|
|
2155
|
+
padding: "28px 24px",
|
|
2156
|
+
width: "fit-content",
|
|
2157
|
+
fontFamily: "system-ui, sans-serif",
|
|
2158
|
+
border: "1px solid rgba(255,255,255,0.07)",
|
|
2159
|
+
boxShadow: "0 10px 40px rgba(0,0,0,0.4)"
|
|
2160
|
+
} }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { textAlign: "center", marginBottom: "24px" } }, /* @__PURE__ */ import_react13.default.createElement("div", { style: {
|
|
2161
|
+
width: "44px",
|
|
2162
|
+
height: "44px",
|
|
2163
|
+
borderRadius: "12px",
|
|
2164
|
+
background: alpha(accent, 0.12),
|
|
2165
|
+
border: `1px solid ${alpha(accent, 0.25)}`,
|
|
2166
|
+
display: "flex",
|
|
2167
|
+
alignItems: "center",
|
|
2168
|
+
justifyContent: "center",
|
|
2169
|
+
margin: "0 auto 14px"
|
|
2170
|
+
} }, /* @__PURE__ */ import_react13.default.createElement(
|
|
2171
|
+
"svg",
|
|
2172
|
+
{
|
|
2173
|
+
width: "20",
|
|
2174
|
+
height: "20",
|
|
2175
|
+
viewBox: "0 0 24 24",
|
|
2176
|
+
fill: "none",
|
|
2177
|
+
stroke: accent,
|
|
2178
|
+
strokeWidth: "2",
|
|
2179
|
+
strokeLinecap: "round",
|
|
2180
|
+
strokeLinejoin: "round"
|
|
2181
|
+
},
|
|
2182
|
+
/* @__PURE__ */ import_react13.default.createElement("rect", { x: "2", y: "7", width: "20", height: "14", rx: "2" }),
|
|
2183
|
+
/* @__PURE__ */ import_react13.default.createElement("path", { d: "M16 3l-4 4-4-4" })
|
|
2184
|
+
)), /* @__PURE__ */ import_react13.default.createElement("p", { style: { fontSize: "15px", fontWeight: "700", color: "#fff", margin: "0 0 5px" } }, label), /* @__PURE__ */ import_react13.default.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", margin: 0 } }, subLabel)), /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", gap: "10px", justifyContent: "center", marginBottom: "8px" } }, otp.map((val, i) => /* @__PURE__ */ import_react13.default.createElement(
|
|
2185
|
+
"input",
|
|
2186
|
+
{
|
|
2187
|
+
key: i,
|
|
2188
|
+
ref: (el) => inputs.current[i] = el,
|
|
2189
|
+
type: "text",
|
|
2190
|
+
inputMode: "numeric",
|
|
2191
|
+
maxLength: 1,
|
|
2192
|
+
value: val,
|
|
2193
|
+
onChange: (e) => handleChange(e, i),
|
|
2194
|
+
onKeyDown: (e) => handleKeyDown(e, i),
|
|
2195
|
+
onPaste: handlePaste,
|
|
2196
|
+
onFocus: () => setFocused(i),
|
|
2197
|
+
style: {
|
|
2198
|
+
width: "44px",
|
|
2199
|
+
height: "52px",
|
|
2200
|
+
textAlign: "center",
|
|
2201
|
+
fontSize: "20px",
|
|
2202
|
+
fontWeight: "700",
|
|
2203
|
+
color: "#fff",
|
|
2204
|
+
background: val ? alpha(accent, 0.1) : "rgba(255,255,255,0.04)",
|
|
2205
|
+
border: `1.5px solid ${errorText ? "rgba(239,68,68,0.6)" : focused === i ? accent : val ? alpha(accent, 0.4) : "rgba(255,255,255,0.1)"}`,
|
|
2206
|
+
borderRadius: "12px",
|
|
2207
|
+
outline: "none",
|
|
2208
|
+
caretColor: accent,
|
|
2209
|
+
transition: "all 0.2s",
|
|
2210
|
+
fontFamily: "inherit"
|
|
2211
|
+
}
|
|
2212
|
+
}
|
|
2213
|
+
))), length === 6 && /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", justifyContent: "center", marginBottom: "8px" } }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", gap: "10px" } }, [0, 1, 2].map((i) => /* @__PURE__ */ import_react13.default.createElement("div", { key: i, style: { width: "44px" } })), /* @__PURE__ */ import_react13.default.createElement("div", { style: { width: "10px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { width: "6px", height: "1.5px", background: "rgba(255,255,255,0.15)", borderRadius: "1px" } })), [0, 1, 2].map((i) => /* @__PURE__ */ import_react13.default.createElement("div", { key: i, style: { width: "44px" } })))), errorText && /* @__PURE__ */ import_react13.default.createElement("p", { style: {
|
|
2214
|
+
fontSize: "12px",
|
|
2215
|
+
color: "#f87171",
|
|
2216
|
+
textAlign: "center",
|
|
2217
|
+
margin: "6px 0 0",
|
|
2218
|
+
display: "flex",
|
|
2219
|
+
alignItems: "center",
|
|
2220
|
+
justifyContent: "center",
|
|
2221
|
+
gap: "5px"
|
|
2222
|
+
} }, /* @__PURE__ */ import_react13.default.createElement(
|
|
2223
|
+
"svg",
|
|
2224
|
+
{
|
|
2225
|
+
width: "12",
|
|
2226
|
+
height: "12",
|
|
2227
|
+
viewBox: "0 0 24 24",
|
|
2228
|
+
fill: "none",
|
|
2229
|
+
stroke: "currentColor",
|
|
2230
|
+
strokeWidth: "2.5",
|
|
2231
|
+
strokeLinecap: "round"
|
|
2232
|
+
},
|
|
2233
|
+
/* @__PURE__ */ import_react13.default.createElement("circle", { cx: "12", cy: "12", r: "10" }),
|
|
2234
|
+
/* @__PURE__ */ import_react13.default.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
|
|
2235
|
+
/* @__PURE__ */ import_react13.default.createElement("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
|
|
2236
|
+
), errorText), /* @__PURE__ */ import_react13.default.createElement(
|
|
2237
|
+
"button",
|
|
2238
|
+
{
|
|
2239
|
+
onClick: () => completed && onComplete(otp.join("")),
|
|
2240
|
+
disabled: !completed,
|
|
2241
|
+
style: {
|
|
2242
|
+
width: "100%",
|
|
2243
|
+
padding: "12px",
|
|
2244
|
+
borderRadius: "12px",
|
|
2245
|
+
border: "none",
|
|
2246
|
+
marginTop: "20px",
|
|
2247
|
+
background: completed ? `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.7)})` : "rgba(255,255,255,0.06)",
|
|
2248
|
+
color: completed ? "#fff" : "rgba(255,255,255,0.25)",
|
|
2249
|
+
fontSize: "14px",
|
|
2250
|
+
fontWeight: "700",
|
|
2251
|
+
cursor: completed ? "pointer" : "not-allowed",
|
|
2252
|
+
fontFamily: "inherit",
|
|
2253
|
+
transition: "all 0.25s"
|
|
2254
|
+
}
|
|
2255
|
+
},
|
|
2256
|
+
completed ? "Verify Code" : `Enter ${length - otp.filter((v) => v).length} more digit${length - otp.filter((v) => v).length !== 1 ? "s" : ""}`
|
|
2257
|
+
), /* @__PURE__ */ import_react13.default.createElement("p", { style: { textAlign: "center", fontSize: "12px", color: "rgba(255,255,255,0.25)", margin: "14px 0 0" } }, "Didn't receive it?", " ", /* @__PURE__ */ import_react13.default.createElement(
|
|
2258
|
+
"button",
|
|
2259
|
+
{
|
|
2260
|
+
onClick: handleResend,
|
|
2261
|
+
disabled: resendTimer > 0,
|
|
2262
|
+
style: {
|
|
2263
|
+
background: "transparent",
|
|
2264
|
+
border: "none",
|
|
2265
|
+
padding: 0,
|
|
2266
|
+
fontSize: "12px",
|
|
2267
|
+
fontWeight: "700",
|
|
2268
|
+
color: resendTimer > 0 ? "rgba(255,255,255,0.25)" : accent,
|
|
2269
|
+
cursor: resendTimer > 0 ? "default" : "pointer",
|
|
2270
|
+
fontFamily: "inherit"
|
|
2271
|
+
}
|
|
2272
|
+
},
|
|
2273
|
+
resendTimer > 0 ? `${resendText} (${resendTimer}s)` : resendText
|
|
2274
|
+
)));
|
|
2275
|
+
};
|
|
2276
|
+
|
|
2277
|
+
// src/components/InvoiceCard/InvoiceCard.jsx
|
|
2278
|
+
var import_react14 = __toESM(require("react"));
|
|
2279
|
+
var InvoiceCard = ({
|
|
2280
|
+
invoiceNumber = "INV-2024-001",
|
|
2281
|
+
date = "21 March 2024",
|
|
2282
|
+
dueDate = "31 March 2024",
|
|
2283
|
+
from = {
|
|
2284
|
+
name: "VirtualAI Inc.",
|
|
2285
|
+
email: "billing@virtualai.com",
|
|
2286
|
+
address: "123 Tech Street, San Francisco, CA"
|
|
2287
|
+
},
|
|
2288
|
+
to = {
|
|
2289
|
+
name: "Aryan Sharma",
|
|
2290
|
+
email: "aryan@example.com",
|
|
2291
|
+
address: "456 Dev Lane, Mumbai, India"
|
|
2292
|
+
},
|
|
2293
|
+
items = [
|
|
2294
|
+
{ name: "Pro Plan Subscription", qty: 1, price: 29 },
|
|
2295
|
+
{ name: "Extra AI Credits (500)", qty: 2, price: 9 },
|
|
2296
|
+
{ name: "Custom Domain Setup", qty: 1, price: 15 }
|
|
2297
|
+
],
|
|
2298
|
+
taxRate = 18,
|
|
2299
|
+
currency = "$",
|
|
2300
|
+
accent = "#6366f1",
|
|
2301
|
+
bg = "#0f172a",
|
|
2302
|
+
radius = "20px",
|
|
2303
|
+
status = "unpaid",
|
|
2304
|
+
onPayClick = () => {
|
|
2305
|
+
},
|
|
2306
|
+
onDownloadClick = () => {
|
|
2307
|
+
}
|
|
2308
|
+
}) => {
|
|
2309
|
+
const [paid, setPaid] = (0, import_react14.useState)(status === "paid");
|
|
2310
|
+
const alpha = (hex, op) => {
|
|
2311
|
+
const r = parseInt(hex.slice(1, 3), 16);
|
|
2312
|
+
const g = parseInt(hex.slice(3, 5), 16);
|
|
2313
|
+
const b = parseInt(hex.slice(5, 7), 16);
|
|
2314
|
+
return `rgba(${r},${g},${b},${op})`;
|
|
2315
|
+
};
|
|
2316
|
+
const subtotal = items.reduce((s, i) => s + i.qty * i.price, 0);
|
|
2317
|
+
const tax = parseFloat((subtotal * taxRate / 100).toFixed(2));
|
|
2318
|
+
const total = parseFloat((subtotal + tax).toFixed(2));
|
|
2319
|
+
const statusConfig = {
|
|
2320
|
+
paid: { label: "Paid", bg: "rgba(16,185,129,0.15)", color: "#34d399", border: "rgba(16,185,129,0.3)" },
|
|
2321
|
+
unpaid: { label: "Unpaid", bg: "rgba(239,68,68,0.12)", color: "#f87171", border: "rgba(239,68,68,0.3)" },
|
|
2322
|
+
pending: { label: "Pending", bg: "rgba(245,158,11,0.12)", color: "#fbbf24", border: "rgba(245,158,11,0.3)" }
|
|
2323
|
+
};
|
|
2324
|
+
const sc = statusConfig[paid ? "paid" : status] || statusConfig.unpaid;
|
|
2325
|
+
const Row = ({ label, value, bold, large, accentColor }) => /* @__PURE__ */ import_react14.default.createElement("div", { style: {
|
|
2326
|
+
display: "flex",
|
|
2327
|
+
justifyContent: "space-between",
|
|
2328
|
+
alignItems: "center",
|
|
2329
|
+
padding: "5px 0"
|
|
2330
|
+
} }, /* @__PURE__ */ import_react14.default.createElement("span", { style: {
|
|
2331
|
+
fontSize: large ? "14px" : "12px",
|
|
2332
|
+
fontWeight: bold ? "700" : "400",
|
|
2333
|
+
color: large ? "#fff" : "rgba(255,255,255,0.45)"
|
|
2334
|
+
} }, label), /* @__PURE__ */ import_react14.default.createElement("span", { style: {
|
|
2335
|
+
fontSize: large ? "16px" : "13px",
|
|
2336
|
+
fontWeight: bold ? "800" : "600",
|
|
2337
|
+
color: accentColor || (large ? "#fff" : "rgba(255,255,255,0.85)")
|
|
2338
|
+
} }, currency, typeof value === "number" ? value.toFixed(2) : value));
|
|
2339
|
+
return /* @__PURE__ */ import_react14.default.createElement("div", { style: {
|
|
2340
|
+
background: bg,
|
|
2341
|
+
borderRadius: radius,
|
|
2342
|
+
padding: "24px",
|
|
2343
|
+
width: "340px",
|
|
2344
|
+
fontFamily: "system-ui, sans-serif",
|
|
2345
|
+
border: "1px solid rgba(255,255,255,0.07)",
|
|
2346
|
+
boxShadow: "0 10px 40px rgba(0,0,0,0.4)",
|
|
2347
|
+
color: "#fff"
|
|
2348
|
+
} }, /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "20px" } }, /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "7px", marginBottom: "4px" } }, /* @__PURE__ */ import_react14.default.createElement("div", { style: {
|
|
2349
|
+
width: "24px",
|
|
2350
|
+
height: "24px",
|
|
2351
|
+
borderRadius: "6px",
|
|
2352
|
+
background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.6)})`,
|
|
2353
|
+
display: "flex",
|
|
2354
|
+
alignItems: "center",
|
|
2355
|
+
justifyContent: "center",
|
|
2356
|
+
fontSize: "11px",
|
|
2357
|
+
fontWeight: "800",
|
|
2358
|
+
color: "#fff"
|
|
2359
|
+
} }, "V"), /* @__PURE__ */ import_react14.default.createElement("span", { style: { fontSize: "14px", fontWeight: "800" } }, from.name)), /* @__PURE__ */ import_react14.default.createElement("p", { style: { fontSize: "11px", color: "rgba(255,255,255,0.3)", margin: 0 } }, invoiceNumber)), /* @__PURE__ */ import_react14.default.createElement("div", { style: {
|
|
2360
|
+
padding: "4px 12px",
|
|
2361
|
+
borderRadius: "20px",
|
|
2362
|
+
fontSize: "11px",
|
|
2363
|
+
fontWeight: "700",
|
|
2364
|
+
background: sc.bg,
|
|
2365
|
+
color: sc.color,
|
|
2366
|
+
border: `1px solid ${sc.border}`,
|
|
2367
|
+
textTransform: "uppercase",
|
|
2368
|
+
letterSpacing: "0.5px"
|
|
2369
|
+
} }, sc.label)), /* @__PURE__ */ import_react14.default.createElement("div", { style: {
|
|
2370
|
+
display: "grid",
|
|
2371
|
+
gridTemplateColumns: "1fr 1fr",
|
|
2372
|
+
gap: "12px",
|
|
2373
|
+
background: "rgba(255,255,255,0.03)",
|
|
2374
|
+
border: "1px solid rgba(255,255,255,0.06)",
|
|
2375
|
+
borderRadius: "12px",
|
|
2376
|
+
padding: "14px",
|
|
2377
|
+
marginBottom: "20px"
|
|
2378
|
+
} }, [{ label: "From", info: from }, { label: "To", info: to }].map(({ label, info }) => /* @__PURE__ */ import_react14.default.createElement("div", { key: label }, /* @__PURE__ */ import_react14.default.createElement("p", { style: { fontSize: "10px", fontWeight: "700", color: "rgba(255,255,255,0.25)", textTransform: "uppercase", letterSpacing: "0.8px", marginBottom: "5px" } }, label), /* @__PURE__ */ import_react14.default.createElement("p", { style: { fontSize: "12px", fontWeight: "700", color: "#fff", margin: "0 0 2px" } }, info.name), /* @__PURE__ */ import_react14.default.createElement("p", { style: { fontSize: "11px", color: "rgba(255,255,255,0.35)", margin: "0 0 2px" } }, info.email), /* @__PURE__ */ import_react14.default.createElement("p", { style: { fontSize: "10px", color: "rgba(255,255,255,0.25)", margin: 0, lineHeight: 1.4 } }, info.address)))), /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "flex", gap: "10px", marginBottom: "20px" } }, [{ label: "Issue Date", val: date }, { label: "Due Date", val: dueDate }].map(({ label, val }) => /* @__PURE__ */ import_react14.default.createElement("div", { key: label, style: {
|
|
2379
|
+
flex: 1,
|
|
2380
|
+
background: "rgba(255,255,255,0.03)",
|
|
2381
|
+
border: "1px solid rgba(255,255,255,0.06)",
|
|
2382
|
+
borderRadius: "10px",
|
|
2383
|
+
padding: "10px 12px"
|
|
2384
|
+
} }, /* @__PURE__ */ import_react14.default.createElement("p", { style: { fontSize: "10px", color: "rgba(255,255,255,0.25)", textTransform: "uppercase", letterSpacing: "0.8px", margin: "0 0 3px", fontWeight: "700" } }, label), /* @__PURE__ */ import_react14.default.createElement("p", { style: { fontSize: "12px", fontWeight: "700", color: "#fff", margin: 0 } }, val)))), /* @__PURE__ */ import_react14.default.createElement("div", { style: { marginBottom: "16px" } }, /* @__PURE__ */ import_react14.default.createElement("div", { style: {
|
|
2385
|
+
display: "grid",
|
|
2386
|
+
gridTemplateColumns: "1fr auto auto",
|
|
2387
|
+
gap: "8px",
|
|
2388
|
+
padding: "6px 8px",
|
|
2389
|
+
borderBottom: "1px solid rgba(255,255,255,0.06)",
|
|
2390
|
+
marginBottom: "4px"
|
|
2391
|
+
} }, ["Item", "Qty", "Amount"].map((h) => /* @__PURE__ */ import_react14.default.createElement("span", { key: h, style: { fontSize: "10px", fontWeight: "700", color: "rgba(255,255,255,0.25)", textTransform: "uppercase", letterSpacing: "0.8px", textAlign: h !== "Item" ? "right" : "left" } }, h))), items.map((item, i) => /* @__PURE__ */ import_react14.default.createElement("div", { key: i, style: {
|
|
2392
|
+
display: "grid",
|
|
2393
|
+
gridTemplateColumns: "1fr auto auto",
|
|
2394
|
+
gap: "8px",
|
|
2395
|
+
padding: "8px",
|
|
2396
|
+
borderRadius: "8px",
|
|
2397
|
+
background: i % 2 === 0 ? "rgba(255,255,255,0.02)" : "transparent"
|
|
2398
|
+
} }, /* @__PURE__ */ import_react14.default.createElement("span", { style: { fontSize: "12px", color: "rgba(255,255,255,0.75)" } }, item.name), /* @__PURE__ */ import_react14.default.createElement("span", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", textAlign: "right" } }, "\xD7", item.qty), /* @__PURE__ */ import_react14.default.createElement("span", { style: { fontSize: "12px", fontWeight: "600", color: "#fff", textAlign: "right" } }, currency, (item.qty * item.price).toFixed(2))))), /* @__PURE__ */ import_react14.default.createElement("div", { style: {
|
|
2399
|
+
background: "rgba(255,255,255,0.03)",
|
|
2400
|
+
border: "1px solid rgba(255,255,255,0.06)",
|
|
2401
|
+
borderRadius: "12px",
|
|
2402
|
+
padding: "12px 14px",
|
|
2403
|
+
marginBottom: "20px"
|
|
2404
|
+
} }, /* @__PURE__ */ import_react14.default.createElement(Row, { label: "Subtotal", value: subtotal }), /* @__PURE__ */ import_react14.default.createElement(Row, { label: `Tax (${taxRate}%)`, value: tax }), /* @__PURE__ */ import_react14.default.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", margin: "8px 0" } }), /* @__PURE__ */ import_react14.default.createElement(Row, { label: "Total", value: total, bold: true, large: true, accentColor: accent })), /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "flex", gap: "8px" } }, !paid && /* @__PURE__ */ import_react14.default.createElement(
|
|
2405
|
+
"button",
|
|
2406
|
+
{
|
|
2407
|
+
onClick: () => {
|
|
2408
|
+
setPaid(true);
|
|
2409
|
+
onPayClick();
|
|
2410
|
+
},
|
|
2411
|
+
style: {
|
|
2412
|
+
flex: 1,
|
|
2413
|
+
padding: "11px",
|
|
2414
|
+
borderRadius: "12px",
|
|
2415
|
+
border: "none",
|
|
2416
|
+
background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.7)})`,
|
|
2417
|
+
color: "#fff",
|
|
2418
|
+
fontSize: "13px",
|
|
2419
|
+
fontWeight: "700",
|
|
2420
|
+
cursor: "pointer",
|
|
2421
|
+
fontFamily: "inherit",
|
|
2422
|
+
transition: "opacity 0.2s"
|
|
2423
|
+
},
|
|
2424
|
+
onMouseEnter: (e) => e.currentTarget.style.opacity = "0.85",
|
|
2425
|
+
onMouseLeave: (e) => e.currentTarget.style.opacity = "1"
|
|
2426
|
+
},
|
|
2427
|
+
"Pay ",
|
|
2428
|
+
currency,
|
|
2429
|
+
total.toFixed(2)
|
|
2430
|
+
), paid && /* @__PURE__ */ import_react14.default.createElement("div", { style: {
|
|
2431
|
+
flex: 1,
|
|
2432
|
+
padding: "11px",
|
|
2433
|
+
borderRadius: "12px",
|
|
2434
|
+
background: "rgba(16,185,129,0.1)",
|
|
2435
|
+
border: "1px solid rgba(16,185,129,0.25)",
|
|
2436
|
+
display: "flex",
|
|
2437
|
+
alignItems: "center",
|
|
2438
|
+
justifyContent: "center",
|
|
2439
|
+
gap: "6px",
|
|
2440
|
+
fontSize: "13px",
|
|
2441
|
+
fontWeight: "700",
|
|
2442
|
+
color: "#34d399"
|
|
2443
|
+
} }, /* @__PURE__ */ import_react14.default.createElement(
|
|
2444
|
+
"svg",
|
|
2445
|
+
{
|
|
2446
|
+
width: "14",
|
|
2447
|
+
height: "14",
|
|
2448
|
+
viewBox: "0 0 24 24",
|
|
2449
|
+
fill: "none",
|
|
2450
|
+
stroke: "currentColor",
|
|
2451
|
+
strokeWidth: "2.5",
|
|
2452
|
+
strokeLinecap: "round"
|
|
2453
|
+
},
|
|
2454
|
+
/* @__PURE__ */ import_react14.default.createElement("polyline", { points: "20 6 9 17 4 12" })
|
|
2455
|
+
), "Payment Done"), /* @__PURE__ */ import_react14.default.createElement(
|
|
2456
|
+
"button",
|
|
2457
|
+
{
|
|
2458
|
+
onClick: onDownloadClick,
|
|
2459
|
+
style: {
|
|
2460
|
+
width: "42px",
|
|
2461
|
+
padding: "11px",
|
|
2462
|
+
borderRadius: "12px",
|
|
2463
|
+
background: "rgba(255,255,255,0.05)",
|
|
2464
|
+
border: "1px solid rgba(255,255,255,0.1)",
|
|
2465
|
+
color: "rgba(255,255,255,0.5)",
|
|
2466
|
+
cursor: "pointer",
|
|
2467
|
+
display: "flex",
|
|
2468
|
+
alignItems: "center",
|
|
2469
|
+
justifyContent: "center",
|
|
2470
|
+
transition: "all 0.2s"
|
|
2471
|
+
},
|
|
2472
|
+
onMouseEnter: (e) => {
|
|
2473
|
+
e.currentTarget.style.color = "#fff";
|
|
2474
|
+
e.currentTarget.style.borderColor = "rgba(255,255,255,0.25)";
|
|
2475
|
+
},
|
|
2476
|
+
onMouseLeave: (e) => {
|
|
2477
|
+
e.currentTarget.style.color = "rgba(255,255,255,0.5)";
|
|
2478
|
+
e.currentTarget.style.borderColor = "rgba(255,255,255,0.1)";
|
|
2479
|
+
}
|
|
2480
|
+
},
|
|
2481
|
+
/* @__PURE__ */ import_react14.default.createElement(
|
|
2482
|
+
"svg",
|
|
2483
|
+
{
|
|
2484
|
+
width: "15",
|
|
2485
|
+
height: "15",
|
|
2486
|
+
viewBox: "0 0 24 24",
|
|
2487
|
+
fill: "none",
|
|
2488
|
+
stroke: "currentColor",
|
|
2489
|
+
strokeWidth: "2",
|
|
2490
|
+
strokeLinecap: "round",
|
|
2491
|
+
strokeLinejoin: "round"
|
|
2492
|
+
},
|
|
2493
|
+
/* @__PURE__ */ import_react14.default.createElement("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" })
|
|
2494
|
+
)
|
|
2495
|
+
)));
|
|
2701
2496
|
};
|
|
2702
2497
|
// Annotate the CommonJS export names for ESM import in node:
|
|
2703
2498
|
0 && (module.exports = {
|
|
2704
|
-
Avatar,
|
|
2705
2499
|
AvatarCard,
|
|
2706
2500
|
BackgoundImageSlider,
|
|
2707
2501
|
Charts,
|
|
2708
|
-
CodeBlock,
|
|
2709
|
-
CustomInputField,
|
|
2710
|
-
DividerLine,
|
|
2711
|
-
FileUpload,
|
|
2712
2502
|
Footer,
|
|
2713
2503
|
ImageCard,
|
|
2714
2504
|
ImageSlider,
|
|
2505
|
+
InvoiceCard,
|
|
2715
2506
|
Loader,
|
|
2716
|
-
LoadingSpinner,
|
|
2717
2507
|
Navbar,
|
|
2718
2508
|
NotificationToast,
|
|
2719
|
-
|
|
2509
|
+
OTPInput,
|
|
2720
2510
|
PageLoader,
|
|
2721
2511
|
PricingCard,
|
|
2722
|
-
|
|
2723
|
-
SearchBar,
|
|
2724
|
-
Sidebar,
|
|
2725
|
-
SkeletonLoader,
|
|
2726
|
-
SmartButton,
|
|
2727
|
-
StatCard,
|
|
2728
|
-
Tabs,
|
|
2729
|
-
TextArea,
|
|
2730
|
-
ToastNotification
|
|
2512
|
+
Sidebar
|
|
2731
2513
|
});
|