function MainComponent() { const [imageURL, setImageURL] = React.useState(''); const [comment, setComment] = React.useState(''); const [annotations, setAnnotations] = React.useState([]); const [comments, setComments] = React.useState([ { text: 'Great picture!', user: 'User1' }, { text: 'Needs more detail on the left side.', user: 'User2' } ]); const handleImageUpload = (e)=>{ const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = ()=>{ setImageURL(reader.result); }; reader.readAsDataURL(file); } }; const handleAnnotation = ()=>{ setAnnotations([ ...annotations, comment ]); setComment(''); }; const handleCommentChange = (e)=>setComment(e.target.value); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto text-center mb-8", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "Upload and Annotate Pictures"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-white p-4 rounded shadow-md", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", htmlFor: "file-upload", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Upload Picture"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 text-sm leading-tight font-roboto text-gray-700 border rounded focus:outline-none focus:shadow-outline", id: "file-upload", name: "file-upload", type: "file", accept: "image/*", onChange: handleImageUpload, __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", className: "mt-4 bg-blue-500 text-white font-roboto px-4 py-2 rounded focus:outline-none focus:shadow-outline hover:bg-blue-700", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Upload")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, imageURL && /*#__PURE__*/ React.createElement("img", { className: "w-full h-[300px] object-cover mb-2", src: imageURL, alt: "Uploaded content", __source: { fileName: "", lineNumber: 47, columnNumber: 24 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { className: "w-full px-3 py-2 font-roboto text-sm text-gray-700 border rounded focus:outline-none focus:shadow-outline", rows: "4", placeholder: "Write your comment here", value: comment, onChange: handleCommentChange, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-2", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white font-roboto px-4 py-2 rounded focus:outline-none focus:shadow-outline hover:bg-green-700", onClick: handleAnnotation, __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Annotate"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Comments"), annotations.map((annotation, index)=>/*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-3 rounded mb-2", key: index, __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto mb-2", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, annotation), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "- Annotated"))), comments.map((comment, index)=>/*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-3 rounded mb-2", key: index, __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto mb-2", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, comment.text), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, "- ", comment.user)))))); }