function MainComponent() { const [previewImage, setPreviewImage] = React.useState(""); const [loading, setLoading] = React.useState(false); const handleImageUpload = async (e)=>{ const files = e.target.files; if (files.length > 0) { const file = files[0]; const reader = new FileReader(); reader.onload = (e)=>{ setPreviewImage(e.target.result); }; reader.readAsDataURL(file); } }; const handleReferenceUpload = async ()=>{ setLoading(true); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-lg text-[#121212] mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Image Studios Transfer"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "upload-image", className: "block mb-2 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 24, columnNumber: 19 }, __self: this }, "Upload image:"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "upload-image", id: "upload-image", className: "block w-full text-sm text-[#121212] file:mr-4 file:py-2 file:px-4 file:border-0 file:text-sm file:font-semibold file:bg-[#f3f4f6] file:text-[#121212] hover:file:bg-[#e2e8f0]", onChange: handleImageUpload, __source: { fileName: "", lineNumber: 25, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "upload-reference", className: "block mb-2 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 28, columnNumber: 19 }, __self: this }, "Upload image référence studios:"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "upload-reference", id: "upload-reference", className: "block w-full text-sm text-[#121212] file:mr-4 file:py-2 file:px-4 file:border-0 file:text-sm file:font-semibold file:bg-[#f3f4f6] file:text-[#121212] hover:file:bg-[#e2e8f0]", onChange: handleReferenceUpload, __source: { fileName: "", lineNumber: 29, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "button", className: "w-full bg-[#007bff] text-white py-2 px-4 rounded hover:bg-[#0056b3] font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, "Upload")), /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-full p-4 border border-[#ccd0d5] rounded", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#121212] mb-2", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "Preview Image:"), loading ? /*#__PURE__*/ React.createElement("p", { className: "text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 35, columnNumber: 26 }, __self: this }, "Loading image...") : /*#__PURE__*/ React.createElement("img", { src: previewImage, alt: "Preview", className: "w-full", __source: { fileName: "", lineNumber: 35, columnNumber: 91 }, __self: this }))); }