function MainComponent() { const [image, setImage] = React.useState(null); const [stickers, setStickers] = React.useState([]); const handleImageChange = (event)=>{ const file = event.target.files[0]; const reader = new FileReader(); reader.onloadend = ()=>{ setImage(reader.result); }; reader.readAsDataURL(file); }; const addSticker = (sticker)=>{ setStickers((prevStickers)=>[ ...prevStickers, sticker ]); }; const handleSendImage = ()=>{ // Code to send image and stickers to friend would go here }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#fafafa] p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "upload-button", className: "cursor-pointer bg-[#007bff] text-white font-roboto py-2 px-4 rounded", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Upload Image"), /*#__PURE__*/ React.createElement("input", { id: "upload-button", type: "file", name: "image-upload", className: "hidden", accept: "image/*", onChange: handleImageChange, __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }))), image && /*#__PURE__*/ React.createElement("div", { className: "relative mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: "Base for stickers to be added", className: "max-w-xs max-h-[500px] object-contain", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }), stickers.map((sticker, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: sticker.src, alt: `Sticker ${index + 1}`, className: "absolute", style: sticker.style, __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, [ "🐱", "🐶", "🦄" ].map((emoji, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: "text-2xl", onClick: ()=>addSticker({ src: `sticker-${index + 1}.png`, style: { left: '50%', top: '50%' } }), __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, emoji))), /*#__PURE__*/ React.createElement("button", { className: "bg-[#28a745] text-white font-roboto py-2 px-4 rounded", onClick: handleSendImage, __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, "Send to Friend")); }