gov-layout 1.2.23 → 1.2.25
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.d.mts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +111 -22
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +111 -22
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1128,6 +1128,7 @@ function UserHeader({
|
|
|
1128
1128
|
const displayName = `${user?.firstName || ""} ${user?.lastName || ""}`.trim() || "\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49";
|
|
1129
1129
|
const firstChar = user?.firstName?.charAt(0) || "\u0E1C";
|
|
1130
1130
|
const [isNotifOpen, setIsNotifOpen] = useState(false);
|
|
1131
|
+
const [activeFilter, setActiveFilter] = useState("all");
|
|
1131
1132
|
const notifRef = useRef(null);
|
|
1132
1133
|
const isDark = useDarkMode();
|
|
1133
1134
|
useEffect(() => {
|
|
@@ -1140,6 +1141,13 @@ function UserHeader({
|
|
|
1140
1141
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
1141
1142
|
}, []);
|
|
1142
1143
|
const unreadCount = notifications.filter((n) => !n.isRead).length;
|
|
1144
|
+
const actionCount = notifications.filter((n) => n.category === "action").length;
|
|
1145
|
+
const generalCount = notifications.filter((n) => !n.category || n.category === "general").length;
|
|
1146
|
+
const filteredNotifications = notifications.filter((n) => {
|
|
1147
|
+
if (activeFilter === "all") return true;
|
|
1148
|
+
if (activeFilter === "action") return n.category === "action";
|
|
1149
|
+
return !n.category || n.category === "general";
|
|
1150
|
+
});
|
|
1143
1151
|
return /* @__PURE__ */ jsx(
|
|
1144
1152
|
"header",
|
|
1145
1153
|
{
|
|
@@ -1179,7 +1187,10 @@ function UserHeader({
|
|
|
1179
1187
|
cursor: onProfile ? "pointer" : "default",
|
|
1180
1188
|
padding: "4px 8px",
|
|
1181
1189
|
borderRadius: "10px",
|
|
1182
|
-
transition: "background-color 0.15s ease"
|
|
1190
|
+
transition: "background-color 0.15s ease",
|
|
1191
|
+
flex: 1,
|
|
1192
|
+
minWidth: 0,
|
|
1193
|
+
overflow: "hidden"
|
|
1183
1194
|
},
|
|
1184
1195
|
children: [
|
|
1185
1196
|
user?.pictureUrl ? /* @__PURE__ */ jsx(
|
|
@@ -1335,34 +1346,95 @@ function UserHeader({
|
|
|
1335
1346
|
"div",
|
|
1336
1347
|
{
|
|
1337
1348
|
style: {
|
|
1338
|
-
padding: "16px",
|
|
1339
|
-
borderBottom: `1px solid ${isDark ? "#374151" : "#f3f4f6"}`,
|
|
1340
|
-
display: "flex",
|
|
1341
|
-
alignItems: "center",
|
|
1342
|
-
justifyContent: "space-between",
|
|
1349
|
+
padding: "16px 16px 0",
|
|
1343
1350
|
background: isDark ? "#1f2937" : "#fafafa"
|
|
1344
1351
|
},
|
|
1345
1352
|
children: [
|
|
1346
|
-
/* @__PURE__ */
|
|
1347
|
-
|
|
1348
|
-
|
|
1353
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "12px" }, children: [
|
|
1354
|
+
/* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: "14px", color: isDark ? "#ffffff" : "#111" }, children: "\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19" }),
|
|
1355
|
+
onMarkAllRead && /* @__PURE__ */ jsx(
|
|
1356
|
+
"button",
|
|
1357
|
+
{
|
|
1358
|
+
onClick: onMarkAllRead,
|
|
1359
|
+
style: {
|
|
1360
|
+
fontSize: "12px",
|
|
1361
|
+
color: "var(--color-alias-color-brand-primary, #1e7d55)",
|
|
1362
|
+
background: "none",
|
|
1363
|
+
border: "none",
|
|
1364
|
+
cursor: "pointer",
|
|
1365
|
+
fontWeight: 500
|
|
1366
|
+
},
|
|
1367
|
+
children: "\u0E2D\u0E48\u0E32\u0E19\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14"
|
|
1368
|
+
}
|
|
1369
|
+
)
|
|
1370
|
+
] }),
|
|
1371
|
+
/* @__PURE__ */ jsx(
|
|
1372
|
+
"div",
|
|
1349
1373
|
{
|
|
1350
|
-
onClick: onMarkAllRead,
|
|
1351
1374
|
style: {
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
cursor: "pointer",
|
|
1357
|
-
fontWeight: 500
|
|
1375
|
+
display: "flex",
|
|
1376
|
+
gap: "6px",
|
|
1377
|
+
paddingBottom: "12px",
|
|
1378
|
+
borderBottom: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`
|
|
1358
1379
|
},
|
|
1359
|
-
children:
|
|
1380
|
+
children: [
|
|
1381
|
+
{ key: "all", label: "\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14", count: notifications.length },
|
|
1382
|
+
{ key: "action", label: "\u0E15\u0E49\u0E2D\u0E07\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23", count: actionCount },
|
|
1383
|
+
{ key: "general", label: "\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19\u0E17\u0E31\u0E48\u0E27\u0E44\u0E1B", count: generalCount }
|
|
1384
|
+
].map((tab) => {
|
|
1385
|
+
const isActive = activeFilter === tab.key;
|
|
1386
|
+
return /* @__PURE__ */ jsxs(
|
|
1387
|
+
"button",
|
|
1388
|
+
{
|
|
1389
|
+
onClick: () => setActiveFilter(tab.key),
|
|
1390
|
+
style: {
|
|
1391
|
+
display: "inline-flex",
|
|
1392
|
+
alignItems: "center",
|
|
1393
|
+
gap: "5px",
|
|
1394
|
+
padding: "5px 10px",
|
|
1395
|
+
fontSize: "12px",
|
|
1396
|
+
fontWeight: isActive ? 600 : 400,
|
|
1397
|
+
color: isActive ? isDark ? "#ffffff" : "#1e7d55" : isDark ? "#9ca3af" : "#6b7280",
|
|
1398
|
+
background: isActive ? isDark ? "rgba(30,125,85,0.2)" : "rgba(30,125,85,0.08)" : "transparent",
|
|
1399
|
+
border: `1px solid ${isActive ? isDark ? "rgba(30,125,85,0.4)" : "rgba(30,125,85,0.25)" : isDark ? "#4b5563" : "#e5e7eb"}`,
|
|
1400
|
+
borderRadius: "16px",
|
|
1401
|
+
cursor: "pointer",
|
|
1402
|
+
transition: "all 0.15s ease",
|
|
1403
|
+
whiteSpace: "nowrap"
|
|
1404
|
+
},
|
|
1405
|
+
children: [
|
|
1406
|
+
tab.label,
|
|
1407
|
+
/* @__PURE__ */ jsx(
|
|
1408
|
+
"span",
|
|
1409
|
+
{
|
|
1410
|
+
style: {
|
|
1411
|
+
minWidth: "18px",
|
|
1412
|
+
height: "18px",
|
|
1413
|
+
display: "inline-flex",
|
|
1414
|
+
alignItems: "center",
|
|
1415
|
+
justifyContent: "center",
|
|
1416
|
+
borderRadius: "9px",
|
|
1417
|
+
fontSize: "10px",
|
|
1418
|
+
fontWeight: 700,
|
|
1419
|
+
lineHeight: 1,
|
|
1420
|
+
padding: "0 4px",
|
|
1421
|
+
background: isActive ? isDark ? "#1e7d55" : "#1e7d55" : isDark ? "#4b5563" : "#e5e7eb",
|
|
1422
|
+
color: isActive ? "#ffffff" : isDark ? "#d1d5db" : "#6b7280"
|
|
1423
|
+
},
|
|
1424
|
+
children: tab.count
|
|
1425
|
+
}
|
|
1426
|
+
)
|
|
1427
|
+
]
|
|
1428
|
+
},
|
|
1429
|
+
tab.key
|
|
1430
|
+
);
|
|
1431
|
+
})
|
|
1360
1432
|
}
|
|
1361
1433
|
)
|
|
1362
1434
|
]
|
|
1363
1435
|
}
|
|
1364
1436
|
),
|
|
1365
|
-
/* @__PURE__ */ jsx("div", { style: { maxHeight: "60vh", overflowY: "auto" }, children:
|
|
1437
|
+
/* @__PURE__ */ jsx("div", { style: { maxHeight: "60vh", overflowY: "auto" }, children: filteredNotifications.length === 0 ? /* @__PURE__ */ jsx(
|
|
1366
1438
|
"div",
|
|
1367
1439
|
{
|
|
1368
1440
|
style: {
|
|
@@ -1371,21 +1443,22 @@ function UserHeader({
|
|
|
1371
1443
|
color: "#9ca3af",
|
|
1372
1444
|
fontSize: "14px"
|
|
1373
1445
|
},
|
|
1374
|
-
children: "\u{1F514} \u0E44\u0E21\u0E48\u0E21\u0E35\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19\u0E43\u0E2B\u0E21\u0E48"
|
|
1446
|
+
children: activeFilter === "all" ? "\u{1F514} \u0E44\u0E21\u0E48\u0E21\u0E35\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19\u0E43\u0E2B\u0E21\u0E48" : activeFilter === "action" ? "\u2705 \u0E44\u0E21\u0E48\u0E21\u0E35\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E17\u0E35\u0E48\u0E15\u0E49\u0E2D\u0E07\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23" : "\u{1F4CB} \u0E44\u0E21\u0E48\u0E21\u0E35\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19\u0E17\u0E31\u0E48\u0E27\u0E44\u0E1B"
|
|
1375
1447
|
}
|
|
1376
|
-
) :
|
|
1448
|
+
) : filteredNotifications.map((item) => /* @__PURE__ */ jsxs(
|
|
1377
1449
|
"div",
|
|
1378
1450
|
{
|
|
1379
1451
|
onClick: () => onNotificationClick?.(item),
|
|
1380
1452
|
style: {
|
|
1381
1453
|
padding: "12px 16px",
|
|
1382
|
-
borderBottom:
|
|
1454
|
+
borderBottom: `1px solid ${isDark ? "#2d3748" : "#f3f4f6"}`,
|
|
1383
1455
|
cursor: "pointer",
|
|
1384
1456
|
background: !item.isRead ? isDark ? "rgba(59,130,246,0.15)" : "rgba(219,234,254,0.3)" : "transparent",
|
|
1385
1457
|
position: "relative",
|
|
1386
1458
|
display: "flex",
|
|
1387
1459
|
gap: "12px",
|
|
1388
|
-
alignItems: "flex-start"
|
|
1460
|
+
alignItems: "flex-start",
|
|
1461
|
+
transition: "background-color 0.15s ease"
|
|
1389
1462
|
},
|
|
1390
1463
|
onMouseEnter: (e) => {
|
|
1391
1464
|
e.currentTarget.style.backgroundColor = isDark ? "#1f2937" : "#f9fafb";
|
|
@@ -1427,6 +1500,22 @@ function UserHeader({
|
|
|
1427
1500
|
}
|
|
1428
1501
|
),
|
|
1429
1502
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1503
|
+
item.category === "action" && /* @__PURE__ */ jsx(
|
|
1504
|
+
"span",
|
|
1505
|
+
{
|
|
1506
|
+
style: {
|
|
1507
|
+
display: "inline-block",
|
|
1508
|
+
fontSize: "10px",
|
|
1509
|
+
fontWeight: 600,
|
|
1510
|
+
color: "#b45309",
|
|
1511
|
+
background: "#fef3c7",
|
|
1512
|
+
padding: "1px 6px",
|
|
1513
|
+
borderRadius: "4px",
|
|
1514
|
+
marginBottom: "4px"
|
|
1515
|
+
},
|
|
1516
|
+
children: "\u0E15\u0E49\u0E2D\u0E07\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23"
|
|
1517
|
+
}
|
|
1518
|
+
),
|
|
1430
1519
|
/* @__PURE__ */ jsx(
|
|
1431
1520
|
"p",
|
|
1432
1521
|
{
|