jett.admin.npmpackage 1.0.10 → 1.0.12
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.css +58 -3
- package/dist/index.js +18 -14
- package/dist/index.mjs +18 -14
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -52,6 +52,7 @@
|
|
|
52
52
|
--radius-sm: 0.25rem;
|
|
53
53
|
--radius-md: 0.375rem;
|
|
54
54
|
--radius-lg: 0.5rem;
|
|
55
|
+
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
55
56
|
--default-transition-duration: 150ms;
|
|
56
57
|
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
57
58
|
--default-font-family: var(--font-sans);
|
|
@@ -302,6 +303,9 @@
|
|
|
302
303
|
.mb-6 {
|
|
303
304
|
margin-bottom: calc(var(--spacing) * 6);
|
|
304
305
|
}
|
|
306
|
+
.ml-2 {
|
|
307
|
+
margin-left: calc(var(--spacing) * 2);
|
|
308
|
+
}
|
|
305
309
|
.ml-\[20px\] {
|
|
306
310
|
margin-left: 20px;
|
|
307
311
|
}
|
|
@@ -341,9 +345,6 @@
|
|
|
341
345
|
.h-\[90px\] {
|
|
342
346
|
height: 90px;
|
|
343
347
|
}
|
|
344
|
-
.h-\[100vh\] {
|
|
345
|
-
height: 100vh;
|
|
346
|
-
}
|
|
347
348
|
.h-auto {
|
|
348
349
|
height: auto;
|
|
349
350
|
}
|
|
@@ -550,6 +551,9 @@
|
|
|
550
551
|
.border-red-500 {
|
|
551
552
|
border-color: var(--color-red-500);
|
|
552
553
|
}
|
|
554
|
+
.bg-\[\#ef4444\] {
|
|
555
|
+
background-color: #ef4444;
|
|
556
|
+
}
|
|
553
557
|
.bg-\[\#fafafa\] {
|
|
554
558
|
background-color: #fafafa;
|
|
555
559
|
}
|
|
@@ -682,6 +686,9 @@
|
|
|
682
686
|
.text-\[\#3f3f46cc\] {
|
|
683
687
|
color: #3f3f46cc;
|
|
684
688
|
}
|
|
689
|
+
.text-\[\#18181b\] {
|
|
690
|
+
color: #18181b;
|
|
691
|
+
}
|
|
685
692
|
.text-\[\#737373\] {
|
|
686
693
|
color: #737373;
|
|
687
694
|
}
|
|
@@ -799,6 +806,9 @@
|
|
|
799
806
|
.delay-75 {
|
|
800
807
|
transition-delay: 75ms;
|
|
801
808
|
}
|
|
809
|
+
.delay-100 {
|
|
810
|
+
transition-delay: 100ms;
|
|
811
|
+
}
|
|
802
812
|
.duration-200 {
|
|
803
813
|
--tw-duration: 200ms;
|
|
804
814
|
transition-duration: 200ms;
|
|
@@ -807,6 +817,10 @@
|
|
|
807
817
|
--tw-duration: 300ms;
|
|
808
818
|
transition-duration: 300ms;
|
|
809
819
|
}
|
|
820
|
+
.ease-in-out {
|
|
821
|
+
--tw-ease: var(--ease-in-out);
|
|
822
|
+
transition-timing-function: var(--ease-in-out);
|
|
823
|
+
}
|
|
810
824
|
.select-none {
|
|
811
825
|
-webkit-user-select: none;
|
|
812
826
|
user-select: none;
|
|
@@ -945,6 +959,45 @@
|
|
|
945
959
|
min-width: 576px;
|
|
946
960
|
}
|
|
947
961
|
}
|
|
962
|
+
.dark\:border-\[\#303036\] {
|
|
963
|
+
&:where(.dark, .dark *) {
|
|
964
|
+
border-color: #303036;
|
|
965
|
+
}
|
|
966
|
+
}
|
|
967
|
+
.dark\:bg-\[\#1d1d20\] {
|
|
968
|
+
&:where(.dark, .dark *) {
|
|
969
|
+
background-color: #1d1d20;
|
|
970
|
+
}
|
|
971
|
+
}
|
|
972
|
+
.dark\:bg-transparent {
|
|
973
|
+
&:where(.dark, .dark *) {
|
|
974
|
+
background-color: transparent;
|
|
975
|
+
}
|
|
976
|
+
}
|
|
977
|
+
.dark\:text-\[\#f4f4f5cc\] {
|
|
978
|
+
&:where(.dark, .dark *) {
|
|
979
|
+
color: #f4f4f5cc;
|
|
980
|
+
}
|
|
981
|
+
}
|
|
982
|
+
.dark\:text-white {
|
|
983
|
+
&:where(.dark, .dark *) {
|
|
984
|
+
color: var(--color-white);
|
|
985
|
+
}
|
|
986
|
+
}
|
|
987
|
+
.dark\:outline-white {
|
|
988
|
+
&:where(.dark, .dark *) {
|
|
989
|
+
outline-color: var(--color-white);
|
|
990
|
+
}
|
|
991
|
+
}
|
|
992
|
+
.dark\:hover\:bg-\[\#27272a\] {
|
|
993
|
+
&:where(.dark, .dark *) {
|
|
994
|
+
&:hover {
|
|
995
|
+
@media (hover: hover) {
|
|
996
|
+
background-color: #27272a;
|
|
997
|
+
}
|
|
998
|
+
}
|
|
999
|
+
}
|
|
1000
|
+
}
|
|
948
1001
|
}
|
|
949
1002
|
@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
|
|
950
1003
|
@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
|
|
@@ -972,6 +1025,7 @@
|
|
|
972
1025
|
@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
|
|
973
1026
|
@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
|
|
974
1027
|
@property --tw-duration { syntax: "*"; inherits: false; }
|
|
1028
|
+
@property --tw-ease { syntax: "*"; inherits: false; }
|
|
975
1029
|
@property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
|
|
976
1030
|
@property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
|
|
977
1031
|
@layer properties {
|
|
@@ -1006,6 +1060,7 @@
|
|
|
1006
1060
|
--tw-ring-offset-color: #fff;
|
|
1007
1061
|
--tw-ring-offset-shadow: 0 0 #0000;
|
|
1008
1062
|
--tw-duration: initial;
|
|
1063
|
+
--tw-ease: initial;
|
|
1009
1064
|
--tw-outline-style: solid;
|
|
1010
1065
|
--tw-space-x-reverse: 0;
|
|
1011
1066
|
}
|
package/dist/index.js
CHANGED
|
@@ -57,26 +57,29 @@ var import_react = __toESM(require("react"));
|
|
|
57
57
|
var variantStyles = {
|
|
58
58
|
PRIMARY: "bg-white",
|
|
59
59
|
SECONDARY: "bg-black text-white",
|
|
60
|
-
DEFAULT: "bg-white text-black hover:bg-gray-100"
|
|
60
|
+
DEFAULT: "bg-white text-black hover:bg-gray-100",
|
|
61
|
+
DANGER: "bg-[#ef4444] text-white"
|
|
61
62
|
};
|
|
62
63
|
var CustomButton = ({
|
|
63
64
|
variant,
|
|
64
65
|
children,
|
|
65
66
|
className,
|
|
66
67
|
onClick,
|
|
67
|
-
disabled = false
|
|
68
|
+
disabled = false,
|
|
69
|
+
icon
|
|
68
70
|
}) => {
|
|
69
71
|
console.log(disabled);
|
|
70
72
|
return /* @__PURE__ */ import_react.default.createElement(
|
|
71
73
|
"div",
|
|
72
74
|
{
|
|
73
75
|
className: cn(
|
|
74
|
-
`cursor-pointer flex items-center py-2 px-3 min-h-10 justify-center border rounded-[6px] border-[#e5e5e5]`,
|
|
76
|
+
`cursor-pointer flex items-center py-2 px-3 min-h-10 justify-center border rounded-[6px] border-[#e5e5e5] dark:border-[#303036] ${variant == "DANGER" ? "bg-[#ef4444]" : "dark:bg-[#1d1d20]"} gap-2`,
|
|
75
77
|
variantStyles[variant],
|
|
76
78
|
className
|
|
77
79
|
),
|
|
78
80
|
onClick
|
|
79
81
|
},
|
|
82
|
+
icon && /* @__PURE__ */ import_react.default.createElement("div", null, icon),
|
|
80
83
|
children
|
|
81
84
|
);
|
|
82
85
|
};
|
|
@@ -288,7 +291,7 @@ var CustomInput = ({
|
|
|
288
291
|
return /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex flex-col gap-1 w-full" }, heading && /* @__PURE__ */ import_react6.default.createElement("h3", { className: "text-lg font-semibold" }, heading), /* @__PURE__ */ import_react6.default.createElement(
|
|
289
292
|
"label",
|
|
290
293
|
{
|
|
291
|
-
className: `font-[500] text-sm ${heading ? "text-[#737373]" : "text-black"}`
|
|
294
|
+
className: `font-[500] text-sm ${heading ? "text-[#737373]" : "text-black"} dark:text-white`
|
|
292
295
|
},
|
|
293
296
|
label,
|
|
294
297
|
" ",
|
|
@@ -297,7 +300,8 @@ var CustomInput = ({
|
|
|
297
300
|
"input",
|
|
298
301
|
{
|
|
299
302
|
className: `border border-gray-200 rounded-md h-10 px-4 py-2 w-full text-[14px]
|
|
300
|
-
focus:outline-2 outline-black outline-offset-2
|
|
303
|
+
focus:outline-2 outline-black dark:outline-white outline-offset-2
|
|
304
|
+
dark:bg-transparent dark:text-white dark:border-[#303036]
|
|
301
305
|
${disabled ? "bg-gray-100 cursor-not-allowed text-gray-500 border-gray-300" : error ? "border-red-500 bg-red-50" : "bg-white border-[hsl(0_0%_89.8%)]"}
|
|
302
306
|
`,
|
|
303
307
|
value,
|
|
@@ -507,28 +511,28 @@ var AppSideBar = ({ username, role, navItems, additionalItems, sideBarLogo }) =>
|
|
|
507
511
|
const navItemsLocal = navItems ?? navItemsConstant;
|
|
508
512
|
const additionalItemsLocal = additionalItems ?? additionalItemsConstant;
|
|
509
513
|
const sideBarLogoLocal = sideBarLogo ?? sidebarlogo_default;
|
|
510
|
-
return /* @__PURE__ */ import_react11.default.createElement("div", { className: "w-72 bg-
|
|
511
|
-
return /* @__PURE__ */ import_react11.default.createElement("div", { key: index, className: "" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex items-center gap-3 p-2 hover:bg-[#f3f4f6] cursor-pointer", onClick: (e) => {
|
|
514
|
+
return /* @__PURE__ */ import_react11.default.createElement("div", { className: "w-72 transition-all ease-in-out delay-100 bg-transparent border-r border-gray-200 dark:border-[#303036] flex flex-col p-4 h-full max-h-[100vh]" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "p-2 mb-4" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "w-[108px] h-[40px] flex items-center \r\n justify-center" }, /* @__PURE__ */ import_react11.default.createElement("img", { src: sideBarLogoLocal, alt: "sidebarLogo", width: 108, height: 40 }))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex ml-[20px] items-center gap-2 mb-2 dark:text-[#f4f4f5cc]" }, /* @__PURE__ */ import_react11.default.createElement(import_lucide_react5.Globe, { width: 20, height: 20 }), /* @__PURE__ */ import_react11.default.createElement("h3", { className: "text-[#3f3f46cc] dark:text-[#f4f4f5cc] font-medium" }, "Data Centers")), /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement(CustomAutocomplete, { options: [] }))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "overflow-y-auto" }, /* @__PURE__ */ import_react11.default.createElement("div", null, navItemsLocal == null ? void 0 : navItemsLocal.map((item, index) => {
|
|
515
|
+
return /* @__PURE__ */ import_react11.default.createElement("div", { key: index, className: "" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex items-center gap-3 p-2 hover:bg-[#f3f4f6] dark:hover:bg-[#27272a] dark:text-[#f4f4f5cc] cursor-pointer rounded-lg ml-2", onClick: (e) => {
|
|
512
516
|
item.onClick && item.onClick(e);
|
|
513
517
|
handleIconRotate(e, index);
|
|
514
|
-
} }, /* @__PURE__ */ import_react11.default.createElement(item.Icon, { width: 20, height: 20
|
|
518
|
+
} }, /* @__PURE__ */ import_react11.default.createElement(item.Icon, { width: 20, height: 20 }), /* @__PURE__ */ import_react11.default.createElement("span", { className: "font-medium text-[#3f3f46cc] dark:text-[#f4f4f5cc]" }, item.label), item.isDropDown && /* @__PURE__ */ import_react11.default.createElement("div", { className: `ml-auto transition-all delay-75` }, /* @__PURE__ */ import_react11.default.createElement(import_lucide_react5.ChevronDown, { width: 20, height: 20 }))), item.options && item.options.length > 0 && /* @__PURE__ */ import_react11.default.createElement("div", { className: "ml-[20px] max-h-0 overflow-hidden flex flex-col", id: `dropDownOptions-${index}` }, item.options.map((options, optionsIndex) => {
|
|
515
519
|
return /* @__PURE__ */ import_react11.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react11.default.createElement(
|
|
516
520
|
"div",
|
|
517
521
|
{
|
|
518
|
-
className: "flex items-center gap-3 p-2 hover:bg-[#f3f4f6] cursor-pointer",
|
|
522
|
+
className: "flex items-center gap-3 p-2 hover:bg-[#f3f4f6] dark:hover:bg-[#27272a] cursor-pointer",
|
|
519
523
|
onClick: (e) => {
|
|
520
524
|
options.onclick && options.onclick();
|
|
521
525
|
options.isDropDown && handleIconRotate(e, optionsIndex, "subOption");
|
|
522
526
|
}
|
|
523
527
|
},
|
|
524
528
|
/* @__PURE__ */ import_react11.default.createElement("div", null),
|
|
525
|
-
/* @__PURE__ */ import_react11.default.createElement("span", { className: "font-medium text-sm text-[#3f3f46cc]" }, options.label),
|
|
529
|
+
/* @__PURE__ */ import_react11.default.createElement("span", { className: "font-medium text-sm text-[#3f3f46cc] dark:text-[#f4f4f5cc]" }, options.label),
|
|
526
530
|
options.isDropDown && /* @__PURE__ */ import_react11.default.createElement("div", { className: `ml-auto transition-all delay-75` }, /* @__PURE__ */ import_react11.default.createElement(import_lucide_react5.ChevronDown, { width: 20, height: 20 }))
|
|
527
531
|
), options.options && options.options.length > 1 && /* @__PURE__ */ import_react11.default.createElement("div", { className: "ml-[20px] max-h-0 overflow-hidden flex flex-col", id: `dropDownOptions-${optionsIndex}-subOption` }, options.options.map((subOption) => {
|
|
528
532
|
return /* @__PURE__ */ import_react11.default.createElement(
|
|
529
533
|
"div",
|
|
530
534
|
{
|
|
531
|
-
className: "p-2 rounded-lg hover:bg-gray-100 text-[#3f3f46cc] font-medium text-sm",
|
|
535
|
+
className: "p-2 rounded-lg hover:bg-gray-100 text-[#3f3f46cc] dark:hover:bg-[#27272a] dark:text-[#f4f4f5cc] font-medium text-sm",
|
|
532
536
|
onClick: (e) => {
|
|
533
537
|
subOption.onclick && options.onclick();
|
|
534
538
|
}
|
|
@@ -537,9 +541,9 @@ var AppSideBar = ({ username, role, navItems, additionalItems, sideBarLogo }) =>
|
|
|
537
541
|
);
|
|
538
542
|
})));
|
|
539
543
|
})));
|
|
540
|
-
})), /* @__PURE__ */ import_react11.default.createElement("div", { className: "border-t border-[#e5e5e5] mt-4" }, (additionalItemsLocal == null ? void 0 : additionalItemsLocal.length) > 0 && additionalItemsLocal.map((item, index) => {
|
|
541
|
-
return /* @__PURE__ */ import_react11.default.createElement("div", { key: index, className: "flex items-center gap-3 p-2 hover:bg-[#f3f4f6] cursor-pointer", onClick: () => item.onClick && item.onClick() }, /* @__PURE__ */ import_react11.default.createElement(item.Icon, { width: 20, height: 20
|
|
542
|
-
}))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "mt-auto bg-[#fafafa]
|
|
544
|
+
})), /* @__PURE__ */ import_react11.default.createElement("div", { className: "border-t border-[#e5e5e5] dark:border-[#303036] mt-4" }, (additionalItemsLocal == null ? void 0 : additionalItemsLocal.length) > 0 && additionalItemsLocal.map((item, index) => {
|
|
545
|
+
return /* @__PURE__ */ import_react11.default.createElement("div", { key: index, className: "flex items-center gap-3 p-2 hover:bg-[#f3f4f6] dark:hover:bg-[#27272a] dark:text-[#f4f4f5cc] cursor-pointer", onClick: () => item.onClick && item.onClick() }, /* @__PURE__ */ import_react11.default.createElement(item.Icon, { width: 20, height: 20 }), /* @__PURE__ */ import_react11.default.createElement("span", { className: "font-medium text-[#3f3f46cc] dark:text-[#f4f4f5cc]" }, item.label));
|
|
546
|
+
}))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "mt-auto bg-[#fafafa] dark:bg-transparent sticky bottom-0 pt-2" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex items-center justify-between p-2 rounded-lg hover:bg-[#f4f4f5] dark:hover:bg-[#27272a] cursor-pointer" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react11.default.createElement("span", { className: "relative flex shrink-0 overflow-hidden rounded-full h-10 w-10" }, /* @__PURE__ */ import_react11.default.createElement("span", { className: "flex h-full w-full items-center justify-center rounded-full bg-muted" }, username && username.split("")[0])), /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement("p", { className: "font-semibold" }, username), /* @__PURE__ */ import_react11.default.createElement("p", { className: "text-sm text-[#3f3f46cc] dark:text-[#f4f4f5cc]" }, role))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "text-[#18181b] dark:text-[#f4f4f5cc]" }, /* @__PURE__ */ import_react11.default.createElement(import_lucide_react5.LogOut, null)))));
|
|
543
547
|
};
|
|
544
548
|
|
|
545
549
|
// src/RightSheet/RightSheet.jsx
|
package/dist/index.mjs
CHANGED
|
@@ -10,26 +10,29 @@ import React from "react";
|
|
|
10
10
|
var variantStyles = {
|
|
11
11
|
PRIMARY: "bg-white",
|
|
12
12
|
SECONDARY: "bg-black text-white",
|
|
13
|
-
DEFAULT: "bg-white text-black hover:bg-gray-100"
|
|
13
|
+
DEFAULT: "bg-white text-black hover:bg-gray-100",
|
|
14
|
+
DANGER: "bg-[#ef4444] text-white"
|
|
14
15
|
};
|
|
15
16
|
var CustomButton = ({
|
|
16
17
|
variant,
|
|
17
18
|
children,
|
|
18
19
|
className,
|
|
19
20
|
onClick,
|
|
20
|
-
disabled = false
|
|
21
|
+
disabled = false,
|
|
22
|
+
icon
|
|
21
23
|
}) => {
|
|
22
24
|
console.log(disabled);
|
|
23
25
|
return /* @__PURE__ */ React.createElement(
|
|
24
26
|
"div",
|
|
25
27
|
{
|
|
26
28
|
className: cn(
|
|
27
|
-
`cursor-pointer flex items-center py-2 px-3 min-h-10 justify-center border rounded-[6px] border-[#e5e5e5]`,
|
|
29
|
+
`cursor-pointer flex items-center py-2 px-3 min-h-10 justify-center border rounded-[6px] border-[#e5e5e5] dark:border-[#303036] ${variant == "DANGER" ? "bg-[#ef4444]" : "dark:bg-[#1d1d20]"} gap-2`,
|
|
28
30
|
variantStyles[variant],
|
|
29
31
|
className
|
|
30
32
|
),
|
|
31
33
|
onClick
|
|
32
34
|
},
|
|
35
|
+
icon && /* @__PURE__ */ React.createElement("div", null, icon),
|
|
33
36
|
children
|
|
34
37
|
);
|
|
35
38
|
};
|
|
@@ -241,7 +244,7 @@ var CustomInput = ({
|
|
|
241
244
|
return /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col gap-1 w-full" }, heading && /* @__PURE__ */ React6.createElement("h3", { className: "text-lg font-semibold" }, heading), /* @__PURE__ */ React6.createElement(
|
|
242
245
|
"label",
|
|
243
246
|
{
|
|
244
|
-
className: `font-[500] text-sm ${heading ? "text-[#737373]" : "text-black"}`
|
|
247
|
+
className: `font-[500] text-sm ${heading ? "text-[#737373]" : "text-black"} dark:text-white`
|
|
245
248
|
},
|
|
246
249
|
label,
|
|
247
250
|
" ",
|
|
@@ -250,7 +253,8 @@ var CustomInput = ({
|
|
|
250
253
|
"input",
|
|
251
254
|
{
|
|
252
255
|
className: `border border-gray-200 rounded-md h-10 px-4 py-2 w-full text-[14px]
|
|
253
|
-
focus:outline-2 outline-black outline-offset-2
|
|
256
|
+
focus:outline-2 outline-black dark:outline-white outline-offset-2
|
|
257
|
+
dark:bg-transparent dark:text-white dark:border-[#303036]
|
|
254
258
|
${disabled ? "bg-gray-100 cursor-not-allowed text-gray-500 border-gray-300" : error ? "border-red-500 bg-red-50" : "bg-white border-[hsl(0_0%_89.8%)]"}
|
|
255
259
|
`,
|
|
256
260
|
value,
|
|
@@ -460,28 +464,28 @@ var AppSideBar = ({ username, role, navItems, additionalItems, sideBarLogo }) =>
|
|
|
460
464
|
const navItemsLocal = navItems ?? navItemsConstant;
|
|
461
465
|
const additionalItemsLocal = additionalItems ?? additionalItemsConstant;
|
|
462
466
|
const sideBarLogoLocal = sideBarLogo ?? sidebarlogo_default;
|
|
463
|
-
return /* @__PURE__ */ React11.createElement("div", { className: "w-72 bg-
|
|
464
|
-
return /* @__PURE__ */ React11.createElement("div", { key: index, className: "" }, /* @__PURE__ */ React11.createElement("div", { className: "flex items-center gap-3 p-2 hover:bg-[#f3f4f6] cursor-pointer", onClick: (e) => {
|
|
467
|
+
return /* @__PURE__ */ React11.createElement("div", { className: "w-72 transition-all ease-in-out delay-100 bg-transparent border-r border-gray-200 dark:border-[#303036] flex flex-col p-4 h-full max-h-[100vh]" }, /* @__PURE__ */ React11.createElement("div", { className: "p-2 mb-4" }, /* @__PURE__ */ React11.createElement("div", { className: "w-[108px] h-[40px] flex items-center \r\n justify-center" }, /* @__PURE__ */ React11.createElement("img", { src: sideBarLogoLocal, alt: "sidebarLogo", width: 108, height: 40 }))), /* @__PURE__ */ React11.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React11.createElement("div", { className: "flex ml-[20px] items-center gap-2 mb-2 dark:text-[#f4f4f5cc]" }, /* @__PURE__ */ React11.createElement(Globe2, { width: 20, height: 20 }), /* @__PURE__ */ React11.createElement("h3", { className: "text-[#3f3f46cc] dark:text-[#f4f4f5cc] font-medium" }, "Data Centers")), /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement(CustomAutocomplete, { options: [] }))), /* @__PURE__ */ React11.createElement("div", { className: "overflow-y-auto" }, /* @__PURE__ */ React11.createElement("div", null, navItemsLocal == null ? void 0 : navItemsLocal.map((item, index) => {
|
|
468
|
+
return /* @__PURE__ */ React11.createElement("div", { key: index, className: "" }, /* @__PURE__ */ React11.createElement("div", { className: "flex items-center gap-3 p-2 hover:bg-[#f3f4f6] dark:hover:bg-[#27272a] dark:text-[#f4f4f5cc] cursor-pointer rounded-lg ml-2", onClick: (e) => {
|
|
465
469
|
item.onClick && item.onClick(e);
|
|
466
470
|
handleIconRotate(e, index);
|
|
467
|
-
} }, /* @__PURE__ */ React11.createElement(item.Icon, { width: 20, height: 20
|
|
471
|
+
} }, /* @__PURE__ */ React11.createElement(item.Icon, { width: 20, height: 20 }), /* @__PURE__ */ React11.createElement("span", { className: "font-medium text-[#3f3f46cc] dark:text-[#f4f4f5cc]" }, item.label), item.isDropDown && /* @__PURE__ */ React11.createElement("div", { className: `ml-auto transition-all delay-75` }, /* @__PURE__ */ React11.createElement(ChevronDown2, { width: 20, height: 20 }))), item.options && item.options.length > 0 && /* @__PURE__ */ React11.createElement("div", { className: "ml-[20px] max-h-0 overflow-hidden flex flex-col", id: `dropDownOptions-${index}` }, item.options.map((options, optionsIndex) => {
|
|
468
472
|
return /* @__PURE__ */ React11.createElement("div", { className: "" }, /* @__PURE__ */ React11.createElement(
|
|
469
473
|
"div",
|
|
470
474
|
{
|
|
471
|
-
className: "flex items-center gap-3 p-2 hover:bg-[#f3f4f6] cursor-pointer",
|
|
475
|
+
className: "flex items-center gap-3 p-2 hover:bg-[#f3f4f6] dark:hover:bg-[#27272a] cursor-pointer",
|
|
472
476
|
onClick: (e) => {
|
|
473
477
|
options.onclick && options.onclick();
|
|
474
478
|
options.isDropDown && handleIconRotate(e, optionsIndex, "subOption");
|
|
475
479
|
}
|
|
476
480
|
},
|
|
477
481
|
/* @__PURE__ */ React11.createElement("div", null),
|
|
478
|
-
/* @__PURE__ */ React11.createElement("span", { className: "font-medium text-sm text-[#3f3f46cc]" }, options.label),
|
|
482
|
+
/* @__PURE__ */ React11.createElement("span", { className: "font-medium text-sm text-[#3f3f46cc] dark:text-[#f4f4f5cc]" }, options.label),
|
|
479
483
|
options.isDropDown && /* @__PURE__ */ React11.createElement("div", { className: `ml-auto transition-all delay-75` }, /* @__PURE__ */ React11.createElement(ChevronDown2, { width: 20, height: 20 }))
|
|
480
484
|
), options.options && options.options.length > 1 && /* @__PURE__ */ React11.createElement("div", { className: "ml-[20px] max-h-0 overflow-hidden flex flex-col", id: `dropDownOptions-${optionsIndex}-subOption` }, options.options.map((subOption) => {
|
|
481
485
|
return /* @__PURE__ */ React11.createElement(
|
|
482
486
|
"div",
|
|
483
487
|
{
|
|
484
|
-
className: "p-2 rounded-lg hover:bg-gray-100 text-[#3f3f46cc] font-medium text-sm",
|
|
488
|
+
className: "p-2 rounded-lg hover:bg-gray-100 text-[#3f3f46cc] dark:hover:bg-[#27272a] dark:text-[#f4f4f5cc] font-medium text-sm",
|
|
485
489
|
onClick: (e) => {
|
|
486
490
|
subOption.onclick && options.onclick();
|
|
487
491
|
}
|
|
@@ -490,9 +494,9 @@ var AppSideBar = ({ username, role, navItems, additionalItems, sideBarLogo }) =>
|
|
|
490
494
|
);
|
|
491
495
|
})));
|
|
492
496
|
})));
|
|
493
|
-
})), /* @__PURE__ */ React11.createElement("div", { className: "border-t border-[#e5e5e5] mt-4" }, (additionalItemsLocal == null ? void 0 : additionalItemsLocal.length) > 0 && additionalItemsLocal.map((item, index) => {
|
|
494
|
-
return /* @__PURE__ */ React11.createElement("div", { key: index, className: "flex items-center gap-3 p-2 hover:bg-[#f3f4f6] cursor-pointer", onClick: () => item.onClick && item.onClick() }, /* @__PURE__ */ React11.createElement(item.Icon, { width: 20, height: 20
|
|
495
|
-
}))), /* @__PURE__ */ React11.createElement("div", { className: "mt-auto bg-[#fafafa]
|
|
497
|
+
})), /* @__PURE__ */ React11.createElement("div", { className: "border-t border-[#e5e5e5] dark:border-[#303036] mt-4" }, (additionalItemsLocal == null ? void 0 : additionalItemsLocal.length) > 0 && additionalItemsLocal.map((item, index) => {
|
|
498
|
+
return /* @__PURE__ */ React11.createElement("div", { key: index, className: "flex items-center gap-3 p-2 hover:bg-[#f3f4f6] dark:hover:bg-[#27272a] dark:text-[#f4f4f5cc] cursor-pointer", onClick: () => item.onClick && item.onClick() }, /* @__PURE__ */ React11.createElement(item.Icon, { width: 20, height: 20 }), /* @__PURE__ */ React11.createElement("span", { className: "font-medium text-[#3f3f46cc] dark:text-[#f4f4f5cc]" }, item.label));
|
|
499
|
+
}))), /* @__PURE__ */ React11.createElement("div", { className: "mt-auto bg-[#fafafa] dark:bg-transparent sticky bottom-0 pt-2" }, /* @__PURE__ */ React11.createElement("div", { className: "flex items-center justify-between p-2 rounded-lg hover:bg-[#f4f4f5] dark:hover:bg-[#27272a] cursor-pointer" }, /* @__PURE__ */ React11.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React11.createElement("span", { className: "relative flex shrink-0 overflow-hidden rounded-full h-10 w-10" }, /* @__PURE__ */ React11.createElement("span", { className: "flex h-full w-full items-center justify-center rounded-full bg-muted" }, username && username.split("")[0])), /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("p", { className: "font-semibold" }, username), /* @__PURE__ */ React11.createElement("p", { className: "text-sm text-[#3f3f46cc] dark:text-[#f4f4f5cc]" }, role))), /* @__PURE__ */ React11.createElement("div", { className: "text-[#18181b] dark:text-[#f4f4f5cc]" }, /* @__PURE__ */ React11.createElement(LogOut, null)))));
|
|
496
500
|
};
|
|
497
501
|
|
|
498
502
|
// src/RightSheet/RightSheet.jsx
|