function MainComponent() { const [profilePicture, setProfilePicture] = React.useState(''); const handleProfilePictureChange = (event)=>{ const file = event.target.files[0]; if (file && file.type.substr(0, 5) === "image") { setProfilePicture(URL.createObjectURL(file)); } }; const profileImage = profilePicture ? /*#__PURE__*/ React.createElement("img", { src: profilePicture, alt: "Uploaded profile picture", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex justify-center items-center text-[#34b4eb]", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user fa-5x", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); const idCard = /*#__PURE__*/ React.createElement("div", { className: "max-w-sm mx-auto my-8 bg-white p-6 space-y-4 rounded shadow", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-24 h-24 overflow-hidden rounded-full border-2 border-[#34b4eb]", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, profileImage), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-[#34b4eb] text-white py-2 px-4 rounded cursor-pointer", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "profile-picture-upload", className: "cursor-pointer", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Upload", /*#__PURE__*/ React.createElement("input", { type: "file", id: "profile-picture-upload", name: "profile_picture", className: "hidden", onChange: handleProfilePictureChange, accept: "image/*", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl text-center text-[#121212]", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Your Name"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-center text-[#666]", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Short description about you goes here"))); return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center min-h-screen bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, idCard); }