@myrjfa/ui 1.0.8 → 1.0.10
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/chat/ChatMain.d.ts +9 -0
- package/dist/chat/ChatMain.d.ts.map +1 -0
- package/dist/chat/ChatMain.js +272 -0
- package/dist/chat/ChatSidebar.d.ts +13 -0
- package/dist/chat/ChatSidebar.d.ts.map +1 -0
- package/dist/chat/ChatSidebar.js +23 -0
- package/dist/chat/ConversationList.d.ts +12 -0
- package/dist/chat/ConversationList.d.ts.map +1 -0
- package/dist/chat/ConversationList.js +70 -0
- package/dist/chat/ExpensePanel.d.ts +11 -0
- package/dist/chat/ExpensePanel.d.ts.map +1 -0
- package/dist/chat/ExpensePanel.js +235 -0
- package/dist/chat/MessageBubble.d.ts +18 -0
- package/dist/chat/MessageBubble.d.ts.map +1 -0
- package/dist/chat/MessageBubble.js +284 -0
- package/dist/chat/MessageInput.d.ts +21 -0
- package/dist/chat/MessageInput.d.ts.map +1 -0
- package/dist/chat/MessageInput.js +252 -0
- package/dist/chat/MilestonePanel.d.ts +11 -0
- package/dist/chat/MilestonePanel.d.ts.map +1 -0
- package/dist/chat/MilestonePanel.js +173 -0
- package/dist/chat/components/ParticipantSelector.d.ts +11 -0
- package/dist/chat/components/ParticipantSelector.d.ts.map +1 -0
- package/dist/chat/components/ParticipantSelector.js +17 -0
- package/dist/chat/components/SplitInputs.d.ts +11 -0
- package/dist/chat/components/SplitInputs.d.ts.map +1 -0
- package/dist/chat/components/SplitInputs.js +83 -0
- package/dist/chat/components/SplitTypeSelector.d.ts +8 -0
- package/dist/chat/components/SplitTypeSelector.d.ts.map +1 -0
- package/dist/chat/components/SplitTypeSelector.js +13 -0
- package/dist/chat/dialogs/AddMemberDialog.d.ts +10 -0
- package/dist/chat/dialogs/AddMemberDialog.d.ts.map +1 -0
- package/dist/chat/dialogs/AddMemberDialog.js +50 -0
- package/dist/chat/dialogs/CameraDialog.d.ts +8 -0
- package/dist/chat/dialogs/CameraDialog.d.ts.map +1 -0
- package/dist/chat/dialogs/CameraDialog.js +80 -0
- package/dist/chat/dialogs/CreatePollDialog.d.ts +8 -0
- package/dist/chat/dialogs/CreatePollDialog.d.ts.map +1 -0
- package/dist/chat/dialogs/CreatePollDialog.js +38 -0
- package/dist/chat/dialogs/ExpenseAnalyticsDialog.d.ts +19 -0
- package/dist/chat/dialogs/ExpenseAnalyticsDialog.d.ts.map +1 -0
- package/dist/chat/dialogs/ExpenseAnalyticsDialog.js +52 -0
- package/dist/chat/dialogs/GroupInfoDialog.d.ts +10 -0
- package/dist/chat/dialogs/GroupInfoDialog.d.ts.map +1 -0
- package/dist/chat/dialogs/GroupInfoDialog.js +71 -0
- package/dist/chat/dialogs/GroupInfoViewDialog.d.ts +9 -0
- package/dist/chat/dialogs/GroupInfoViewDialog.d.ts.map +1 -0
- package/dist/chat/dialogs/GroupInfoViewDialog.js +15 -0
- package/dist/chat/dialogs/NewChatDialog.d.ts +2 -0
- package/dist/chat/dialogs/NewChatDialog.d.ts.map +1 -0
- package/dist/chat/dialogs/NewChatDialog.js +63 -0
- package/dist/chat/dialogs/NewGroupDialog.d.ts +2 -0
- package/dist/chat/dialogs/NewGroupDialog.d.ts.map +1 -0
- package/dist/chat/dialogs/NewGroupDialog.js +69 -0
- package/dist/chat/dialogs/ParticipantsDialog.d.ts +11 -0
- package/dist/chat/dialogs/ParticipantsDialog.d.ts.map +1 -0
- package/dist/chat/dialogs/ParticipantsDialog.js +93 -0
- package/dist/chat/dialogs/UserProfileDialog.d.ts +10 -0
- package/dist/chat/dialogs/UserProfileDialog.d.ts.map +1 -0
- package/dist/chat/dialogs/UserProfileDialog.js +100 -0
- package/dist/chat/index.d.ts +8 -0
- package/dist/chat/index.d.ts.map +1 -0
- package/dist/chat/index.js +7 -0
- package/dist/dashboard/action-buttons.js +4 -5
- package/dist/dashboard/app-sidebar.js +46 -128
- package/dist/dashboard/card-header.js +1 -2
- package/dist/dashboard/dashboard-components.js +3 -5
- package/dist/dashboard/data-table.d.ts +18 -18
- package/dist/dashboard/data-table.js +54 -66
- package/dist/dashboard/nav-main.js +4 -5
- package/dist/dashboard/nav-secondary.js +2 -25
- package/dist/dashboard/stats-card.js +1 -2
- package/dist/dashboard/table.js +8 -54
- package/dist/header/mobile-nav-item.js +1 -2
- package/dist/header/mobile-navbar.js +8 -9
- package/dist/header/nav-item.d.ts +2 -1
- package/dist/header/nav-item.d.ts.map +1 -1
- package/dist/header/nav-item.js +2 -3
- package/dist/index.d.ts +57 -56
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +57 -57
- package/dist/main/footer.js +5 -9
- package/dist/main/navbar.d.ts.map +1 -1
- package/dist/main/navbar.js +53 -136
- package/dist/main/paginationBar.js +12 -14
- package/dist/main/portfolio/portfolioItem.js +1 -2
- package/dist/main/portfolio/portfolioPopup.js +16 -17
- package/dist/main/review-page.d.ts.map +1 -1
- package/dist/main/review-page.js +131 -198
- package/dist/misc/accordion.js +8 -34
- package/dist/misc/alert-dialog.js +22 -55
- package/dist/misc/alert.js +7 -32
- package/dist/misc/alertdialogclaude.js +50 -125
- package/dist/misc/avatar.js +6 -31
- package/dist/misc/badge.d.ts +8 -8
- package/dist/misc/badge.js +4 -27
- package/dist/misc/button.d.ts +9 -9
- package/dist/misc/button.js +4 -27
- package/dist/misc/card.js +12 -40
- package/dist/misc/carousel.js +37 -61
- package/dist/misc/checkbox.js +2 -25
- package/dist/misc/command.d.ts +3 -1
- package/dist/misc/command.d.ts.map +1 -1
- package/dist/misc/command.js +18 -49
- package/dist/misc/datepicker.js +66 -76
- package/dist/misc/dialog.js +20 -52
- package/dist/misc/dropdown-menu.js +30 -67
- package/dist/misc/faq.js +2 -3
- package/dist/misc/file-preview.js +43 -97
- package/dist/misc/filter.d.ts.map +1 -1
- package/dist/misc/filter.js +18 -21
- package/dist/misc/filterBar.js +136 -160
- package/dist/misc/form.d.ts +1 -1
- package/dist/misc/form.d.ts.map +1 -1
- package/dist/misc/form.js +39 -60
- package/dist/misc/image-cropper.d.ts +10 -0
- package/dist/misc/image-cropper.d.ts.map +1 -0
- package/dist/misc/image-cropper.js +44 -0
- package/dist/misc/input.js +2 -25
- package/dist/misc/label.js +2 -25
- package/dist/misc/line-carousel.js +3 -13
- package/dist/misc/multiImageUploader.d.ts +8 -8
- package/dist/misc/multiImageUploader.js +10 -11
- package/dist/misc/newsLetter.js +18 -78
- package/dist/misc/notification.d.ts +1 -2
- package/dist/misc/notification.d.ts.map +1 -1
- package/dist/misc/notification.js +89 -125
- package/dist/misc/pagination.js +16 -45
- package/dist/misc/password-eye.js +2 -3
- package/dist/misc/popover.d.ts.map +1 -1
- package/dist/misc/popover.js +8 -34
- package/dist/misc/progress.js +2 -25
- package/dist/misc/scroll-area.js +5 -29
- package/dist/misc/searchBar.js +27 -31
- package/dist/misc/searchBox.js +18 -22
- package/dist/misc/select.d.ts.map +1 -1
- package/dist/misc/select.js +22 -54
- package/dist/misc/separator.js +2 -25
- package/dist/misc/share.js +48 -104
- package/dist/misc/sheet.js +21 -53
- package/dist/misc/sidebar.d.ts +69 -69
- package/dist/misc/sidebar.js +112 -153
- package/dist/misc/skeleton.d.ts +2 -2
- package/dist/misc/skeleton.js +6 -29
- package/dist/misc/slider.js +3 -26
- package/dist/misc/starRating.js +5 -15
- package/dist/misc/stateCard.js +7 -8
- package/dist/misc/switch.d.ts +5 -0
- package/dist/misc/switch.d.ts.map +1 -0
- package/dist/misc/switch.js +8 -0
- package/dist/misc/tabs.js +8 -34
- package/dist/misc/textarea.js +2 -25
- package/dist/misc/tile.js +31 -92
- package/dist/misc/tooltip.js +8 -34
- package/dist/profile/socialLink.d.ts +1 -1
- package/dist/profile/socialLink.d.ts.map +1 -1
- package/dist/profile/socialLink.js +53 -69
- package/dist/utils/permissions.d.ts +7 -0
- package/dist/utils/permissions.d.ts.map +1 -0
- package/dist/utils/permissions.js +38 -0
- package/package.json +8 -5
|
@@ -1,56 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
14
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
15
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
16
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
17
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
18
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
19
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
20
|
-
});
|
|
21
|
-
};
|
|
22
|
-
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
23
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
|
|
24
|
-
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
25
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
26
|
-
function step(op) {
|
|
27
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
28
|
-
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
29
|
-
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
30
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
31
|
-
switch (op[0]) {
|
|
32
|
-
case 0: case 1: t = op; break;
|
|
33
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
34
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
35
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
36
|
-
default:
|
|
37
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
38
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
39
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
40
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
41
|
-
if (t[2]) _.ops.pop();
|
|
42
|
-
_.trys.pop(); continue;
|
|
43
|
-
}
|
|
44
|
-
op = body.call(thisArg, _);
|
|
45
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
46
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
50
3
|
import { Popover, PopoverContent, PopoverTrigger } from "@radix-ui/react-popover";
|
|
51
|
-
import { toggleAllNotification, toggleNotification } from "@myrjfa/state/dist/lib/actions";
|
|
4
|
+
import { getNotifications, toggleAllNotification, toggleNotification } from "@myrjfa/state/dist/lib/actions";
|
|
52
5
|
import { formatTimestamp } from "@myrjfa/state/dist/lib/utils";
|
|
53
|
-
import { Bell } from "lucide-react";
|
|
6
|
+
import { Bell, MessageCircle, CheckCircle2, Receipt, Users, AlertCircle, Megaphone, Briefcase, ShieldCheck, ShieldX, Package, ClipboardList } from "lucide-react";
|
|
54
7
|
import { useRouter } from "next/navigation";
|
|
55
8
|
import { useEffect, useState } from "react";
|
|
56
9
|
import { FaSpinner } from "react-icons/fa6";
|
|
@@ -59,89 +12,100 @@ import { Button } from "./button";
|
|
|
59
12
|
import { Card, CardHeader, CardTitle } from "./card";
|
|
60
13
|
import { ScrollArea } from "./scroll-area";
|
|
61
14
|
import { MobileNavItem } from "../header/mobile-nav-item";
|
|
62
|
-
|
|
63
|
-
|
|
15
|
+
const NOTIF_LIMIT_FOR_BELL = 10;
|
|
16
|
+
const getNotificationIcon = (notif) => {
|
|
17
|
+
const type = notif.type || "general";
|
|
64
18
|
switch (type) {
|
|
65
|
-
case "
|
|
66
|
-
return _jsx(
|
|
19
|
+
case "new_message":
|
|
20
|
+
return _jsx(MessageCircle, { className: "w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" });
|
|
21
|
+
case "milestone_completed":
|
|
22
|
+
return _jsx(CheckCircle2, { className: "w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" });
|
|
23
|
+
case "expense_added":
|
|
24
|
+
return _jsx(Receipt, { className: "w-4 h-4 text-orange-500 mt-0.5 flex-shrink-0" });
|
|
25
|
+
case "group_invite":
|
|
26
|
+
return _jsx(Users, { className: "w-4 h-4 text-purple-500 mt-0.5 flex-shrink-0" });
|
|
27
|
+
case "mention":
|
|
28
|
+
return _jsx(Megaphone, { className: "w-4 h-4 text-yellow-500 mt-0.5 flex-shrink-0" });
|
|
29
|
+
case "application_received":
|
|
30
|
+
case "application_status":
|
|
31
|
+
case "application_shortlisted":
|
|
32
|
+
return _jsx(Briefcase, { className: "w-4 h-4 text-indigo-500 mt-0.5 flex-shrink-0" });
|
|
33
|
+
case "id_verified":
|
|
34
|
+
return _jsx(ShieldCheck, { className: "w-4 h-4 text-emerald-500 mt-0.5 flex-shrink-0" });
|
|
35
|
+
case "id_rejected":
|
|
36
|
+
return _jsx(ShieldX, { className: "w-4 h-4 text-red-500 mt-0.5 flex-shrink-0" });
|
|
37
|
+
case "package_enquiry":
|
|
38
|
+
return _jsx(Package, { className: "w-4 h-4 text-cyan-500 mt-0.5 flex-shrink-0" });
|
|
39
|
+
case "opportunity_assigned":
|
|
40
|
+
return _jsx(ClipboardList, { className: "w-4 h-4 text-amber-500 mt-0.5 flex-shrink-0" });
|
|
41
|
+
case "system":
|
|
42
|
+
return _jsx(AlertCircle, { className: "w-4 h-4 text-gray-500 mt-0.5 flex-shrink-0" });
|
|
67
43
|
default:
|
|
68
|
-
return _jsx("div", { className:
|
|
44
|
+
return _jsx("div", { className: `w-2.5 h-2.5 rounded-full mt-1.5 flex-shrink-0 ${!notif.read ? "bg-blue-500" : "bg-gray-300"}` });
|
|
69
45
|
}
|
|
70
46
|
};
|
|
71
|
-
export function NotificationBell(
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
return [2 /*return*/];
|
|
84
|
-
});
|
|
85
|
-
}); };
|
|
86
|
-
fetchData();
|
|
87
|
-
}, [id]);
|
|
88
|
-
var handleMarkAllNotifRead = function () { return __awaiter(_this, void 0, void 0, function () {
|
|
89
|
-
var response;
|
|
90
|
-
return __generator(this, function (_a) {
|
|
91
|
-
switch (_a.label) {
|
|
92
|
-
case 0: return [4 /*yield*/, toggleAllNotification(true)];
|
|
93
|
-
case 1:
|
|
94
|
-
response = _a.sent();
|
|
95
|
-
if (!(response === null || response === void 0 ? void 0 : response.error)) return [3 /*break*/, 3];
|
|
96
|
-
return [4 /*yield*/, showAlert(response.error)];
|
|
97
|
-
case 2:
|
|
98
|
-
_a.sent();
|
|
99
|
-
return [3 /*break*/, 4];
|
|
100
|
-
case 3:
|
|
101
|
-
setNotifs(notifs.map(function (notif) { return (__assign(__assign({}, notif), { read: true })); }));
|
|
102
|
-
setUnreadCount(0);
|
|
103
|
-
console.log("marked");
|
|
104
|
-
_a.label = 4;
|
|
105
|
-
case 4: return [2 /*return*/];
|
|
47
|
+
export function NotificationBell({ navItemColor }) {
|
|
48
|
+
const [notifs, setNotifs] = useState([]);
|
|
49
|
+
const [unreadCount, setUnreadCount] = useState(0);
|
|
50
|
+
const [loadingNotifId, setLoadingNotifId] = useState(null);
|
|
51
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
52
|
+
const router = useRouter();
|
|
53
|
+
const fetchData = async () => {
|
|
54
|
+
try {
|
|
55
|
+
const response = await getNotifications(NOTIF_LIMIT_FOR_BELL);
|
|
56
|
+
if (response && !response.error) {
|
|
57
|
+
setNotifs(response.notifs || []);
|
|
58
|
+
setUnreadCount(response.unreadCount || 0);
|
|
106
59
|
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
60
|
+
}
|
|
61
|
+
catch (err) {
|
|
62
|
+
console.error("Failed to fetch notifications:", err);
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
// Re-fetch when popover opens
|
|
66
|
+
useEffect(() => {
|
|
67
|
+
if (isOpen)
|
|
68
|
+
fetchData();
|
|
69
|
+
}, [isOpen]);
|
|
70
|
+
const handleMarkAllNotifRead = async () => {
|
|
71
|
+
const response = await toggleAllNotification(true);
|
|
72
|
+
if (response === null || response === void 0 ? void 0 : response.error) {
|
|
73
|
+
await showAlert(response.error);
|
|
74
|
+
}
|
|
75
|
+
else {
|
|
76
|
+
setNotifs(notifs.map((notif) => ({
|
|
77
|
+
...notif, read: true
|
|
78
|
+
})));
|
|
79
|
+
setUnreadCount(0);
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
const handleNotifClick = async (notif) => {
|
|
83
|
+
if (loadingNotifId)
|
|
84
|
+
return;
|
|
85
|
+
if (!notif.read) {
|
|
86
|
+
setLoadingNotifId(notif._id);
|
|
87
|
+
const response = await toggleNotification(notif._id, true);
|
|
88
|
+
if (response === null || response === void 0 ? void 0 : response.error) {
|
|
89
|
+
await showAlert(response.error);
|
|
137
90
|
}
|
|
138
|
-
|
|
139
|
-
|
|
91
|
+
else {
|
|
92
|
+
setNotifs(notifs.map((n) => n._id === notif._id ? { ...n, read: true } : n));
|
|
93
|
+
setUnreadCount(Math.max(0, unreadCount - 1));
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
setLoadingNotifId(null);
|
|
97
|
+
// Navigate to the link or URL
|
|
98
|
+
const url = notif.link;
|
|
99
|
+
if (url) {
|
|
100
|
+
setIsOpen(false);
|
|
101
|
+
router.push(url);
|
|
102
|
+
}
|
|
103
|
+
};
|
|
140
104
|
if (notifs == null)
|
|
141
|
-
return _jsx(FaSpinner, {});
|
|
142
|
-
return _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className:
|
|
143
|
-
|
|
144
|
-
|
|
105
|
+
return _jsx(FaSpinner, { className: "animate-spin" });
|
|
106
|
+
return _jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className: `relative cursor-pointer ${navItemColor} transition-colors`, "aria-label": "Notification Bell", children: [_jsx(Bell, { className: "h-5 w-5" }), unreadCount > 0 && (_jsx("span", { className: "absolute -top-1.5 -right-1.5 flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-bold text-white animate-pulse", children: unreadCount > 99 ? "99+" : unreadCount }))] }) }), _jsx(PopoverContent, { className: "w-96 p-0 mt-3 bg-white dark:bg-gray-900 rounded-xl shadow-xl border border-gray-100 dark:border-gray-800", align: "end", sideOffset: 5, children: _jsxs(Card, { className: "border-0 shadow-none bg-transparent", children: [_jsx(CardHeader, { className: "px-5 pb-2", children: _jsxs("div", { className: "flex justify-between items-center", children: [_jsx(CardTitle, { className: "text-base font-semibold", children: "Notifications" }), notifs.length > 0 && unreadCount > 0 && (_jsx(Button, { variant: "ghost", size: "sm", className: "text-xs text-teal-600 hover:text-teal-800 dark:text-teal-400", onClick: handleMarkAllNotifRead, children: "Mark all as read" }))] }) }), _jsx(ScrollArea, { className: "h-80 w-full", children: _jsx("div", { className: "px-2 pb-2", children: notifs.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-gray-400", children: [_jsx(Bell, { className: "w-10 h-10 mb-3 opacity-30" }), _jsx("p", { className: "text-sm", children: "You're all caught up \uD83C\uDF89" })] })) : (notifs.map((notif) => (_jsxs("div", { className: `flex items-start gap-3 p-3 rounded-lg cursor-pointer transition-all duration-200 hover:bg-gray-50 dark:hover:bg-gray-800/50 ${!notif.read
|
|
107
|
+
? "bg-teal-50/50 dark:bg-teal-900/10 border-l-2 border-teal-500"
|
|
108
|
+
: "border-l-2 border-transparent"} ${loadingNotifId === notif._id ? "opacity-50 pointer-events-none" : ""}`, onClick: () => handleNotifClick(notif), children: [_jsx("div", { className: "flex-shrink-0 mt-0.5", children: getNotificationIcon(notif) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: `text-sm leading-snug ${!notif.read ? "font-medium text-gray-900 dark:text-white" : "text-gray-600 dark:text-gray-400"}`, children: notif.message }), _jsxs("div", { className: "flex items-center gap-2 mt-1", children: [_jsx("p", { className: "text-[11px] text-gray-400", children: notif.timestamp ? formatTimestamp(notif.timestamp) : "" }), notif.type && notif.type !== "general" && (_jsx("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400", children: notif.type.replace(/_/g, " ") }))] })] }), !notif.read && (_jsx("div", { className: "flex-shrink-0 mt-2", children: _jsx("div", { className: "w-2 h-2 rounded-full bg-teal-500" }) }))] }, notif._id)))) }) }), notifs.length > NOTIF_LIMIT_FOR_BELL && (_jsx("div", { className: "px-3 py-2 border-t border-gray-100 dark:border-gray-800", children: _jsx(Button, { variant: "ghost", className: "w-full text-teal-600 hover:text-teal-800 hover:bg-teal-50 dark:text-teal-400 dark:hover:bg-teal-900/20 text-sm", onClick: () => { setIsOpen(false); router.push("/inbox"); }, children: "View all notifications" }) }))] }) })] });
|
|
145
109
|
}
|
|
146
110
|
export function MobileNotificationBell() {
|
|
147
111
|
return (_jsx(MobileNavItem, { icon: _jsx("div", { className: "relative", children: _jsx(Bell, { className: "h-5 w-5" }) }), label: "Notifications", href: "/inbox" }));
|
package/dist/misc/pagination.js
CHANGED
|
@@ -1,59 +1,30 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
2
|
import { cn } from "@myrjfa/state/dist/lib/utils";
|
|
25
3
|
import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon, } from "lucide-react";
|
|
26
4
|
import Link from "next/link";
|
|
27
5
|
import { buttonVariants } from "./button";
|
|
28
|
-
function Pagination(
|
|
29
|
-
|
|
30
|
-
return (_jsx("nav", __assign({ role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: cn("mx-auto flex w-full justify-center", className) }, props)));
|
|
6
|
+
function Pagination({ className, ...props }) {
|
|
7
|
+
return (_jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: cn("mx-auto flex w-full justify-center", className), ...props }));
|
|
31
8
|
}
|
|
32
|
-
function PaginationContent(
|
|
33
|
-
|
|
34
|
-
return (_jsx("ul", __assign({ "data-slot": "pagination-content", className: cn("flex flex-row items-center gap-1", className) }, props)));
|
|
9
|
+
function PaginationContent({ className, ...props }) {
|
|
10
|
+
return (_jsx("ul", { "data-slot": "pagination-content", className: cn("flex flex-row items-center gap-1", className), ...props }));
|
|
35
11
|
}
|
|
36
|
-
function PaginationItem(
|
|
37
|
-
|
|
38
|
-
return _jsx("li", __assign({ "data-slot": "pagination-item" }, props));
|
|
12
|
+
function PaginationItem({ ...props }) {
|
|
13
|
+
return _jsx("li", { "data-slot": "pagination-item", ...props });
|
|
39
14
|
}
|
|
40
|
-
function PaginationLink(
|
|
41
|
-
|
|
42
|
-
return (_jsx(Link, __assign({ "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, className: cn(buttonVariants({
|
|
15
|
+
function PaginationLink({ className, isActive, size = "icon", ...props }) {
|
|
16
|
+
return (_jsx(Link, { "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, className: cn(buttonVariants({
|
|
43
17
|
variant: isActive ? "outline" : "ghost",
|
|
44
|
-
size
|
|
45
|
-
}), className)
|
|
18
|
+
size,
|
|
19
|
+
}), className), ...props }));
|
|
46
20
|
}
|
|
47
|
-
function PaginationPrevious(
|
|
48
|
-
|
|
49
|
-
return (_jsxs(PaginationLink, __assign({ "aria-label": "Go to previous page", size: "default", className: cn("gap-1 px-2.5 sm:pl-2.5", className) }, props, { children: [_jsx(ChevronLeftIcon, {}), _jsx("span", { className: "hidden sm:block", children: "Previous" })] })));
|
|
21
|
+
function PaginationPrevious({ className, ...props }) {
|
|
22
|
+
return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn("gap-1 px-2.5 sm:pl-2.5", className), ...props, children: [_jsx(ChevronLeftIcon, {}), _jsx("span", { className: "hidden sm:block", children: "Previous" })] }));
|
|
50
23
|
}
|
|
51
|
-
function PaginationNext(
|
|
52
|
-
|
|
53
|
-
return (_jsxs(PaginationLink, __assign({ "aria-label": "Go to next page", size: "default", className: cn("gap-1 px-2.5 sm:pr-2.5", className) }, props, { children: [_jsx("span", { className: "hidden sm:block", children: "Next" }), _jsx(ChevronRightIcon, {})] })));
|
|
24
|
+
function PaginationNext({ className, ...props }) {
|
|
25
|
+
return (_jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn("gap-1 px-2.5 sm:pr-2.5", className), ...props, children: [_jsx("span", { className: "hidden sm:block", children: "Next" }), _jsx(ChevronRightIcon, {})] }));
|
|
54
26
|
}
|
|
55
|
-
function PaginationEllipsis(
|
|
56
|
-
|
|
57
|
-
return (_jsxs("span", __assign({ "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("flex size-9 items-center justify-center", className) }, props, { children: [_jsx(MoreHorizontalIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "More pages" })] })));
|
|
27
|
+
function PaginationEllipsis({ className, ...props }) {
|
|
28
|
+
return (_jsxs("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("flex size-9 items-center justify-center", className), ...props, children: [_jsx(MoreHorizontalIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "More pages" })] }));
|
|
58
29
|
}
|
|
59
30
|
export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, };
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { EyeIcon, EyeOffIcon } from 'lucide-react';
|
|
3
3
|
import { Button } from './button';
|
|
4
|
-
export default function PasswordEye(
|
|
5
|
-
|
|
6
|
-
return (_jsx(Button, { type: 'button', variant: "ghost", onMouseDown: function () { return setShowPassword(function (prev) { return !prev; }); }, onTouchStart: function () { return setShowPassword(function (prev) { return !prev; }); }, onTouchEnd: function () { return setShowPassword(function (prev) { return !prev; }); }, className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500", children: showPassword ? _jsx(EyeOffIcon, {}) : _jsx(EyeIcon, {}) }));
|
|
4
|
+
export default function PasswordEye({ showPassword, setShowPassword }) {
|
|
5
|
+
return (_jsx(Button, { type: 'button', variant: "ghost", onMouseDown: () => setShowPassword(prev => !prev), onTouchStart: () => setShowPassword(prev => !prev), onTouchEnd: () => setShowPassword(prev => !prev), className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500", children: showPassword ? _jsx(EyeOffIcon, {}) : _jsx(EyeIcon, {}) }));
|
|
7
6
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/misc/popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAI3D,iBAAS,OAAO,CAAC,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAEpD;AAED,iBAAS,cAAc,CAAC,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAEvD;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAgB,EAChB,UAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/misc/popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAI3D,iBAAS,OAAO,CAAC,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAEpD;AAED,iBAAS,cAAc,CAAC,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAEvD;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAgB,EAChB,UAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAgBvD;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,MAAM,CAAC,2CAEtD;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,CAAA"}
|
package/dist/misc/popover.js
CHANGED
|
@@ -1,43 +1,17 @@
|
|
|
1
1
|
"use client";
|
|
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 __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
25
3
|
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
26
4
|
import { cn } from "@myrjfa/state/dist/lib/utils";
|
|
27
|
-
function Popover(
|
|
28
|
-
|
|
29
|
-
return _jsx(PopoverPrimitive.Root, __assign({ "data-slot": "popover" }, props));
|
|
5
|
+
function Popover({ ...props }) {
|
|
6
|
+
return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
|
|
30
7
|
}
|
|
31
|
-
function PopoverTrigger(
|
|
32
|
-
|
|
33
|
-
return _jsx(PopoverPrimitive.Trigger, __assign({ "data-slot": "popover-trigger" }, props));
|
|
8
|
+
function PopoverTrigger({ ...props }) {
|
|
9
|
+
return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
|
|
34
10
|
}
|
|
35
|
-
function PopoverContent(
|
|
36
|
-
|
|
37
|
-
return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, __assign({ "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-full min-w-[12rem] rounded-md border p-4 shadow-md outline-hidden", className) }, props)) }));
|
|
11
|
+
function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
|
|
12
|
+
return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[310] w-full min-w-[12rem] rounded-md border p-4 shadow-md outline-hidden touch-pan-y overflow-y-auto pointer-events-auto", className), onWheel: (e) => e.stopPropagation(), ...props }) }));
|
|
38
13
|
}
|
|
39
|
-
function PopoverAnchor(
|
|
40
|
-
|
|
41
|
-
return _jsx(PopoverPrimitive.Anchor, __assign({ "data-slot": "popover-anchor" }, props));
|
|
14
|
+
function PopoverAnchor({ ...props }) {
|
|
15
|
+
return _jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
|
|
42
16
|
}
|
|
43
17
|
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
|
package/dist/misc/progress.js
CHANGED
|
@@ -1,31 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
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 __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
25
3
|
import * as ProgressPrimitive from "@radix-ui/react-progress";
|
|
26
4
|
import { cn } from "@myrjfa/state/dist/lib/utils";
|
|
27
|
-
function Progress(
|
|
28
|
-
|
|
29
|
-
return (_jsx(ProgressPrimitive.Root, __assign({ "data-slot": "progress", className: cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className) }, props, { children: _jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: "bg-primary h-full w-full flex-1 transition-all", style: { transform: "translateX(-".concat(100 - (value || 0), "%)") } }) })));
|
|
5
|
+
function Progress({ className, value, ...props }) {
|
|
6
|
+
return (_jsx(ProgressPrimitive.Root, { "data-slot": "progress", className: cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className), ...props, children: _jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: "bg-primary h-full w-full flex-1 transition-all", style: { transform: `translateX(-${100 - (value || 0)}%)` } }) }));
|
|
30
7
|
}
|
|
31
8
|
export { Progress };
|
package/dist/misc/scroll-area.js
CHANGED
|
@@ -1,37 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
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 __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
25
3
|
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
|
|
26
4
|
import { cn } from "@myrjfa/state/dist/lib/utils";
|
|
27
|
-
function ScrollArea(
|
|
28
|
-
|
|
29
|
-
return (_jsxs(ScrollAreaPrimitive.Root, __assign({ "data-slot": "scroll-area", className: cn("relative", className) }, props, { children: [_jsx(ScrollAreaPrimitive.Viewport, { "data-slot": "scroll-area-viewport", className: "ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] })));
|
|
5
|
+
function ScrollArea({ className, children, ...props }) {
|
|
6
|
+
return (_jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", className: cn("relative", className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { "data-slot": "scroll-area-viewport", className: "ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] }));
|
|
30
7
|
}
|
|
31
|
-
function ScrollBar(
|
|
32
|
-
|
|
33
|
-
return (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, __assign({ "data-slot": "scroll-area-scrollbar", orientation: orientation, className: cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" &&
|
|
8
|
+
function ScrollBar({ className, orientation = "vertical", ...props }) {
|
|
9
|
+
return (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { "data-slot": "scroll-area-scrollbar", orientation: orientation, className: cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" &&
|
|
34
10
|
"h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" &&
|
|
35
|
-
"h-2.5 flex-col border-t border-t-transparent", className)
|
|
11
|
+
"h-2.5 flex-col border-t border-t-transparent", className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { "data-slot": "scroll-area-thumb", className: "bg-border relative flex-1 rounded-full" }) }));
|
|
36
12
|
}
|
|
37
13
|
export { ScrollArea, ScrollBar };
|
package/dist/misc/searchBar.js
CHANGED
|
@@ -4,39 +4,36 @@ import { Search } from "lucide-react";
|
|
|
4
4
|
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
|
5
5
|
import { Suspense, useEffect, useRef, useState } from "react";
|
|
6
6
|
import { Button } from "./button";
|
|
7
|
-
function SearchBarComponent(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var inputRef = useRef(null);
|
|
7
|
+
function SearchBarComponent({ titles }) {
|
|
8
|
+
const searchParams = useSearchParams();
|
|
9
|
+
const pathname = usePathname();
|
|
10
|
+
const router = useRouter();
|
|
11
|
+
const inputRef = useRef(null);
|
|
13
12
|
// State for search input and suggestions
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
useEffect(
|
|
19
|
-
|
|
13
|
+
const [searchQuery, setSearchQuery] = useState("");
|
|
14
|
+
const [showSuggestions, setShowSuggestions] = useState(false);
|
|
15
|
+
const [suggestions, setSuggestions] = useState([]);
|
|
16
|
+
const [highlightedIndex, setHighlightedIndex] = useState(-1);
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
const query = searchParams.get("query") || "";
|
|
20
19
|
setSearchQuery(query);
|
|
21
20
|
}, [searchParams]);
|
|
22
21
|
// Update suggestions when search query changes
|
|
23
|
-
useEffect(
|
|
22
|
+
useEffect(() => {
|
|
24
23
|
if (searchQuery.trim() === "") {
|
|
25
24
|
setSuggestions([]);
|
|
26
25
|
setHighlightedIndex(-1);
|
|
27
26
|
return;
|
|
28
27
|
}
|
|
29
|
-
|
|
30
|
-
.filter(
|
|
31
|
-
return title.toLowerCase().includes(searchQuery.toLowerCase());
|
|
32
|
-
})
|
|
28
|
+
const filtered = titles
|
|
29
|
+
.filter(title => title.toLowerCase().includes(searchQuery.toLowerCase()))
|
|
33
30
|
.slice(0, 5); // Limit to top 5 suggestions
|
|
34
31
|
setSuggestions(filtered);
|
|
35
32
|
setHighlightedIndex(-1);
|
|
36
33
|
}, [searchQuery, titles]);
|
|
37
34
|
// Execute search by updating URL params
|
|
38
|
-
|
|
39
|
-
|
|
35
|
+
const executeSearch = () => {
|
|
36
|
+
const newParams = new URLSearchParams(searchParams);
|
|
40
37
|
// Reset to first page when searching
|
|
41
38
|
newParams.set("page", "1");
|
|
42
39
|
if (searchQuery.trim() !== "") {
|
|
@@ -45,24 +42,24 @@ function SearchBarComponent(_a) {
|
|
|
45
42
|
else {
|
|
46
43
|
newParams.delete("query");
|
|
47
44
|
}
|
|
48
|
-
router.push(
|
|
45
|
+
router.push(`${pathname}?${newParams.toString()}`);
|
|
49
46
|
setShowSuggestions(false);
|
|
50
47
|
};
|
|
51
|
-
|
|
48
|
+
const handleKeyDown = (e) => {
|
|
52
49
|
if (e.key === "ArrowDown") {
|
|
53
50
|
e.preventDefault();
|
|
54
51
|
setShowSuggestions(true);
|
|
55
|
-
setHighlightedIndex(
|
|
52
|
+
setHighlightedIndex((prev) => (prev + 1) % suggestions.length);
|
|
56
53
|
}
|
|
57
54
|
else if (e.key === "ArrowUp") {
|
|
58
55
|
e.preventDefault();
|
|
59
56
|
setShowSuggestions(true);
|
|
60
|
-
setHighlightedIndex(
|
|
57
|
+
setHighlightedIndex((prev) => (prev - 1 + suggestions.length) % suggestions.length);
|
|
61
58
|
}
|
|
62
59
|
else if (e.key === "Enter") {
|
|
63
60
|
e.preventDefault();
|
|
64
61
|
if (highlightedIndex >= 0 && suggestions[highlightedIndex]) {
|
|
65
|
-
|
|
62
|
+
const selectedSuggestion = suggestions[highlightedIndex];
|
|
66
63
|
setSearchQuery(selectedSuggestion);
|
|
67
64
|
setHighlightedIndex(0);
|
|
68
65
|
}
|
|
@@ -73,21 +70,20 @@ function SearchBarComponent(_a) {
|
|
|
73
70
|
}
|
|
74
71
|
};
|
|
75
72
|
// Select a suggestion
|
|
76
|
-
|
|
73
|
+
const handleSuggestionClick = (suggestion) => {
|
|
77
74
|
var _a;
|
|
78
75
|
setSearchQuery(suggestion);
|
|
79
76
|
setShowSuggestions(false);
|
|
80
77
|
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
81
78
|
};
|
|
82
|
-
return (_jsx("div", { className: "relative w-4/5 mx-auto bg-background shadow-md rounded-full px-4 py-2 md:max-w-5xl z-11", children: _jsxs("div", { className: "flex items-center", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx("input", { ref: inputRef, type: "text", placeholder: "Search...", value: searchQuery, onChange:
|
|
79
|
+
return (_jsx("div", { className: "relative w-4/5 mx-auto bg-background shadow-md rounded-full px-4 py-2 md:max-w-5xl z-11", children: _jsxs("div", { className: "flex items-center", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx("input", { ref: inputRef, type: "text", placeholder: "Search...", value: searchQuery, onChange: (e) => {
|
|
83
80
|
setSearchQuery(e.target.value);
|
|
84
81
|
setShowSuggestions(true);
|
|
85
|
-
}, onKeyDown: handleKeyDown, onFocus:
|
|
82
|
+
}, onKeyDown: handleKeyDown, onFocus: () => setShowSuggestions(searchQuery.trim() !== ""), onBlur: () => {
|
|
86
83
|
// Delay hiding suggestions to allow clicking on them
|
|
87
|
-
setTimeout(
|
|
88
|
-
}, className: "w-full bg-transparent border-none outline-none py-2 px-3 text-gray-700" }), showSuggestions && suggestions.length > 0 && (_jsx("div", { className: "absolute top-full left-0 w-full mt-1 bg-white rounded-md shadow-lg z-15 max-h-60 overflow-y-auto", children: suggestions.map(
|
|
84
|
+
setTimeout(() => setShowSuggestions(false), 150);
|
|
85
|
+
}, className: "w-full bg-transparent border-none outline-none py-2 px-3 text-gray-700" }), showSuggestions && suggestions.length > 0 && (_jsx("div", { className: "absolute top-full left-0 w-full mt-1 bg-white rounded-md shadow-lg z-15 max-h-60 overflow-y-auto", children: suggestions.map((suggestion, index) => (_jsx("div", { className: `px-4 py-2 text-sm cursor-pointer ${index === highlightedIndex ? 'bg-muted' : 'text-gray-700 hover:bg-muted'}`, onMouseDown: (e) => e.preventDefault(), onClick: () => handleSuggestionClick(suggestion), children: suggestion }, index))) }))] }), _jsx(Button, { variant: "default", onClick: executeSearch, className: "ml-4 w-10 h-10 rounded-full flex items-center justify-center cursor-pointer", children: _jsx(Search, { size: 18 }) })] }) }));
|
|
89
86
|
}
|
|
90
|
-
export default function SearchBar(
|
|
91
|
-
var titles = _a.titles;
|
|
87
|
+
export default function SearchBar({ titles }) {
|
|
92
88
|
return (_jsx(Suspense, { fallback: _jsx("div", { className: "w-full h-screen flex items-center justify-center", children: "Loading..." }), children: _jsx(SearchBarComponent, { titles: titles }) }));
|
|
93
89
|
}
|