gov-layout 1.2.5 → 1.2.6
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/README.md +8 -0
- package/dist/index.d.mts +12 -4
- package/dist/index.d.ts +12 -4
- package/dist/index.js +386 -188
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +386 -188
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -588,11 +588,31 @@ function LogoutIcon() {
|
|
|
588
588
|
}
|
|
589
589
|
);
|
|
590
590
|
}
|
|
591
|
+
function ProfileIcon() {
|
|
592
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
593
|
+
"svg",
|
|
594
|
+
{
|
|
595
|
+
width: "18",
|
|
596
|
+
height: "18",
|
|
597
|
+
viewBox: "0 0 24 24",
|
|
598
|
+
fill: "none",
|
|
599
|
+
stroke: "currentColor",
|
|
600
|
+
strokeWidth: "2",
|
|
601
|
+
strokeLinecap: "round",
|
|
602
|
+
strokeLinejoin: "round",
|
|
603
|
+
children: [
|
|
604
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
|
|
605
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "7", r: "4" })
|
|
606
|
+
]
|
|
607
|
+
}
|
|
608
|
+
);
|
|
609
|
+
}
|
|
591
610
|
function SidebarUserProfile({
|
|
592
611
|
user,
|
|
593
612
|
roleLabel,
|
|
594
613
|
onLogout,
|
|
595
|
-
collapsed
|
|
614
|
+
collapsed,
|
|
615
|
+
onProfile
|
|
596
616
|
}) {
|
|
597
617
|
if (!user) return null;
|
|
598
618
|
const getFullName = () => {
|
|
@@ -613,36 +633,69 @@ function SidebarUserProfile({
|
|
|
613
633
|
alignItems: "center",
|
|
614
634
|
gap: "12px"
|
|
615
635
|
}, children: [
|
|
616
|
-
|
|
617
|
-
"
|
|
636
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
637
|
+
"div",
|
|
618
638
|
{
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
639
|
+
onClick: onProfile,
|
|
640
|
+
title: onProfile ? "\u0E14\u0E39\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C" : getFullName(),
|
|
641
|
+
style: { cursor: onProfile ? "pointer" : "default" },
|
|
642
|
+
children: user.pictureUrl ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
643
|
+
"img",
|
|
644
|
+
{
|
|
645
|
+
src: user.pictureUrl,
|
|
646
|
+
alt: getFullName(),
|
|
647
|
+
style: {
|
|
648
|
+
width: "36px",
|
|
649
|
+
height: "36px",
|
|
650
|
+
borderRadius: "50%",
|
|
651
|
+
objectFit: "cover"
|
|
652
|
+
}
|
|
653
|
+
}
|
|
654
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
655
|
+
"div",
|
|
656
|
+
{
|
|
657
|
+
style: {
|
|
658
|
+
width: "36px",
|
|
659
|
+
height: "36px",
|
|
660
|
+
borderRadius: "50%",
|
|
661
|
+
background: "var(--color-alias-color-brand-primary, #1e7d55)",
|
|
662
|
+
display: "flex",
|
|
663
|
+
alignItems: "center",
|
|
664
|
+
justifyContent: "center",
|
|
665
|
+
color: "#fff",
|
|
666
|
+
fontWeight: 700,
|
|
667
|
+
fontSize: "14px"
|
|
668
|
+
},
|
|
669
|
+
children: getInitial()
|
|
670
|
+
}
|
|
671
|
+
)
|
|
628
672
|
}
|
|
629
|
-
)
|
|
630
|
-
|
|
673
|
+
),
|
|
674
|
+
onProfile && /* @__PURE__ */ jsxRuntime.jsx(
|
|
675
|
+
"button",
|
|
631
676
|
{
|
|
632
|
-
|
|
677
|
+
onClick: onProfile,
|
|
678
|
+
title: "\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E2D\u0E07\u0E09\u0E31\u0E19",
|
|
679
|
+
onMouseEnter: (e) => {
|
|
680
|
+
e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
|
|
681
|
+
},
|
|
682
|
+
onMouseLeave: (e) => {
|
|
683
|
+
e.currentTarget.style.backgroundColor = "transparent";
|
|
684
|
+
},
|
|
633
685
|
style: {
|
|
634
686
|
width: "36px",
|
|
635
687
|
height: "36px",
|
|
636
|
-
borderRadius: "
|
|
637
|
-
|
|
688
|
+
borderRadius: "8px",
|
|
689
|
+
border: "none",
|
|
690
|
+
background: "transparent",
|
|
691
|
+
color: "var(--color-alias-color-brand-primary, #1e7d55)",
|
|
692
|
+
cursor: "pointer",
|
|
638
693
|
display: "flex",
|
|
639
694
|
alignItems: "center",
|
|
640
695
|
justifyContent: "center",
|
|
641
|
-
|
|
642
|
-
fontWeight: 700,
|
|
643
|
-
fontSize: "14px"
|
|
696
|
+
transition: "background-color 0.15s ease"
|
|
644
697
|
},
|
|
645
|
-
children:
|
|
698
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(ProfileIcon, {})
|
|
646
699
|
}
|
|
647
700
|
),
|
|
648
701
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -685,56 +738,107 @@ function SidebarUserProfile({
|
|
|
685
738
|
gap: "12px"
|
|
686
739
|
},
|
|
687
740
|
children: [
|
|
688
|
-
|
|
689
|
-
"
|
|
741
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
742
|
+
"div",
|
|
690
743
|
{
|
|
691
|
-
|
|
692
|
-
|
|
744
|
+
onClick: onProfile,
|
|
745
|
+
onMouseEnter: (e) => {
|
|
746
|
+
if (onProfile) e.currentTarget.style.opacity = "0.8";
|
|
747
|
+
},
|
|
748
|
+
onMouseLeave: (e) => {
|
|
749
|
+
if (onProfile) e.currentTarget.style.opacity = "1";
|
|
750
|
+
},
|
|
693
751
|
style: {
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
752
|
+
display: "flex",
|
|
753
|
+
alignItems: "center",
|
|
754
|
+
gap: "12px",
|
|
755
|
+
flex: 1,
|
|
756
|
+
minWidth: 0,
|
|
757
|
+
cursor: onProfile ? "pointer" : "default",
|
|
758
|
+
transition: "opacity 0.15s ease"
|
|
759
|
+
},
|
|
760
|
+
children: [
|
|
761
|
+
user.pictureUrl ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
762
|
+
"img",
|
|
763
|
+
{
|
|
764
|
+
src: user.pictureUrl,
|
|
765
|
+
alt: getFullName(),
|
|
766
|
+
style: {
|
|
767
|
+
width: "40px",
|
|
768
|
+
height: "40px",
|
|
769
|
+
borderRadius: "50%",
|
|
770
|
+
objectFit: "cover",
|
|
771
|
+
flexShrink: 0
|
|
772
|
+
}
|
|
773
|
+
}
|
|
774
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
775
|
+
"div",
|
|
776
|
+
{
|
|
777
|
+
style: {
|
|
778
|
+
width: "40px",
|
|
779
|
+
height: "40px",
|
|
780
|
+
borderRadius: "50%",
|
|
781
|
+
background: "var(--color-alias-color-brand-primary, #1e7d55)",
|
|
782
|
+
display: "flex",
|
|
783
|
+
alignItems: "center",
|
|
784
|
+
justifyContent: "center",
|
|
785
|
+
color: "#fff",
|
|
786
|
+
fontWeight: 700,
|
|
787
|
+
fontSize: "16px",
|
|
788
|
+
flexShrink: 0
|
|
789
|
+
},
|
|
790
|
+
children: getInitial()
|
|
791
|
+
}
|
|
792
|
+
),
|
|
793
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
794
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: {
|
|
795
|
+
fontWeight: 600,
|
|
796
|
+
fontSize: "14px",
|
|
797
|
+
lineHeight: "20px",
|
|
798
|
+
color: "var(--color-alias-text-colors-primary, #060d26)",
|
|
799
|
+
margin: 0,
|
|
800
|
+
overflow: "hidden",
|
|
801
|
+
textOverflow: "ellipsis",
|
|
802
|
+
whiteSpace: "nowrap"
|
|
803
|
+
}, children: getFullName() }),
|
|
804
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: {
|
|
805
|
+
fontSize: "12px",
|
|
806
|
+
lineHeight: "16px",
|
|
807
|
+
color: "var(--color-alias-text-colors-tertiary, #475272)",
|
|
808
|
+
margin: 0
|
|
809
|
+
}, children: roleLabel })
|
|
810
|
+
] })
|
|
811
|
+
]
|
|
700
812
|
}
|
|
701
|
-
)
|
|
702
|
-
|
|
813
|
+
),
|
|
814
|
+
onProfile && /* @__PURE__ */ jsxRuntime.jsx(
|
|
815
|
+
"button",
|
|
703
816
|
{
|
|
817
|
+
onClick: onProfile,
|
|
818
|
+
title: "\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E2D\u0E07\u0E09\u0E31\u0E19",
|
|
819
|
+
onMouseEnter: (e) => {
|
|
820
|
+
e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
|
|
821
|
+
},
|
|
822
|
+
onMouseLeave: (e) => {
|
|
823
|
+
e.currentTarget.style.backgroundColor = "transparent";
|
|
824
|
+
},
|
|
704
825
|
style: {
|
|
705
|
-
width: "
|
|
706
|
-
height: "
|
|
707
|
-
borderRadius: "
|
|
708
|
-
|
|
826
|
+
width: "36px",
|
|
827
|
+
height: "36px",
|
|
828
|
+
borderRadius: "8px",
|
|
829
|
+
border: "none",
|
|
830
|
+
background: "transparent",
|
|
831
|
+
color: "var(--color-alias-color-brand-primary, #1e7d55)",
|
|
832
|
+
cursor: "pointer",
|
|
709
833
|
display: "flex",
|
|
710
834
|
alignItems: "center",
|
|
711
835
|
justifyContent: "center",
|
|
712
|
-
|
|
713
|
-
fontWeight: 700,
|
|
714
|
-
fontSize: "16px",
|
|
836
|
+
transition: "background-color 0.15s ease",
|
|
715
837
|
flexShrink: 0
|
|
716
838
|
},
|
|
717
|
-
children:
|
|
839
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(ProfileIcon, {})
|
|
718
840
|
}
|
|
719
841
|
),
|
|
720
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
721
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style: {
|
|
722
|
-
fontWeight: 600,
|
|
723
|
-
fontSize: "14px",
|
|
724
|
-
lineHeight: "20px",
|
|
725
|
-
color: "var(--color-alias-text-colors-primary, #060d26)",
|
|
726
|
-
margin: 0,
|
|
727
|
-
overflow: "hidden",
|
|
728
|
-
textOverflow: "ellipsis",
|
|
729
|
-
whiteSpace: "nowrap"
|
|
730
|
-
}, children: getFullName() }),
|
|
731
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style: {
|
|
732
|
-
fontSize: "12px",
|
|
733
|
-
lineHeight: "16px",
|
|
734
|
-
color: "var(--color-alias-text-colors-tertiary, #475272)",
|
|
735
|
-
margin: 0
|
|
736
|
-
}, children: roleLabel })
|
|
737
|
-
] }),
|
|
738
842
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
739
843
|
"button",
|
|
740
844
|
{
|
|
@@ -816,6 +920,7 @@ function StaffSidebar({
|
|
|
816
920
|
roleLabel,
|
|
817
921
|
onNavigate,
|
|
818
922
|
onLogout,
|
|
923
|
+
onProfile,
|
|
819
924
|
currentPath,
|
|
820
925
|
width = "280px",
|
|
821
926
|
className,
|
|
@@ -911,6 +1016,7 @@ function StaffSidebar({
|
|
|
911
1016
|
user,
|
|
912
1017
|
roleLabel,
|
|
913
1018
|
onLogout,
|
|
1019
|
+
onProfile,
|
|
914
1020
|
collapsed
|
|
915
1021
|
}
|
|
916
1022
|
)
|
|
@@ -998,6 +1104,7 @@ function UserHeader({
|
|
|
998
1104
|
notificationBell,
|
|
999
1105
|
onMarkAllRead,
|
|
1000
1106
|
onViewAll,
|
|
1107
|
+
onProfile,
|
|
1001
1108
|
className
|
|
1002
1109
|
}) {
|
|
1003
1110
|
const displayName = `${user?.firstName || ""} ${user?.lastName || ""}`.trim() || "\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49";
|
|
@@ -1035,67 +1142,88 @@ function UserHeader({
|
|
|
1035
1142
|
padding: "14px 20px"
|
|
1036
1143
|
},
|
|
1037
1144
|
children: [
|
|
1038
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
display: "flex",
|
|
1061
|
-
alignItems: "center",
|
|
1062
|
-
justifyContent: "center",
|
|
1063
|
-
boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
|
|
1064
|
-
},
|
|
1065
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1066
|
-
"span",
|
|
1145
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1146
|
+
"div",
|
|
1147
|
+
{
|
|
1148
|
+
onClick: onProfile,
|
|
1149
|
+
onMouseEnter: (e) => {
|
|
1150
|
+
if (onProfile) e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
|
|
1151
|
+
},
|
|
1152
|
+
onMouseLeave: (e) => {
|
|
1153
|
+
if (onProfile) e.currentTarget.style.backgroundColor = "transparent";
|
|
1154
|
+
},
|
|
1155
|
+
style: {
|
|
1156
|
+
display: "flex",
|
|
1157
|
+
alignItems: "center",
|
|
1158
|
+
gap: "12px",
|
|
1159
|
+
cursor: onProfile ? "pointer" : "default",
|
|
1160
|
+
padding: "4px 8px",
|
|
1161
|
+
borderRadius: "10px",
|
|
1162
|
+
transition: "background-color 0.15s ease"
|
|
1163
|
+
},
|
|
1164
|
+
children: [
|
|
1165
|
+
user?.pictureUrl ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1166
|
+
"img",
|
|
1067
1167
|
{
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
{
|
|
1077
|
-
style: {
|
|
1078
|
-
fontSize: "14px",
|
|
1079
|
-
fontWeight: 600,
|
|
1080
|
-
color: "var(--color-alias-color-brand-text-dark, #05010e)",
|
|
1081
|
-
margin: 0
|
|
1082
|
-
},
|
|
1083
|
-
children: [
|
|
1084
|
-
"\u0E2A\u0E27\u0E31\u0E2A\u0E14\u0E35,",
|
|
1085
|
-
" ",
|
|
1086
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1087
|
-
"span",
|
|
1088
|
-
{
|
|
1089
|
-
style: {
|
|
1090
|
-
color: "var(--color-alias-color-brand-primary, #1e7d55)"
|
|
1091
|
-
},
|
|
1092
|
-
children: displayName
|
|
1168
|
+
src: user.pictureUrl,
|
|
1169
|
+
alt: displayName,
|
|
1170
|
+
style: {
|
|
1171
|
+
width: "44px",
|
|
1172
|
+
height: "44px",
|
|
1173
|
+
borderRadius: "50%",
|
|
1174
|
+
objectFit: "cover",
|
|
1175
|
+
border: "2px solid var(--color-alias-color-brand-surface, #faf9e5)"
|
|
1093
1176
|
}
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1177
|
+
}
|
|
1178
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
1179
|
+
"div",
|
|
1180
|
+
{
|
|
1181
|
+
style: {
|
|
1182
|
+
width: "44px",
|
|
1183
|
+
height: "44px",
|
|
1184
|
+
borderRadius: "50%",
|
|
1185
|
+
background: "linear-gradient(135deg, var(--color-alias-color-brand-secondary, #80d897), var(--color-alias-color-brand-primary, #1e7d55))",
|
|
1186
|
+
display: "flex",
|
|
1187
|
+
alignItems: "center",
|
|
1188
|
+
justifyContent: "center",
|
|
1189
|
+
boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
|
|
1190
|
+
},
|
|
1191
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1192
|
+
"span",
|
|
1193
|
+
{
|
|
1194
|
+
style: { color: "#fff", fontSize: "18px", fontWeight: 600 },
|
|
1195
|
+
children: firstChar
|
|
1196
|
+
}
|
|
1197
|
+
)
|
|
1198
|
+
}
|
|
1199
|
+
),
|
|
1200
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1201
|
+
"p",
|
|
1202
|
+
{
|
|
1203
|
+
style: {
|
|
1204
|
+
fontSize: "14px",
|
|
1205
|
+
fontWeight: 600,
|
|
1206
|
+
color: "var(--color-alias-color-brand-text-dark, #05010e)",
|
|
1207
|
+
margin: 0
|
|
1208
|
+
},
|
|
1209
|
+
children: [
|
|
1210
|
+
"\u0E2A\u0E27\u0E31\u0E2A\u0E14\u0E35,",
|
|
1211
|
+
" ",
|
|
1212
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1213
|
+
"span",
|
|
1214
|
+
{
|
|
1215
|
+
style: {
|
|
1216
|
+
color: "var(--color-alias-color-brand-primary, #1e7d55)"
|
|
1217
|
+
},
|
|
1218
|
+
children: displayName
|
|
1219
|
+
}
|
|
1220
|
+
)
|
|
1221
|
+
]
|
|
1222
|
+
}
|
|
1223
|
+
) })
|
|
1224
|
+
]
|
|
1225
|
+
}
|
|
1226
|
+
),
|
|
1099
1227
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
|
|
1100
1228
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, ref: notifRef, children: [
|
|
1101
1229
|
notificationBell || /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -1362,6 +1490,12 @@ function LogoutIcon2() {
|
|
|
1362
1490
|
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
|
|
1363
1491
|
] });
|
|
1364
1492
|
}
|
|
1493
|
+
function ProfileIcon2() {
|
|
1494
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
1495
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
|
|
1496
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "7", r: "4" })
|
|
1497
|
+
] });
|
|
1498
|
+
}
|
|
1365
1499
|
function UserSidebar({
|
|
1366
1500
|
user,
|
|
1367
1501
|
roleLabel,
|
|
@@ -1370,7 +1504,8 @@ function UserSidebar({
|
|
|
1370
1504
|
onLogout,
|
|
1371
1505
|
isOpen,
|
|
1372
1506
|
onClose,
|
|
1373
|
-
roleColor = "var(--color-alias-semantic-warning, orange)"
|
|
1507
|
+
roleColor = "var(--color-alias-semantic-warning, orange)",
|
|
1508
|
+
onProfile
|
|
1374
1509
|
}) {
|
|
1375
1510
|
react.useEffect(() => {
|
|
1376
1511
|
if (isOpen) {
|
|
@@ -1432,92 +1567,155 @@ function UserSidebar({
|
|
|
1432
1567
|
flexDirection: "column"
|
|
1433
1568
|
},
|
|
1434
1569
|
children: [
|
|
1435
|
-
user && /* @__PURE__ */ jsxRuntime.
|
|
1570
|
+
user && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1436
1571
|
"div",
|
|
1437
1572
|
{
|
|
1438
1573
|
style: {
|
|
1439
1574
|
padding: "20px",
|
|
1440
1575
|
borderBottom: "1px solid var(--color-border-colors-neutral, #e5e7eb)"
|
|
1441
1576
|
},
|
|
1442
|
-
children:
|
|
1443
|
-
|
|
1444
|
-
"img",
|
|
1445
|
-
{
|
|
1446
|
-
src: user.pictureUrl,
|
|
1447
|
-
alt: getFullName(),
|
|
1448
|
-
style: {
|
|
1449
|
-
width: "56px",
|
|
1450
|
-
height: "56px",
|
|
1451
|
-
borderRadius: "50%",
|
|
1452
|
-
objectFit: "cover",
|
|
1453
|
-
boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
|
|
1454
|
-
}
|
|
1455
|
-
}
|
|
1456
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
1577
|
+
children: [
|
|
1578
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1457
1579
|
"div",
|
|
1458
1580
|
{
|
|
1581
|
+
onClick: () => {
|
|
1582
|
+
if (onProfile) {
|
|
1583
|
+
onProfile();
|
|
1584
|
+
onClose();
|
|
1585
|
+
}
|
|
1586
|
+
},
|
|
1587
|
+
onMouseEnter: (e) => {
|
|
1588
|
+
if (onProfile) e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
|
|
1589
|
+
},
|
|
1590
|
+
onMouseLeave: (e) => {
|
|
1591
|
+
if (onProfile) e.currentTarget.style.backgroundColor = "transparent";
|
|
1592
|
+
},
|
|
1459
1593
|
style: {
|
|
1460
|
-
width: "56px",
|
|
1461
|
-
height: "56px",
|
|
1462
|
-
borderRadius: "50%",
|
|
1463
|
-
background: "linear-gradient(135deg, var(--color-alias-color-brand-secondary, #80d897), var(--color-alias-color-brand-primary, #1e7d55))",
|
|
1464
1594
|
display: "flex",
|
|
1465
1595
|
alignItems: "center",
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1596
|
+
gap: "12px",
|
|
1597
|
+
cursor: onProfile ? "pointer" : "default",
|
|
1598
|
+
padding: "8px",
|
|
1599
|
+
borderRadius: "12px",
|
|
1600
|
+
transition: "background-color 0.15s ease"
|
|
1471
1601
|
},
|
|
1472
|
-
children:
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1602
|
+
children: [
|
|
1603
|
+
user.pictureUrl ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1604
|
+
"img",
|
|
1605
|
+
{
|
|
1606
|
+
src: user.pictureUrl,
|
|
1607
|
+
alt: getFullName(),
|
|
1608
|
+
style: {
|
|
1609
|
+
width: "56px",
|
|
1610
|
+
height: "56px",
|
|
1611
|
+
borderRadius: "50%",
|
|
1612
|
+
objectFit: "cover",
|
|
1613
|
+
boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
|
|
1614
|
+
}
|
|
1615
|
+
}
|
|
1616
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
1617
|
+
"div",
|
|
1618
|
+
{
|
|
1619
|
+
style: {
|
|
1620
|
+
width: "56px",
|
|
1621
|
+
height: "56px",
|
|
1622
|
+
borderRadius: "50%",
|
|
1623
|
+
background: "linear-gradient(135deg, var(--color-alias-color-brand-secondary, #80d897), var(--color-alias-color-brand-primary, #1e7d55))",
|
|
1624
|
+
display: "flex",
|
|
1625
|
+
alignItems: "center",
|
|
1626
|
+
justifyContent: "center",
|
|
1627
|
+
color: "#fff",
|
|
1628
|
+
fontWeight: 700,
|
|
1629
|
+
fontSize: "20px",
|
|
1630
|
+
boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
|
|
1631
|
+
},
|
|
1632
|
+
children: getInitial()
|
|
1633
|
+
}
|
|
1634
|
+
),
|
|
1635
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1503
1636
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1504
|
-
"
|
|
1637
|
+
"p",
|
|
1505
1638
|
{
|
|
1506
1639
|
style: {
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1640
|
+
fontWeight: 700,
|
|
1641
|
+
fontSize: "16px",
|
|
1642
|
+
color: "var(--color-alias-text-colors-primary, #060d26)",
|
|
1643
|
+
margin: 0,
|
|
1644
|
+
overflow: "hidden",
|
|
1645
|
+
textOverflow: "ellipsis",
|
|
1646
|
+
whiteSpace: "nowrap"
|
|
1647
|
+
},
|
|
1648
|
+
children: getFullName()
|
|
1513
1649
|
}
|
|
1514
1650
|
),
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1651
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1652
|
+
"p",
|
|
1653
|
+
{
|
|
1654
|
+
style: {
|
|
1655
|
+
fontSize: "13px",
|
|
1656
|
+
color: "var(--color-alias-text-colors-tertiary, #6b7280)",
|
|
1657
|
+
margin: "2px 0 0",
|
|
1658
|
+
display: "flex",
|
|
1659
|
+
alignItems: "center",
|
|
1660
|
+
gap: "6px"
|
|
1661
|
+
},
|
|
1662
|
+
children: [
|
|
1663
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1664
|
+
"span",
|
|
1665
|
+
{
|
|
1666
|
+
style: {
|
|
1667
|
+
width: "8px",
|
|
1668
|
+
height: "8px",
|
|
1669
|
+
borderRadius: "50%",
|
|
1670
|
+
background: roleColor,
|
|
1671
|
+
display: "inline-block"
|
|
1672
|
+
}
|
|
1673
|
+
}
|
|
1674
|
+
),
|
|
1675
|
+
roleLabel
|
|
1676
|
+
]
|
|
1677
|
+
}
|
|
1678
|
+
)
|
|
1679
|
+
] })
|
|
1680
|
+
]
|
|
1681
|
+
}
|
|
1682
|
+
),
|
|
1683
|
+
onProfile && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1684
|
+
"button",
|
|
1685
|
+
{
|
|
1686
|
+
onClick: () => {
|
|
1687
|
+
onProfile();
|
|
1688
|
+
onClose();
|
|
1689
|
+
},
|
|
1690
|
+
onMouseEnter: (e) => {
|
|
1691
|
+
e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
|
|
1692
|
+
},
|
|
1693
|
+
onMouseLeave: (e) => {
|
|
1694
|
+
e.currentTarget.style.backgroundColor = "transparent";
|
|
1695
|
+
},
|
|
1696
|
+
style: {
|
|
1697
|
+
width: "100%",
|
|
1698
|
+
display: "flex",
|
|
1699
|
+
alignItems: "center",
|
|
1700
|
+
gap: "12px",
|
|
1701
|
+
padding: "10px 12px",
|
|
1702
|
+
marginTop: "8px",
|
|
1703
|
+
borderRadius: "8px",
|
|
1704
|
+
border: "none",
|
|
1705
|
+
background: "transparent",
|
|
1706
|
+
color: "var(--color-alias-color-brand-primary, #1e7d55)",
|
|
1707
|
+
cursor: "pointer",
|
|
1708
|
+
transition: "background-color 0.15s ease",
|
|
1709
|
+
fontSize: "14px",
|
|
1710
|
+
fontWeight: 500
|
|
1711
|
+
},
|
|
1712
|
+
children: [
|
|
1713
|
+
/* @__PURE__ */ jsxRuntime.jsx(ProfileIcon2, {}),
|
|
1714
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E2D\u0E07\u0E09\u0E31\u0E19" })
|
|
1715
|
+
]
|
|
1716
|
+
}
|
|
1717
|
+
)
|
|
1718
|
+
]
|
|
1521
1719
|
}
|
|
1522
1720
|
),
|
|
1523
1721
|
/* @__PURE__ */ jsxRuntime.jsx(
|