xerexjs
Version:
A simple notification system for NextJS/ReactJS with real-time capabilities
22 lines (21 loc) • 3.44 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("convex/react");
const api_1 = require("../../convex/_generated/api");
const popover_1 = require("./ui/popover");
const lucide_react_1 = require("lucide-react");
const react_2 = require("react");
const PopoverExample = ({ align = "center", userID }) => {
const notifications = (0, react_1.useQuery)(api_1.api.notification.getAllNotifications, { userId: userID });
// Debugging: Log notifications when they change
(0, react_2.useEffect)(() => {
console.log("Notifications updated:", notifications);
}, [notifications]);
return ((0, jsx_runtime_1.jsxs)(popover_1.Popover, { children: [(0, jsx_runtime_1.jsxs)(popover_1.PopoverTrigger, { className: "p-2 rounded-full bg-blue-100 relative hover:bg-blue-200 transition", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Bell, { className: "w-6 h-6 text-gray-700" }), notifications && notifications.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "absolute -top-1 -right-1 bg-red-500 text-white text-[10px] w-5 h-5 rounded-full flex items-center justify-center shadow-md", children: notifications.length > 9 ? "9+" : notifications.length }))] }), (0, jsx_runtime_1.jsxs)(popover_1.PopoverContent, { align: align, className: "w-[400px] bg-white shadow-xl rounded-2xl p-4 flex flex-col border border-gray-200", children: [notifications === undefined && (0, jsx_runtime_1.jsx)("p", { className: "text-gray-500 text-center", children: "Loading..." }), notifications && notifications.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "max-h-[330px] overflow-y-auto flex flex-col gap-3 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100", children: notifications.map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-50 hover:bg-gray-100 shadow-md rounded-xl p-4 transition duration-300 flex flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-md text-gray-800 flex-1", children: item.content }), (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 18, className: "text-gray-400 hover:text-red-500 cursor-pointer transition", onClick: () => {
// You can add a dismissal function here that calls a mutation
// e.g. api.notification.dismissNotification({ notificationId: item._id, userId: userID })
} })] }), item.buttonText && ((0, jsx_runtime_1.jsx)("a", { href: item.buttonUrl, className: "mt-1 text-gray-800 bg-blue-200 hover:bg-blue-300 px-3 py-1 rounded-md transition w-fit shadow", children: item.buttonText }))] }, item._id))) })) : (notifications && (0, jsx_runtime_1.jsx)("p", { className: "text-gray-500 text-center", children: "No notifications" })), (0, jsx_runtime_1.jsxs)("div", { className: "mt-3 py-2 text-sm text-gray-700 text-center border-t border-gray-200 bg-gradient-to-r from-blue-50/10 to-blue-100 rounded-b-2xl", children: ["Made with", " ", (0, jsx_runtime_1.jsx)("a", { href: "https://github.com/your-xerexjs-repo", className: "underline font-semibold transition", target: "_blank", rel: "noopener noreferrer", children: "XerexJS" })] })] })] }));
};
exports.default = PopoverExample;