gov-layout 1.2.24 → 1.2.26
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 +33 -3
- package/dist/index.d.mts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +107 -21
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +107 -21
- 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
|
{
|
|
@@ -1338,34 +1346,95 @@ function UserHeader({
|
|
|
1338
1346
|
"div",
|
|
1339
1347
|
{
|
|
1340
1348
|
style: {
|
|
1341
|
-
padding: "16px",
|
|
1342
|
-
borderBottom: `1px solid ${isDark ? "#374151" : "#f3f4f6"}`,
|
|
1343
|
-
display: "flex",
|
|
1344
|
-
alignItems: "center",
|
|
1345
|
-
justifyContent: "space-between",
|
|
1349
|
+
padding: "16px 16px 0",
|
|
1346
1350
|
background: isDark ? "#1f2937" : "#fafafa"
|
|
1347
1351
|
},
|
|
1348
1352
|
children: [
|
|
1349
|
-
/* @__PURE__ */
|
|
1350
|
-
|
|
1351
|
-
|
|
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",
|
|
1352
1373
|
{
|
|
1353
|
-
onClick: onMarkAllRead,
|
|
1354
1374
|
style: {
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
cursor: "pointer",
|
|
1360
|
-
fontWeight: 500
|
|
1375
|
+
display: "flex",
|
|
1376
|
+
gap: "6px",
|
|
1377
|
+
paddingBottom: "12px",
|
|
1378
|
+
borderBottom: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`
|
|
1361
1379
|
},
|
|
1362
|
-
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
|
+
})
|
|
1363
1432
|
}
|
|
1364
1433
|
)
|
|
1365
1434
|
]
|
|
1366
1435
|
}
|
|
1367
1436
|
),
|
|
1368
|
-
/* @__PURE__ */ jsx("div", { style: { maxHeight: "60vh", overflowY: "auto" }, children:
|
|
1437
|
+
/* @__PURE__ */ jsx("div", { style: { maxHeight: "60vh", overflowY: "auto" }, children: filteredNotifications.length === 0 ? /* @__PURE__ */ jsx(
|
|
1369
1438
|
"div",
|
|
1370
1439
|
{
|
|
1371
1440
|
style: {
|
|
@@ -1374,21 +1443,22 @@ function UserHeader({
|
|
|
1374
1443
|
color: "#9ca3af",
|
|
1375
1444
|
fontSize: "14px"
|
|
1376
1445
|
},
|
|
1377
|
-
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"
|
|
1378
1447
|
}
|
|
1379
|
-
) :
|
|
1448
|
+
) : filteredNotifications.map((item) => /* @__PURE__ */ jsxs(
|
|
1380
1449
|
"div",
|
|
1381
1450
|
{
|
|
1382
1451
|
onClick: () => onNotificationClick?.(item),
|
|
1383
1452
|
style: {
|
|
1384
1453
|
padding: "12px 16px",
|
|
1385
|
-
borderBottom:
|
|
1454
|
+
borderBottom: `1px solid ${isDark ? "#2d3748" : "#f3f4f6"}`,
|
|
1386
1455
|
cursor: "pointer",
|
|
1387
1456
|
background: !item.isRead ? isDark ? "rgba(59,130,246,0.15)" : "rgba(219,234,254,0.3)" : "transparent",
|
|
1388
1457
|
position: "relative",
|
|
1389
1458
|
display: "flex",
|
|
1390
1459
|
gap: "12px",
|
|
1391
|
-
alignItems: "flex-start"
|
|
1460
|
+
alignItems: "flex-start",
|
|
1461
|
+
transition: "background-color 0.15s ease"
|
|
1392
1462
|
},
|
|
1393
1463
|
onMouseEnter: (e) => {
|
|
1394
1464
|
e.currentTarget.style.backgroundColor = isDark ? "#1f2937" : "#f9fafb";
|
|
@@ -1430,6 +1500,22 @@ function UserHeader({
|
|
|
1430
1500
|
}
|
|
1431
1501
|
),
|
|
1432
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
|
+
),
|
|
1433
1519
|
/* @__PURE__ */ jsx(
|
|
1434
1520
|
"p",
|
|
1435
1521
|
{
|