@appcorp/kismaa-web-ui 0.2.66 → 0.2.69
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/organisms/navbar/logged-in-user-avatar.d.ts +9 -0
- package/organisms/navbar/logged-in-user-avatar.js +144 -0
- package/organisms/navbar/navbar.js +3 -19
- package/organisms/navbar/notification-item.d.ts +9 -0
- package/organisms/navbar/notification-item.js +21 -0
- package/organisms/navbar/props.js +20 -0
- package/organisms/navbar/type.d.ts +7 -0
- package/package.json +9 -4
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { LoggedInUser, Notification } from './type';
|
|
3
|
+
interface LoggedInUserProps {
|
|
4
|
+
avatarClassName: string;
|
|
5
|
+
loggedInUser: LoggedInUser | null;
|
|
6
|
+
notificationItems: Notification[] | [];
|
|
7
|
+
}
|
|
8
|
+
export declare const LoggedInUserAvatar: FC<LoggedInUserProps>;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
30
|
+
var ownKeys = function(o) {
|
|
31
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
32
|
+
var ar = [];
|
|
33
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
34
|
+
return ar;
|
|
35
|
+
};
|
|
36
|
+
return ownKeys(o);
|
|
37
|
+
};
|
|
38
|
+
return function (mod) {
|
|
39
|
+
if (mod && mod.__esModule) return mod;
|
|
40
|
+
var result = {};
|
|
41
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
42
|
+
__setModuleDefault(result, mod);
|
|
43
|
+
return result;
|
|
44
|
+
};
|
|
45
|
+
})();
|
|
46
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
47
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
48
|
+
};
|
|
49
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
50
|
+
exports.LoggedInUserAvatar = void 0;
|
|
51
|
+
var atoms_1 = require("../../atoms");
|
|
52
|
+
var react_1 = require("@headlessui/react");
|
|
53
|
+
var image_1 = __importDefault(require("next/image"));
|
|
54
|
+
var vista_vertical_divider_v4_1 = require("@appcorp/app-corp-vista/molecules/vista-vertical-divider-v4");
|
|
55
|
+
var react_popper_1 = require("react-popper");
|
|
56
|
+
var react_2 = __importStar(require("react"));
|
|
57
|
+
var link_1 = __importDefault(require("next/link"));
|
|
58
|
+
var BellIcon_1 = __importDefault(require("@heroicons/react/24/outline/BellIcon"));
|
|
59
|
+
var notification_item_1 = require("./notification-item");
|
|
60
|
+
var LoggedInUserAvatar = function (_a) {
|
|
61
|
+
var _b, _c;
|
|
62
|
+
var avatarClassName = _a.avatarClassName, loggedInUser = _a.loggedInUser, notificationItems = _a.notificationItems;
|
|
63
|
+
var _d = (0, react_2.useState)(null), avatarElement = _d[0], setAvatarElement = _d[1];
|
|
64
|
+
var _e = (0, react_2.useState)(null), notificationElement = _e[0], setNotificationElement = _e[1];
|
|
65
|
+
var _f = (0, react_2.useState)(null), avatarDropdown = _f[0], setAvatarDropdown = _f[1];
|
|
66
|
+
var _g = (0, react_2.useState)(null), notificationDropdown = _g[0], setNotificationDropdown = _g[1];
|
|
67
|
+
var _h = (0, react_popper_1.usePopper)(avatarElement, avatarDropdown, {
|
|
68
|
+
placement: 'top-start',
|
|
69
|
+
modifiers: [
|
|
70
|
+
{
|
|
71
|
+
name: 'offset',
|
|
72
|
+
options: {
|
|
73
|
+
offset: [145, 0],
|
|
74
|
+
},
|
|
75
|
+
},
|
|
76
|
+
],
|
|
77
|
+
}), avatarStyles = _h.styles, avatarAttributes = _h.attributes;
|
|
78
|
+
var _j = (0, react_popper_1.usePopper)(notificationElement, notificationDropdown, {
|
|
79
|
+
placement: 'top-start',
|
|
80
|
+
modifiers: [
|
|
81
|
+
{
|
|
82
|
+
name: 'offset',
|
|
83
|
+
options: {
|
|
84
|
+
offset: [180, 0],
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
],
|
|
88
|
+
}), notificationStyles = _j.styles, notificationAttributes = _j.attributes;
|
|
89
|
+
var unReadNotifications = (0, react_2.useMemo)(function () {
|
|
90
|
+
return notificationItems === null || notificationItems === void 0 ? void 0 : notificationItems.filter(function (_a) {
|
|
91
|
+
var isRead = _a.isRead;
|
|
92
|
+
return !isRead;
|
|
93
|
+
});
|
|
94
|
+
}, [notificationItems]);
|
|
95
|
+
var readNotifications = (0, react_2.useMemo)(function () {
|
|
96
|
+
return notificationItems === null || notificationItems === void 0 ? void 0 : notificationItems.filter(function (_a) {
|
|
97
|
+
var isRead = _a.isRead;
|
|
98
|
+
return isRead;
|
|
99
|
+
});
|
|
100
|
+
}, [notificationItems]);
|
|
101
|
+
return (react_2.default.createElement("div", null,
|
|
102
|
+
(loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.route) &&
|
|
103
|
+
(loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) &&
|
|
104
|
+
!((_b = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) === null || _b === void 0 ? void 0 : _b.length) && (react_2.default.createElement("div", { className: "flex flex-col items-end justify-center" },
|
|
105
|
+
react_2.default.createElement(BellIcon_1.default, { className: "size-8" }),
|
|
106
|
+
react_2.default.createElement(link_1.default, { href: loggedInUser.route }, (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl) ? (react_2.default.createElement(image_1.default, { alt: loggedInUser.firstName, className: avatarClassName, height: 40, src: loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl, width: 40 })) : (react_2.default.createElement(atoms_1.UserIcon, { className: avatarClassName }))))),
|
|
107
|
+
(loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) && (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems.length) > 0 && (react_2.default.createElement("div", { className: "flex flex-row items-center justify-end gap-2" },
|
|
108
|
+
react_2.default.createElement(react_1.Popover, { className: "relative" },
|
|
109
|
+
react_2.default.createElement("div", { className: "flex flex-row items-center justify-center" },
|
|
110
|
+
react_2.default.createElement(react_1.PopoverButton, { ref: setNotificationElement },
|
|
111
|
+
react_2.default.createElement("div", null,
|
|
112
|
+
unReadNotifications.length > 0 && (react_2.default.createElement("span", { className: "relative flex size-3" },
|
|
113
|
+
react_2.default.createElement("span", { className: "bg-primary absolute inline-flex h-full w-full animate-ping rounded-full opacity-75" }),
|
|
114
|
+
react_2.default.createElement("span", { className: "bg-primary relative inline-flex size-3 rounded-full" }))),
|
|
115
|
+
react_2.default.createElement(BellIcon_1.default, { className: "stroke-primary size-7 h-full" })))),
|
|
116
|
+
react_2.default.createElement(react_1.PopoverPanel, __assign({ transition: true, className: "absolute left-1/2 z-10 mt-2 flex w-screen max-w-min -translate-x-1/2 bg-transparent px-4 transition data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in", ref: setNotificationDropdown, style: notificationStyles.popper }, notificationAttributes.popper),
|
|
117
|
+
react_2.default.createElement("div", { className: "w-86 shrink rounded-xl bg-white p-4 text-sm/6 font-semibold text-gray-900 shadow-lg outline-1 outline-gray-900/5 dark:bg-gray-800 dark:text-white dark:shadow-none dark:outline dark:-outline-offset-1 dark:outline-white/10" },
|
|
118
|
+
notificationItems.length === 0 && (react_2.default.createElement("p", { className: "" }, "No new notifications")),
|
|
119
|
+
react_2.default.createElement("div", { className: "divider-y-gray-300 flex flex-col items-center justify-center" }, unReadNotifications &&
|
|
120
|
+
unReadNotifications.length > 0 &&
|
|
121
|
+
unReadNotifications.map(function (_a) {
|
|
122
|
+
var message = _a.message, time = _a.time, id = _a.id;
|
|
123
|
+
return (react_2.default.createElement(notification_item_1.NotificationItem, { avatarClassName: avatarClassName, id: id, message: message, time: time }));
|
|
124
|
+
})),
|
|
125
|
+
react_2.default.createElement("div", { className: "divider-y-gray-300 flex w-full flex-col items-center justify-center" },
|
|
126
|
+
react_2.default.createElement("div", { className: "w-full" }, readNotifications && readNotifications.length > 0 && (react_2.default.createElement(vista_vertical_divider_v4_1.VistaVerticalDividerV4, { label: "Read Notifications" }))),
|
|
127
|
+
readNotifications &&
|
|
128
|
+
readNotifications.length > 0 &&
|
|
129
|
+
readNotifications.map(function (_a) {
|
|
130
|
+
var message = _a.message, time = _a.time, id = _a.id;
|
|
131
|
+
return (react_2.default.createElement(react_2.default.Fragment, null,
|
|
132
|
+
react_2.default.createElement(notification_item_1.NotificationItem, { avatarClassName: avatarClassName, id: id, message: message, time: time })));
|
|
133
|
+
}))))),
|
|
134
|
+
react_2.default.createElement(react_1.Popover, { className: "relative" },
|
|
135
|
+
react_2.default.createElement("div", { className: "flex flex-col items-end justify-start" },
|
|
136
|
+
react_2.default.createElement(react_1.PopoverButton, { ref: setAvatarElement }, (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl) ? (react_2.default.createElement(image_1.default, { alt: loggedInUser.firstName, className: avatarClassName, height: 40, src: loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl, width: 40 })) : (react_2.default.createElement(atoms_1.UserIcon, { className: avatarClassName })))),
|
|
137
|
+
react_2.default.createElement(react_1.PopoverPanel, __assign({ transition: true, className: "absolute left-1/2 z-10 mt-2 flex w-screen max-w-min -translate-x-1/2 bg-transparent px-4 transition data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in", ref: setAvatarDropdown, style: avatarStyles.popper }, avatarAttributes.popper),
|
|
138
|
+
react_2.default.createElement("div", { className: "w-56 shrink rounded-xl bg-white p-4 text-sm/6 font-semibold text-gray-900 shadow-lg outline-1 outline-gray-900/5 dark:bg-gray-800 dark:text-white dark:shadow-none dark:outline dark:-outline-offset-1 dark:outline-white/10" }, (_c = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) === null || _c === void 0 ? void 0 : _c.map(function (_a) {
|
|
139
|
+
var label = _a.label, handleOnClick = _a.handleOnClick;
|
|
140
|
+
return (react_2.default.createElement("button", { key: label, className: "hover:text-primary dark:hover:text-primary/50 block cursor-pointer p-2", onClick: handleOnClick },
|
|
141
|
+
react_2.default.createElement("p", { className: "text-primary font-bold" }, label)));
|
|
142
|
+
}))))))));
|
|
143
|
+
};
|
|
144
|
+
exports.LoggedInUserAvatar = LoggedInUserAvatar;
|
|
@@ -11,16 +11,13 @@ var Bars3Icon_1 = __importDefault(require("@heroicons/react/24/solid/Bars3Icon")
|
|
|
11
11
|
var XMarkIcon_1 = __importDefault(require("@heroicons/react/24/solid/XMarkIcon"));
|
|
12
12
|
var link_1 = __importDefault(require("next/link"));
|
|
13
13
|
var react_1 = __importDefault(require("react"));
|
|
14
|
-
var image_1 = __importDefault(require("next/image"));
|
|
15
14
|
var mega_menu_1 = require("../mega-menu");
|
|
16
15
|
var header_pointer_icon_1 = require("../../atoms/header-pointer-icon");
|
|
17
|
-
var user_icon_1 = require("../../atoms/user-icon");
|
|
18
|
-
var react_2 = require("@headlessui/react");
|
|
19
16
|
var mobile_menu_1 = require("./mobile-menu");
|
|
20
17
|
var user_1 = require("@appcorp/kismaa-utils/api/type/user");
|
|
18
|
+
var logged_in_user_avatar_1 = require("./logged-in-user-avatar");
|
|
21
19
|
var Navbar = function (_a) {
|
|
22
|
-
var _b, _c;
|
|
23
|
-
var handleMegaMenuToggle = _a.handleMegaMenuToggle, handleSearch = _a.handleSearch, headerActions = _a.headerActions, homeLink = _a.homeLink, isMobileMenuOpen = _a.isMobileMenuOpen, _d = _a.loggedInUser, loggedInUser = _d === void 0 ? null : _d, navLinks = _a.navLinks, _e = _a.showSearch, showSearch = _e === void 0 ? false : _e, toggleMobileMenu = _a.toggleMobileMenu;
|
|
20
|
+
var handleMegaMenuToggle = _a.handleMegaMenuToggle, handleSearch = _a.handleSearch, headerActions = _a.headerActions, homeLink = _a.homeLink, isMobileMenuOpen = _a.isMobileMenuOpen, _b = _a.loggedInUser, loggedInUser = _b === void 0 ? null : _b, navLinks = _a.navLinks, notificationItems = _a.notificationItems, _c = _a.showSearch, showSearch = _c === void 0 ? false : _c, toggleMobileMenu = _a.toggleMobileMenu;
|
|
24
21
|
var renderNavLink = function (link) {
|
|
25
22
|
var _a;
|
|
26
23
|
return (react_1.default.createElement("div", { key: link.label, className: "relative w-fit", onMouseEnter: handleMegaMenuToggle, onMouseLeave: handleMegaMenuToggle },
|
|
@@ -53,20 +50,7 @@ var Navbar = function (_a) {
|
|
|
53
50
|
showSearch && (react_1.default.createElement("div", { className: "", onClick: handleSearch },
|
|
54
51
|
react_1.default.createElement(search_icon_1.SearchIcon, { className: "size-5 cursor-pointer" }))),
|
|
55
52
|
loggedInUser ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
56
|
-
(
|
|
57
|
-
(loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) &&
|
|
58
|
-
!((_b = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) === null || _b === void 0 ? void 0 : _b.length) && (react_1.default.createElement("div", { className: "flex flex-col items-end justify-center" },
|
|
59
|
-
react_1.default.createElement(link_1.default, { href: loggedInUser.route }, (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl) ? (react_1.default.createElement(image_1.default, { alt: loggedInUser.firstName, className: avatarClassName, height: 40, src: loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl, width: 40 })) : (react_1.default.createElement(user_icon_1.UserIcon, { className: avatarClassName }))))),
|
|
60
|
-
(loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) &&
|
|
61
|
-
(loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems.length) > 0 && (react_1.default.createElement(react_2.Popover, { className: "relative" },
|
|
62
|
-
react_1.default.createElement("div", { className: "flex flex-col items-end justify-start" },
|
|
63
|
-
react_1.default.createElement(react_2.PopoverButton, null, (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl) ? (react_1.default.createElement(image_1.default, { alt: loggedInUser.firstName, className: avatarClassName, height: 40, src: loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl, width: 40 })) : (react_1.default.createElement(user_icon_1.UserIcon, { className: avatarClassName })))),
|
|
64
|
-
react_1.default.createElement(react_2.PopoverPanel, { transition: true, className: "absolute left-1/2 z-10 mt-2 flex w-screen max-w-min -translate-x-1/2 bg-transparent px-4 transition data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in" },
|
|
65
|
-
react_1.default.createElement("div", { className: "w-56 shrink rounded-xl bg-white p-4 text-sm/6 font-semibold text-gray-900 shadow-lg outline-1 outline-gray-900/5 dark:bg-gray-800 dark:text-white dark:shadow-none dark:outline dark:-outline-offset-1 dark:outline-white/10" }, (_c = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) === null || _c === void 0 ? void 0 : _c.map(function (_a) {
|
|
66
|
-
var label = _a.label, handleOnClick = _a.handleOnClick;
|
|
67
|
-
return (react_1.default.createElement("button", { key: label, className: "hover:text-primary dark:hover:text-primary/50 block cursor-pointer p-2", onClick: handleOnClick },
|
|
68
|
-
react_1.default.createElement("p", { className: "text-primary font-bold" }, label)));
|
|
69
|
-
}))))))) : (react_1.default.createElement("div", { className: "flex items-center justify-end" }, headerActions
|
|
53
|
+
react_1.default.createElement(logged_in_user_avatar_1.LoggedInUserAvatar, { loggedInUser: loggedInUser, avatarClassName: avatarClassName, notificationItems: notificationItems }))) : (react_1.default.createElement("div", { className: "flex items-center justify-end" }, headerActions
|
|
70
54
|
.filter(function (_a) {
|
|
71
55
|
var enabled = _a.enabled;
|
|
72
56
|
return enabled;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.NotificationItem = void 0;
|
|
7
|
+
var react_timeago_1 = __importDefault(require("react-timeago"));
|
|
8
|
+
var misc_1 = require("@appcorp/kismaa-utils/constants/misc");
|
|
9
|
+
var react_1 = __importDefault(require("react"));
|
|
10
|
+
var image_1 = __importDefault(require("next/image"));
|
|
11
|
+
var NotificationItem = function (_a) {
|
|
12
|
+
var avatarClassName = _a.avatarClassName, message = _a.message, time = _a.time;
|
|
13
|
+
var formatter = function (value, unit) { return (react_1.default.createElement("p", { className: "text-xs font-normal text-gray-500" }, "".concat(value).concat(unit.charAt(0)))); };
|
|
14
|
+
return (react_1.default.createElement("div", null,
|
|
15
|
+
react_1.default.createElement("div", { className: "flex w-full flex-row items-center justify-between gap-2 p-2" },
|
|
16
|
+
react_1.default.createElement(image_1.default, { alt: "avatar", className: avatarClassName, height: 40, src: misc_1.referenceAvatar, width: 40 }),
|
|
17
|
+
react_1.default.createElement("p", { className: "text-xs font-normal text-gray-500 dark:text-gray-400" }, message),
|
|
18
|
+
react_1.default.createElement("div", null,
|
|
19
|
+
react_1.default.createElement(react_timeago_1.default, { date: time, formatter: formatter })))));
|
|
20
|
+
};
|
|
21
|
+
exports.NotificationItem = NotificationItem;
|
|
@@ -48,6 +48,26 @@ exports.navbarData = {
|
|
|
48
48
|
type: molecules_1.BUTTON_TYPES.SECONDARY,
|
|
49
49
|
},
|
|
50
50
|
],
|
|
51
|
+
notificationItems: [
|
|
52
|
+
{
|
|
53
|
+
id: '1',
|
|
54
|
+
message: 'Missed chat opportunity with John Doe',
|
|
55
|
+
isRead: false,
|
|
56
|
+
time: new Date('2025-10-01T10:00:00Z').toLocaleDateString(),
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
id: '2',
|
|
60
|
+
message: 'Missed chat opportunity with John Doe',
|
|
61
|
+
isRead: true,
|
|
62
|
+
time: new Date('2025-05-01T10:00:00Z').toLocaleDateString(),
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
id: '3',
|
|
66
|
+
message: 'Missed chat opportunity with John Doe',
|
|
67
|
+
isRead: true,
|
|
68
|
+
time: new Date('2024-10-01T10:00:00Z').toLocaleDateString(),
|
|
69
|
+
},
|
|
70
|
+
],
|
|
51
71
|
handleMegaMenuToggle: function () { return void 0; },
|
|
52
72
|
handleSearch: function () { return void 0; },
|
|
53
73
|
isMobileMenuOpen: false,
|
|
@@ -28,6 +28,12 @@ export interface LoggedInUser {
|
|
|
28
28
|
menuItems?: MenuItem[];
|
|
29
29
|
userType?: USER_TYPE;
|
|
30
30
|
}
|
|
31
|
+
export interface Notification {
|
|
32
|
+
id: string;
|
|
33
|
+
message: string;
|
|
34
|
+
isRead: boolean;
|
|
35
|
+
time: string;
|
|
36
|
+
}
|
|
31
37
|
export interface NavbarProps {
|
|
32
38
|
handleMegaMenuToggle: (e: MouseEvent<HTMLDivElement>) => void;
|
|
33
39
|
handleSearch: () => void;
|
|
@@ -36,6 +42,7 @@ export interface NavbarProps {
|
|
|
36
42
|
isMobileMenuOpen: boolean;
|
|
37
43
|
loggedInUser: LoggedInUser | null;
|
|
38
44
|
navLinks: NavLinks[];
|
|
45
|
+
notificationItems: Notification[] | [];
|
|
39
46
|
showSearch?: boolean;
|
|
40
47
|
toggleMobileMenu: () => void;
|
|
41
48
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@appcorp/kismaa-web-ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.69",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"main": "lib/main.js",
|
|
6
6
|
"module": "lib/module.js",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
}
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@appcorp/app-corp-vista": "^0.3.
|
|
48
|
-
"@appcorp/kismaa-utils": "^0.2.
|
|
47
|
+
"@appcorp/app-corp-vista": "^0.3.46",
|
|
48
|
+
"@appcorp/kismaa-utils": "^0.2.64",
|
|
49
49
|
"@chromatic-com/storybook": "^4",
|
|
50
50
|
"@headlessui/react": "^2",
|
|
51
51
|
"@headlessui/tailwindcss": "^0",
|
|
@@ -94,6 +94,7 @@
|
|
|
94
94
|
"prettier-plugin-tailwindcss": "^0",
|
|
95
95
|
"react": "^19",
|
|
96
96
|
"react-dom": "^19",
|
|
97
|
+
"react-timeago": "^8.3.0",
|
|
97
98
|
"rimraf": "^6",
|
|
98
99
|
"storybook": "^9",
|
|
99
100
|
"swiper": "^11",
|
|
@@ -104,5 +105,9 @@
|
|
|
104
105
|
"uuid": "^13",
|
|
105
106
|
"zod": "^4"
|
|
106
107
|
},
|
|
107
|
-
"packageManager": "yarn@4.9.2"
|
|
108
|
+
"packageManager": "yarn@4.9.2",
|
|
109
|
+
"dependencies": {
|
|
110
|
+
"@popperjs/core": "^2.11.8",
|
|
111
|
+
"react-popper": "^2.3.0"
|
|
112
|
+
}
|
|
108
113
|
}
|