function MainComponent() { const [comments, setComments] = React.useState([ { id: 1, user: "Alice", text: "Hello everyone!" }, { id: 2, user: "Bob", text: "Hi Alice!" } ]); const [showForm, setShowForm] = React.useState(false); const [newComment, setNewComment] = React.useState(""); const participants = [ { id: 1, name: "Alice", avatar: "/avatars/alice.png" }, { id: 2, name: "Bob", avatar: "/avatars/bob.png" }, { id: 3, name: "Charlie", avatar: "/avatars/charlie.png" } ]; const participantIcons = participants.map((participant)=>/*#__PURE__*/ React.createElement("img", { key: participant.id, src: participant.avatar, alt: `Avatar of ${participant.name}`, className: "w-10 h-10 rounded-full", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this })); const handleCommentChange = (e)=>{ setNewComment(e.target.value); }; const handleCommentSubmit = (e)=>{ e.preventDefault(); const newId = comments.length ? comments[comments.length - 1].id + 1 : 1; setComments([ ...comments, { id: newId, user: "You", text: newComment } ]); setNewComment(""); }; const commentList = comments.map((comment)=>/*#__PURE__*/ React.createElement("div", { key: comment.id, className: "mt-2 bg-blue-200 text-blue-900 p-2 rounded-lg w-[250px] self-end", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto font-semibold", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, comment.user), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, comment.text))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-between h-screen p-4 bg-cover bg-center font-roboto", style: { backgroundImage: "url('/background.jpg')" }, __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-between items-center", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, participantIcons), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowForm(!showForm), className: "bg-blue-500 text-white p-2 rounded-md", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-hand-paper", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-start space-y-2 mt-4 w-full overflow-y-auto h-full", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, commentList), showForm && /*#__PURE__*/ React.createElement("form", { onSubmit: handleCommentSubmit, className: "flex w-full mt-auto", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newComment, onChange: handleCommentChange, name: "newComment", className: "p-2 border rounded-lg mb-2 w-[250px] flex-grow", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-green-500 text-white rounded-lg", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Submit"))); }