virtual-ui-lib 1.0.46 → 1.0.47
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 +37 -0
- package/dist/index.mjs +36 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -33,6 +33,7 @@ __export(index_exports, {
|
|
|
33
33
|
CustomInputField: () => CustomInputField,
|
|
34
34
|
LoadingSpinner: () => LoadingSpinner,
|
|
35
35
|
OtpInput: () => OtpInput,
|
|
36
|
+
ResponsiveNavbar: () => ResponsiveNavbar,
|
|
36
37
|
SearchBar: () => SearchBar,
|
|
37
38
|
SkeletonLoader: () => SkeletonLoader,
|
|
38
39
|
SmartButton: () => SmartButton,
|
|
@@ -494,12 +495,48 @@ var SkeletonLoader = ({ width = "100%", height = "20px", bg = "#1e293b", accent
|
|
|
494
495
|
}
|
|
495
496
|
}`));
|
|
496
497
|
};
|
|
498
|
+
|
|
499
|
+
// src/components/ResponsiveNavbar/ResponsiveNavbar.jsx
|
|
500
|
+
var import_react11 = __toESM(require("react"));
|
|
501
|
+
var ResponsiveNavbar = ({
|
|
502
|
+
logo = "Logo",
|
|
503
|
+
navItems = [],
|
|
504
|
+
bg = "#1e293b",
|
|
505
|
+
textColor = "#f1f5f9",
|
|
506
|
+
accent = "#7c3aed",
|
|
507
|
+
padding = "10px 20px",
|
|
508
|
+
radius = "8px",
|
|
509
|
+
placeholder = "Search...",
|
|
510
|
+
onNavItemClick = () => {
|
|
511
|
+
},
|
|
512
|
+
onSearchChange = () => {
|
|
513
|
+
},
|
|
514
|
+
profileAvatar = "https://via.placeholder.com/40"
|
|
515
|
+
}) => {
|
|
516
|
+
const [menuActive, setMenuActive] = (0, import_react11.useState)(false);
|
|
517
|
+
const [searchValue, setSearchValue] = (0, import_react11.useState)("");
|
|
518
|
+
const handleSearchChange = (e) => {
|
|
519
|
+
setSearchValue(e.target.value);
|
|
520
|
+
onSearchChange(e.target.value);
|
|
521
|
+
};
|
|
522
|
+
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(
|
|
523
|
+
"input",
|
|
524
|
+
{
|
|
525
|
+
type: "text",
|
|
526
|
+
value: searchValue,
|
|
527
|
+
placeholder,
|
|
528
|
+
onChange: handleSearchChange,
|
|
529
|
+
style: { background: "#0f172a", color: textColor, border: "none", borderRadius: radius, padding: "8px", marginRight: "20px" }
|
|
530
|
+
}
|
|
531
|
+
), /* @__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))));
|
|
532
|
+
};
|
|
497
533
|
// Annotate the CommonJS export names for ESM import in node:
|
|
498
534
|
0 && (module.exports = {
|
|
499
535
|
CodeBlock,
|
|
500
536
|
CustomInputField,
|
|
501
537
|
LoadingSpinner,
|
|
502
538
|
OtpInput,
|
|
539
|
+
ResponsiveNavbar,
|
|
503
540
|
SearchBar,
|
|
504
541
|
SkeletonLoader,
|
|
505
542
|
SmartButton,
|
package/dist/index.mjs
CHANGED
|
@@ -450,11 +450,47 @@ var SkeletonLoader = ({ width = "100%", height = "20px", bg = "#1e293b", accent
|
|
|
450
450
|
}
|
|
451
451
|
}`));
|
|
452
452
|
};
|
|
453
|
+
|
|
454
|
+
// src/components/ResponsiveNavbar/ResponsiveNavbar.jsx
|
|
455
|
+
import React11, { useState as useState8 } from "react";
|
|
456
|
+
var ResponsiveNavbar = ({
|
|
457
|
+
logo = "Logo",
|
|
458
|
+
navItems = [],
|
|
459
|
+
bg = "#1e293b",
|
|
460
|
+
textColor = "#f1f5f9",
|
|
461
|
+
accent = "#7c3aed",
|
|
462
|
+
padding = "10px 20px",
|
|
463
|
+
radius = "8px",
|
|
464
|
+
placeholder = "Search...",
|
|
465
|
+
onNavItemClick = () => {
|
|
466
|
+
},
|
|
467
|
+
onSearchChange = () => {
|
|
468
|
+
},
|
|
469
|
+
profileAvatar = "https://via.placeholder.com/40"
|
|
470
|
+
}) => {
|
|
471
|
+
const [menuActive, setMenuActive] = useState8(false);
|
|
472
|
+
const [searchValue, setSearchValue] = useState8("");
|
|
473
|
+
const handleSearchChange = (e) => {
|
|
474
|
+
setSearchValue(e.target.value);
|
|
475
|
+
onSearchChange(e.target.value);
|
|
476
|
+
};
|
|
477
|
+
return /* @__PURE__ */ React11.createElement("nav", { style: { background: bg, color: textColor, padding, borderRadius: radius, display: "flex", justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React11.createElement("div", { style: { fontSize: "24px", fontWeight: "bold" } }, logo), /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", marginLeft: "20px" } }, navItems.map((item, index) => /* @__PURE__ */ React11.createElement("div", { key: index, onClick: () => onNavItemClick(item), style: { margin: "0 10px", cursor: "pointer", color: item.active ? accent : textColor } }, item.label)))), /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React11.createElement(
|
|
478
|
+
"input",
|
|
479
|
+
{
|
|
480
|
+
type: "text",
|
|
481
|
+
value: searchValue,
|
|
482
|
+
placeholder,
|
|
483
|
+
onChange: handleSearchChange,
|
|
484
|
+
style: { background: "#0f172a", color: textColor, border: "none", borderRadius: radius, padding: "8px", marginRight: "20px" }
|
|
485
|
+
}
|
|
486
|
+
), /* @__PURE__ */ React11.createElement("img", { src: profileAvatar, alt: "Profile", style: { borderRadius: "50%", width: "40px", height: "40px" } }), /* @__PURE__ */ React11.createElement("div", { onClick: () => setMenuActive(!menuActive), style: { cursor: "pointer", marginLeft: "20px" } }, "\u2630")), menuActive && /* @__PURE__ */ React11.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__ */ React11.createElement("div", { key: index, onClick: () => onNavItemClick(item), style: { padding: "10px", color: item.active ? accent : textColor } }, item.label))));
|
|
487
|
+
};
|
|
453
488
|
export {
|
|
454
489
|
CodeBlock,
|
|
455
490
|
CustomInputField,
|
|
456
491
|
LoadingSpinner,
|
|
457
492
|
OtpInput,
|
|
493
|
+
ResponsiveNavbar,
|
|
458
494
|
SearchBar,
|
|
459
495
|
SkeletonLoader,
|
|
460
496
|
SmartButton,
|