function MainComponent() { const [image, setImage] = React.useState(''); const handleImageChange = (e)=>{ const file = e.target.files[0]; const reader = new FileReader(); reader.onloadend = ()=>{ setImage(reader.result); }; reader.readAsDataURL(file); }; const handleSubmit = (e)=>{ e.preventDefault(); }; const imagePreview = image ? /*#__PURE__*/ React.createElement("img", { src: image, alt: "Preview", className: "h-[300px] w-full object-contain", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-[300px] w-full bg-[#e0e0e0]", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#808080] font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, "No image selected")); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-white", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-16 bg-[#3ddc84] flex justify-center items-center font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg text-white", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Post a Picture")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow p-4 overflow-auto", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, imagePreview, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", name: "image", onChange: handleImageChange, className: "w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-[#3ddc84] file:text-white hover:file:bg-[#45e8a0]", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#3ddc84] text-white py-2 rounded-md hover:bg-[#45e8a0]", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Post Image"))), /*#__PURE__*/ React.createElement("div", { className: "w-full h-20 bg-[#3ddc84] flex justify-around items-center text-white text-lg", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-image", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-paper-plane", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-bell", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-cog", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }))); }