gov-layout 1.3.0 → 1.3.4
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 +1 -1
- package/dist/index.js +79 -91
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +79 -91
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -623,15 +623,22 @@ function ProfileIcon() {
|
|
|
623
623
|
}
|
|
624
624
|
);
|
|
625
625
|
}
|
|
626
|
-
function
|
|
626
|
+
function AvatarPlaceholder({ size = 40 }) {
|
|
627
627
|
return /* @__PURE__ */ jsx(
|
|
628
|
-
"
|
|
628
|
+
"div",
|
|
629
629
|
{
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
630
|
+
style: {
|
|
631
|
+
width: `${size}px`,
|
|
632
|
+
height: `${size}px`,
|
|
633
|
+
borderRadius: "50%",
|
|
634
|
+
backgroundColor: "#f1f5f9",
|
|
635
|
+
display: "flex",
|
|
636
|
+
alignItems: "center",
|
|
637
|
+
justifyContent: "center",
|
|
638
|
+
flexShrink: 0,
|
|
639
|
+
boxShadow: "0 2px 8px rgba(0,0,0,0.05)"
|
|
640
|
+
},
|
|
641
|
+
children: /* @__PURE__ */ jsx("svg", { width: size * 0.6, height: size * 0.6, viewBox: "0 0 24 24", fill: "#94a3b8", children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) })
|
|
635
642
|
}
|
|
636
643
|
);
|
|
637
644
|
}
|
|
@@ -643,6 +650,10 @@ function SidebarUserProfile({
|
|
|
643
650
|
onProfile
|
|
644
651
|
}) {
|
|
645
652
|
const isDark = useDarkMode();
|
|
653
|
+
const [imgError, setImgError] = useState(false);
|
|
654
|
+
useEffect(() => {
|
|
655
|
+
setImgError(false);
|
|
656
|
+
}, [user?.pictureUrl]);
|
|
646
657
|
if (!user) return null;
|
|
647
658
|
const getFullName = () => {
|
|
648
659
|
if (user.firstName && user.lastName) {
|
|
@@ -665,36 +676,21 @@ function SidebarUserProfile({
|
|
|
665
676
|
onClick: onProfile,
|
|
666
677
|
title: onProfile ? "\u0E14\u0E39\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C" : getFullName(),
|
|
667
678
|
style: { cursor: onProfile ? "pointer" : "default" },
|
|
668
|
-
children: user.pictureUrl ? /* @__PURE__ */ jsx(
|
|
679
|
+
children: user.pictureUrl && !imgError ? /* @__PURE__ */ jsx(
|
|
669
680
|
"img",
|
|
670
681
|
{
|
|
671
682
|
src: user.pictureUrl,
|
|
672
683
|
alt: getFullName(),
|
|
684
|
+
onError: () => setImgError(true),
|
|
673
685
|
style: {
|
|
674
686
|
width: "36px",
|
|
675
687
|
height: "36px",
|
|
676
688
|
borderRadius: "50%",
|
|
677
|
-
objectFit: "cover"
|
|
689
|
+
objectFit: "cover",
|
|
690
|
+
flexShrink: 0
|
|
678
691
|
}
|
|
679
692
|
}
|
|
680
|
-
) : /* @__PURE__ */ jsx(
|
|
681
|
-
"div",
|
|
682
|
-
{
|
|
683
|
-
style: {
|
|
684
|
-
width: "36px",
|
|
685
|
-
height: "36px",
|
|
686
|
-
borderRadius: "50%",
|
|
687
|
-
background: "var(--color-alias-color-brand-primary, #1e7d55)",
|
|
688
|
-
display: "flex",
|
|
689
|
-
alignItems: "center",
|
|
690
|
-
justifyContent: "center",
|
|
691
|
-
color: "#fff",
|
|
692
|
-
fontWeight: 700,
|
|
693
|
-
fontSize: "14px"
|
|
694
|
-
},
|
|
695
|
-
children: /* @__PURE__ */ jsx(AvatarIcon, { size: 20 })
|
|
696
|
-
}
|
|
697
|
-
)
|
|
693
|
+
) : /* @__PURE__ */ jsx(AvatarPlaceholder, { size: 36 })
|
|
698
694
|
}
|
|
699
695
|
),
|
|
700
696
|
onProfile && /* @__PURE__ */ jsx(
|
|
@@ -784,11 +780,12 @@ function SidebarUserProfile({
|
|
|
784
780
|
transition: "opacity 0.15s ease"
|
|
785
781
|
},
|
|
786
782
|
children: [
|
|
787
|
-
user.pictureUrl ? /* @__PURE__ */ jsx(
|
|
783
|
+
user.pictureUrl && !imgError ? /* @__PURE__ */ jsx(
|
|
788
784
|
"img",
|
|
789
785
|
{
|
|
790
786
|
src: user.pictureUrl,
|
|
791
787
|
alt: getFullName(),
|
|
788
|
+
onError: () => setImgError(true),
|
|
792
789
|
style: {
|
|
793
790
|
width: "40px",
|
|
794
791
|
height: "40px",
|
|
@@ -797,25 +794,7 @@ function SidebarUserProfile({
|
|
|
797
794
|
flexShrink: 0
|
|
798
795
|
}
|
|
799
796
|
}
|
|
800
|
-
) : /* @__PURE__ */ jsx(
|
|
801
|
-
"div",
|
|
802
|
-
{
|
|
803
|
-
style: {
|
|
804
|
-
width: "40px",
|
|
805
|
-
height: "40px",
|
|
806
|
-
borderRadius: "50%",
|
|
807
|
-
background: "var(--color-alias-color-brand-primary, #1e7d55)",
|
|
808
|
-
display: "flex",
|
|
809
|
-
alignItems: "center",
|
|
810
|
-
justifyContent: "center",
|
|
811
|
-
color: "#fff",
|
|
812
|
-
fontWeight: 700,
|
|
813
|
-
fontSize: "16px",
|
|
814
|
-
flexShrink: 0
|
|
815
|
-
},
|
|
816
|
-
children: /* @__PURE__ */ jsx(AvatarIcon, { size: 24 })
|
|
817
|
-
}
|
|
818
|
-
),
|
|
797
|
+
) : /* @__PURE__ */ jsx(AvatarPlaceholder, { size: 40 }),
|
|
819
798
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
820
799
|
/* @__PURE__ */ jsx("p", { style: {
|
|
821
800
|
fontWeight: 600,
|
|
@@ -1107,8 +1086,24 @@ function HamburgerIcon() {
|
|
|
1107
1086
|
function MessageOutlinedIcon(props) {
|
|
1108
1087
|
return /* @__PURE__ */ jsx("svg", { focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M4 4h16v12H5.17L4 17.17zm0-2c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm2 10h12v2H6zm0-3h12v2H6zm0-3h12v2H6z" }) });
|
|
1109
1088
|
}
|
|
1110
|
-
function
|
|
1111
|
-
return /* @__PURE__ */ jsx(
|
|
1089
|
+
function AvatarPlaceholder2({ size = 44 }) {
|
|
1090
|
+
return /* @__PURE__ */ jsx(
|
|
1091
|
+
"div",
|
|
1092
|
+
{
|
|
1093
|
+
style: {
|
|
1094
|
+
width: `${size}px`,
|
|
1095
|
+
height: `${size}px`,
|
|
1096
|
+
borderRadius: "50%",
|
|
1097
|
+
backgroundColor: "#f1f5f9",
|
|
1098
|
+
display: "flex",
|
|
1099
|
+
alignItems: "center",
|
|
1100
|
+
justifyContent: "center",
|
|
1101
|
+
flexShrink: 0,
|
|
1102
|
+
boxShadow: "0 2px 8px rgba(0,0,0,0.05)"
|
|
1103
|
+
},
|
|
1104
|
+
children: /* @__PURE__ */ jsx("svg", { width: size * 0.6, height: size * 0.6, viewBox: "0 0 24 24", fill: "#94a3b8", children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) })
|
|
1105
|
+
}
|
|
1106
|
+
);
|
|
1112
1107
|
}
|
|
1113
1108
|
function getNotifBg(type) {
|
|
1114
1109
|
const map = {
|
|
@@ -1141,11 +1136,14 @@ function UserHeader({
|
|
|
1141
1136
|
className
|
|
1142
1137
|
}) {
|
|
1143
1138
|
const displayName = `${user?.firstName || ""} ${user?.lastName || ""}`.trim() || "\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49";
|
|
1144
|
-
user?.firstName?.charAt(0) || "\u0E1C";
|
|
1145
1139
|
const [isNotifOpen, setIsNotifOpen] = useState(false);
|
|
1146
1140
|
const [activeFilter, setActiveFilter] = useState("all");
|
|
1147
1141
|
const notifRef = useRef(null);
|
|
1148
1142
|
const isDark = useDarkMode();
|
|
1143
|
+
const [imgError, setImgError] = useState(false);
|
|
1144
|
+
useEffect(() => {
|
|
1145
|
+
setImgError(false);
|
|
1146
|
+
}, [user?.pictureUrl]);
|
|
1149
1147
|
useEffect(() => {
|
|
1150
1148
|
const handleClickOutside = (e) => {
|
|
1151
1149
|
if (notifRef.current && !notifRef.current.contains(e.target)) {
|
|
@@ -1208,36 +1206,22 @@ function UserHeader({
|
|
|
1208
1206
|
overflow: "hidden"
|
|
1209
1207
|
},
|
|
1210
1208
|
children: [
|
|
1211
|
-
user?.pictureUrl ? /* @__PURE__ */ jsx(
|
|
1209
|
+
user?.pictureUrl && !imgError ? /* @__PURE__ */ jsx(
|
|
1212
1210
|
"img",
|
|
1213
1211
|
{
|
|
1214
1212
|
src: user.pictureUrl,
|
|
1215
1213
|
alt: displayName,
|
|
1214
|
+
onError: () => setImgError(true),
|
|
1216
1215
|
style: {
|
|
1217
1216
|
width: "44px",
|
|
1218
1217
|
height: "44px",
|
|
1219
1218
|
borderRadius: "50%",
|
|
1220
1219
|
objectFit: "cover",
|
|
1221
|
-
border: "2px solid rgba(255,255,255,0.7)"
|
|
1222
|
-
}
|
|
1223
|
-
}
|
|
1224
|
-
) : /* @__PURE__ */ jsx(
|
|
1225
|
-
"div",
|
|
1226
|
-
{
|
|
1227
|
-
style: {
|
|
1228
|
-
width: "44px",
|
|
1229
|
-
height: "44px",
|
|
1230
|
-
borderRadius: "50%",
|
|
1231
|
-
background: "rgba(255,255,255,0.2)",
|
|
1232
1220
|
border: "2px solid rgba(255,255,255,0.7)",
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
justifyContent: "center",
|
|
1236
|
-
boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
|
|
1237
|
-
},
|
|
1238
|
-
children: /* @__PURE__ */ jsx(AvatarIcon2, { size: 24 })
|
|
1221
|
+
flexShrink: 0
|
|
1222
|
+
}
|
|
1239
1223
|
}
|
|
1240
|
-
),
|
|
1224
|
+
) : /* @__PURE__ */ jsx(AvatarPlaceholder2, { size: 44 }),
|
|
1241
1225
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1242
1226
|
/* @__PURE__ */ jsxs(
|
|
1243
1227
|
"p",
|
|
@@ -1629,8 +1613,24 @@ function ProfileIcon2() {
|
|
|
1629
1613
|
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "7", r: "4" })
|
|
1630
1614
|
] });
|
|
1631
1615
|
}
|
|
1632
|
-
function
|
|
1633
|
-
return /* @__PURE__ */ jsx(
|
|
1616
|
+
function AvatarPlaceholder3({ size = 56 }) {
|
|
1617
|
+
return /* @__PURE__ */ jsx(
|
|
1618
|
+
"div",
|
|
1619
|
+
{
|
|
1620
|
+
style: {
|
|
1621
|
+
width: `${size}px`,
|
|
1622
|
+
height: `${size}px`,
|
|
1623
|
+
borderRadius: "50%",
|
|
1624
|
+
backgroundColor: "#f1f5f9",
|
|
1625
|
+
display: "flex",
|
|
1626
|
+
alignItems: "center",
|
|
1627
|
+
justifyContent: "center",
|
|
1628
|
+
flexShrink: 0,
|
|
1629
|
+
boxShadow: "0 2px 8px rgba(0,0,0,0.05)"
|
|
1630
|
+
},
|
|
1631
|
+
children: /* @__PURE__ */ jsx("svg", { width: size * 0.6, height: size * 0.6, viewBox: "0 0 24 24", fill: "#94a3b8", children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) })
|
|
1632
|
+
}
|
|
1633
|
+
);
|
|
1634
1634
|
}
|
|
1635
1635
|
function UserSidebar({
|
|
1636
1636
|
user,
|
|
@@ -1644,6 +1644,10 @@ function UserSidebar({
|
|
|
1644
1644
|
onProfile
|
|
1645
1645
|
}) {
|
|
1646
1646
|
const isDark = useDarkMode();
|
|
1647
|
+
const [imgError, setImgError] = useState(false);
|
|
1648
|
+
useEffect(() => {
|
|
1649
|
+
setImgError(false);
|
|
1650
|
+
}, [user?.pictureUrl]);
|
|
1647
1651
|
useEffect(() => {
|
|
1648
1652
|
if (isOpen) {
|
|
1649
1653
|
document.body.style.overflow = "hidden";
|
|
@@ -1718,38 +1722,22 @@ function UserSidebar({
|
|
|
1718
1722
|
padding: "8px"
|
|
1719
1723
|
},
|
|
1720
1724
|
children: [
|
|
1721
|
-
user.pictureUrl ? /* @__PURE__ */ jsx(
|
|
1725
|
+
user.pictureUrl && !imgError ? /* @__PURE__ */ jsx(
|
|
1722
1726
|
"img",
|
|
1723
1727
|
{
|
|
1724
1728
|
src: user.pictureUrl,
|
|
1725
1729
|
alt: getFullName(),
|
|
1730
|
+
onError: () => setImgError(true),
|
|
1726
1731
|
style: {
|
|
1727
1732
|
width: "56px",
|
|
1728
1733
|
height: "56px",
|
|
1729
1734
|
borderRadius: "50%",
|
|
1730
1735
|
objectFit: "cover",
|
|
1736
|
+
flexShrink: 0,
|
|
1731
1737
|
boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
|
|
1732
1738
|
}
|
|
1733
1739
|
}
|
|
1734
|
-
) : /* @__PURE__ */ jsx(
|
|
1735
|
-
"div",
|
|
1736
|
-
{
|
|
1737
|
-
style: {
|
|
1738
|
-
width: "56px",
|
|
1739
|
-
height: "56px",
|
|
1740
|
-
borderRadius: "50%",
|
|
1741
|
-
background: "linear-gradient(135deg, var(--color-alias-color-brand-secondary, #80d897), var(--color-alias-color-brand-primary, #1e7d55))",
|
|
1742
|
-
display: "flex",
|
|
1743
|
-
alignItems: "center",
|
|
1744
|
-
justifyContent: "center",
|
|
1745
|
-
color: "#fff",
|
|
1746
|
-
fontWeight: 700,
|
|
1747
|
-
fontSize: "20px",
|
|
1748
|
-
boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
|
|
1749
|
-
},
|
|
1750
|
-
children: /* @__PURE__ */ jsx(AvatarIcon3, { size: 32 })
|
|
1751
|
-
}
|
|
1752
|
-
),
|
|
1740
|
+
) : /* @__PURE__ */ jsx(AvatarPlaceholder3, { size: 56 }),
|
|
1753
1741
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1754
1742
|
/* @__PURE__ */ jsx(
|
|
1755
1743
|
"p",
|