function SeeHowItFitsButton({ onClick }) { return /*#__PURE__*/ React.createElement("button", { type: "button", className: "mt-6 w-full bg-green-500 text-white font-semibold py-2 px-4 rounded-md hover:bg-green-700 transition-colors duration-300", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "See How It Fits"); } function SeeHowItFitsButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SeeHowItFitsButton, { onClick: ()=>alert("Button clicked"), __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function MainComponent() { const [profile, setProfile] = React.useState(null); const [shirtUrl, setShirtUrl] = React.useState(''); const [userImage, setUserImage] = React.useState(''); const handleProfileSubmit = (event)=>{ event.preventDefault(); const height = event.target.height.value; const chest = event.target.chest.value; const waist = event.target.waist.value; const hips = event.target.hips.value; setProfile({ height, chest, waist, hips }); }; const handleShirtSubmit = (event)=>{ event.preventDefault(); const url = event.target.shirtUrl.value; setShirtUrl(url); }; const handleImageUpload = (event)=>{ const file = event.target.files[0]; const reader = new FileReader(); reader.onloadend = ()=>{ setUserImage(reader.result); }; if (file) { reader.readAsDataURL(file); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mt-4", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, "Virtual Fitting Room"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-md bg-white p-6 rounded-lg shadow-md mt-6", onSubmit: handleProfileSubmit, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Enter Your Body Measurements"), /*#__PURE__*/ React.createElement("label", { className: "block mt-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Height (cm)"), /*#__PURE__*/ React.createElement("input", { name: "height", type: "number", className: "mt-1 block w-full border-gray-300 rounded-md shadow-sm", placeholder: "Enter your height", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "block mt-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Chest (cm)"), /*#__PURE__*/ React.createElement("input", { name: "chest", type: "number", className: "mt-1 block w-full border-gray-300 rounded-md shadow-sm", placeholder: "Enter your chest size", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "block mt-4", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Waist (cm)"), /*#__PURE__*/ React.createElement("input", { name: "waist", type: "number", className: "mt-1 block w-full border-gray-300 rounded-md shadow-sm", placeholder: "Enter your waist size", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "block mt-4", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "Hips (cm)"), /*#__PURE__*/ React.createElement("input", { name: "hips", type: "number", className: "mt-1 block w-full border-gray-300 rounded-md shadow-sm", placeholder: "Enter your hips size", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-6 w-full bg-blue-500 text-white font-semibold py-2 px-4 rounded-md hover:bg-blue-700 transition-colors duration-300", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, "Create Profile")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white p-6 rounded-lg shadow-md mt-6", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, "Upload Your Image"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", className: "mt-4", onChange: handleImageUpload, __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white p-6 rounded-lg shadow-md mt-6", __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, "Select a Shirt"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleShirtSubmit, __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mt-4", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, "Shirt URL"), /*#__PURE__*/ React.createElement("input", { name: "shirtUrl", type: "text", className: "mt-1 block w-full border-gray-300 rounded-md shadow-sm", placeholder: "Enter the shirt image URL", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement(SeeHowItFitsButton, { onClick: handleShirtSubmit, __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }))), profile && shirtUrl && userImage && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white p-6 rounded-lg shadow-md mt-6", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, "Profile"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, "Height: ", profile.height, " cm"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this }, "Chest: ", profile.chest, " cm"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, "Waist: ", profile.waist, " cm"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, "Hips: ", profile.hips, " cm"), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mt-4", __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, "Virtual Fitting Room Preview"), /*#__PURE__*/ React.createElement("div", { className: "relative w-[200px] h-[400px] mt-4 mx-auto", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: userImage, alt: "User", className: "absolute w-full h-full object-cover", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: shirtUrl, alt: "Selected shirt", className: "absolute w-full h-full object-cover opacity-75", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this })))); }