function MainComponent() { const [profile, setProfile] = React.useState({ nome: "", bio: "", fotoPerfil: "", imagens: [] }); const [selectedProfileImage, setSelectedProfileImage] = React.useState(null); const [selectedConcertImage, setSelectedConcertImage] = React.useState(null); function handleProfileImageChange(event) { setSelectedProfileImage(event.target.files[0]); } function handleConcertImageChange(event) { setSelectedConcertImage(event.target.files[0]); } function handleInputChange(event) { setProfile({ ...profile, [event.target.name]: event.target.value }); } function handleSubmit(event) { event.preventDefault(); const imagesToLoad = []; if (selectedProfileImage) { imagesToLoad.push({ file: selectedProfileImage, key: 'fotoPerfil' }); } if (selectedConcertImage) { imagesToLoad.push({ file: selectedConcertImage, key: 'imagens', multiple: true }); } imagesToLoad.forEach(({ file, key, multiple })=>{ const reader = new FileReader(); reader.onload = (e)=>{ setProfile((prevProfile)=>({ ...prevProfile, [key]: multiple ? [ ...prevProfile[key], e.target.result ] : e.target.result })); if (key === 'fotoPerfil') { setSelectedProfileImage(null); } if (key === 'imagens') { setSelectedConcertImage(null); } }; reader.readAsDataURL(file); }); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-6 bg-gray-900", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl p-8 space-y-6 bg-white rounded-2xl shadow-lg", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "Memórias de Shows"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "fotoPerfil", className: "block mb-2 text-sm font-semibold font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Foto do Perfil"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "fotoPerfil", accept: "image/*", className: "w-full p-2 border rounded mt-1 file:bg-violet-500 file:font-semibold file:rounded file:px-4 file:text-white", onChange: handleProfileImageChange, lang: "pt-br", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }), profile.fotoPerfil && /*#__PURE__*/ React.createElement("img", { src: profile.fotoPerfil, alt: "Foto do perfil", className: "w-24 h-24 mt-2 rounded-full", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "nome", className: "block mb-2 text-sm font-semibold font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Nome"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "nome", className: "w-full p-2 border rounded mt-1", value: profile.nome, onChange: handleInputChange, __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "bio", className: "block mb-2 text-sm font-semibold font-roboto", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "Biografia"), /*#__PURE__*/ React.createElement("textarea", { name: "bio", className: "w-full p-2 border rounded mt-1", value: profile.bio, onChange: handleInputChange, __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "concertImage", className: "block mb-2 text-sm font-semibold font-roboto", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "Imagem do Show"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "concertImage", accept: "image/*", className: "w-full p-2 border rounded mt-1 file:bg-violet-500 file:font-semibold file:rounded file:px-4 file:text-white", onChange: handleConcertImageChange, lang: "pt-br", multiple: true, __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full md:w-auto px-10 py-3 text-center text-white bg-blue-500 rounded hover:bg-blue-600 font-semibold font-roboto", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "Salvar"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3 mt-6", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, profile.imagens.map((imagem, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border rounded", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imagem, alt: `Memória do show ${index + 1}`, className: "object-cover w-full h-48", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this })))))); }