sticky-horse
Version:
With StickyHorse allow your users to send feedback to your team.
21 lines (20 loc) • 1.62 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CommentDisplay = void 0;
var react_1 = __importDefault(require("react"));
var CommentDisplay = function (_a) {
var comments = _a.comments, onRemove = _a.onRemove;
return (react_1.default.createElement("div", { className: "fixed top-20 right-4 w-64 max-h-[70vh] overflow-y-auto bg-white rounded-lg shadow-lg z-40" },
react_1.default.createElement("div", { className: "p-4" },
react_1.default.createElement("h3", { className: "text-lg font-semibold mb-4" }, "Comments"),
comments.length === 0 ? (react_1.default.createElement("p", { className: "text-gray-500" }, "No comments yet")) : (react_1.default.createElement("div", { className: "space-y-4" }, comments.map(function (comment) { return (react_1.default.createElement("div", { key: comment.id, className: "bg-gray-50 p-3 rounded-lg relative group" },
react_1.default.createElement("button", { onClick: function () { return onRemove(comment.id); }, className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 text-red-500 hover:text-red-700" }, "\u00D7"),
react_1.default.createElement("p", { className: "text-sm text-gray-600 mb-1" },
"From: ",
comment.fromUserId),
react_1.default.createElement("p", { className: "text-gray-800" }, comment.comment))); }))))));
};
exports.CommentDisplay = CommentDisplay;