sticky-horse
Version:
With StickyHorse allow your users to send feedback to your team.
101 lines (100 loc) • 9.08 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.ActiveUsersTable = void 0;
var react_1 = __importStar(require("react"));
var ActiveUsersTable = function (_a) {
var users = _a.users, currentUserId = _a.currentUserId, onTrackUser = _a.onTrackUser, trackedUserId = _a.trackedUserId, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, _c = _a.isDemoMode, isDemoMode = _c === void 0 ? false : _c, currentPage = _a.currentPage, setCurrentPage = _a.setCurrentPage;
var itemsPerPage = 5;
var currentTableData = (0, react_1.useMemo)(function () {
var firstPageIndex = (currentPage - 1) * itemsPerPage;
var lastPageIndex = firstPageIndex + itemsPerPage;
return users.slice(firstPageIndex, lastPageIndex);
}, [currentPage, users]);
var totalPages = Math.ceil(users.length / itemsPerPage);
return (react_1.default.createElement("div", { className: "relative" },
isDemoMode && (react_1.default.createElement("div", { className: "absolute -top-56 left-0 right-0 text-center text-lg text-indigo-600 font-medium z-10" }, "Demo Mode Active")),
react_1.default.createElement("div", { className: "w-full bg-white/50 backdrop-blur-lg rounded-2xl p-6 shadow-xl" },
react_1.default.createElement("div", { className: "flex items-center justify-between mb-6" },
react_1.default.createElement("div", { className: "flex items-center gap-3" },
react_1.default.createElement("div", { className: "bg-purple-100 p-2 rounded-lg" },
react_1.default.createElement("svg", { className: "w-5 h-5 text-purple-600", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
react_1.default.createElement("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
react_1.default.createElement("circle", { cx: "9", cy: "7", r: "4" }),
react_1.default.createElement("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }),
react_1.default.createElement("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" }))),
react_1.default.createElement("div", null,
react_1.default.createElement("h2", { className: "text-xl font-semibold text-gray-800" }, "Active Users"),
react_1.default.createElement("p", { className: "text-sm text-gray-500" },
users.length === 0 ? 0 : users.length - 1,
" ",
users.length === 1 ? 'user' : 'users',
" online")))),
react_1.default.createElement("div", { className: "overflow-hidden rounded-xl border border-gray-200" },
react_1.default.createElement("table", { className: "min-w-full divide-y divide-gray-200" },
react_1.default.createElement("thead", { className: "bg-gray-50" },
react_1.default.createElement("tr", null,
react_1.default.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" }, "Status"),
react_1.default.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" }, "Location"),
react_1.default.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" }, "Connected Since"),
react_1.default.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" }, "Actions"))),
!isLoading && (react_1.default.createElement("tbody", { className: "bg-white divide-y divide-gray-200" }, currentTableData
.sort(function (a, b) { return (a.userId === currentUserId ? -1 : b.userId === currentUserId ? 1 : 0); })
.map(function (user) {
var _a, _b, _c;
return (react_1.default.createElement("tr", { key: user.userId, className: "".concat(user.userId === currentUserId ? "bg-blue-100" : "hover:bg-gray-50", " transition-colors") },
react_1.default.createElement("td", { className: "px-6 py-4 whitespace-nowrap" },
react_1.default.createElement("div", { className: "flex items-center" },
react_1.default.createElement("div", { className: "relative" },
react_1.default.createElement("div", { className: "w-3 h-3 bg-green-400 rounded-full" }),
react_1.default.createElement("div", { className: "absolute top-0 left-0 w-3 h-3 bg-green-400 rounded-full animate-ping" })),
react_1.default.createElement("span", { className: "ml-2 text-sm text-gray-500" }, user.userId === currentUserId ? "You" : "Online"))),
react_1.default.createElement("td", { className: "px-6 py-4 whitespace-nowrap" },
react_1.default.createElement("div", { className: "flex items-center gap-2" },
((_a = user.location) === null || _a === void 0 ? void 0 : _a.flag) && (react_1.default.createElement("img", { src: user.location.flag, alt: "flag", width: 20, height: 20 })),
react_1.default.createElement("div", { className: "flex flex-col" },
react_1.default.createElement("span", { className: "text-sm font-medium text-gray-900" }, ((_b = user.location) === null || _b === void 0 ? void 0 : _b.country) || "Unknown"),
((_c = user.location) === null || _c === void 0 ? void 0 : _c.city) && (react_1.default.createElement("span", { className: "text-xs text-gray-500" }, user.location.city))))),
react_1.default.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500" }, user === null || user === void 0 ? void 0 : user.connectionTime),
react_1.default.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm" }, user.userId !== currentUserId && (react_1.default.createElement("button", { onClick: function () { return onTrackUser(user.userId); }, className: "\n px-4 py-2 rounded-lg font-medium transition-all\n ".concat(trackedUserId === user.userId
? 'bg-red-500 hover:bg-red-600 text-white'
: 'bg-indigo-500 hover:bg-indigo-700 text-white', "\n shadow-lg hover:shadow-xl\n ") }, trackedUserId === user.userId ? 'Stop Tracking' : 'Track User')))));
}))))),
users.length > itemsPerPage && (react_1.default.createElement("div", { className: "flex justify-center mt-4" },
react_1.default.createElement("nav", { className: "flex items-center gap-2" }, Array.from({ length: totalPages }, function (_, i) { return i + 1; }).map(function (page) { return (react_1.default.createElement("button", { key: page, onClick: function () { return setCurrentPage(page); }, className: "px-3 py-1 rounded ".concat(currentPage === page
? 'bg-indigo-500 text-white'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200') }, page)); })))))));
};
exports.ActiveUsersTable = ActiveUsersTable;