function MainComponent() { const [photo, setPhoto] = React.useState(null); const handlePhotoUpload = (event)=>{ const file = event.target.files[0]; const reader = new FileReader(); reader.onloadend = ()=>{ setPhoto(reader.result); }; if (file) { reader.readAsDataURL(file); } }; return /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text bg-[#f5f5f5] flex flex-col items-center min-h-screen p-4", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-[#012169] text-white p-4 text-center text-lg font-bold", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, "Sabrina Carpenter as a Disney Princess"), /*#__PURE__*/ React.createElement("main", { className: "flex flex-1 flex-col lg:flex-row lg:justify-start items-center lg:items-start w-full max-w-[1200px] mt-6", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "w-full lg:w-1/2 p-4 flex flex-col items-center", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full bg-white rounded-lg shadow-md p-4 flex flex-col items-center", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#012169] text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "Upload Your Photo"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "photo-upload", className: "w-full border border-gray-300 p-2 mb-4", accept: "image/*", onChange: handlePhotoUpload, __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }), photo ? /*#__PURE__*/ React.createElement("img", { src: photo, alt: "User uploaded as a princess", className: "w-[300px] h-[300px] object-cover rounded-full mb-4 border-4 border-[#012169]", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement("img", { src: "relative/path/to/placeholder-image.jpg", alt: "User uploaded photo placeholder", className: "w-[300px] h-[300px] object-cover rounded-full mb-4 border-4 border-[#012169]", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#68a0cf] text-white p-2 rounded w-full", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Upload"))), /*#__PURE__*/ React.createElement("section", { className: "w-full lg:w-1/2 p-4 flex flex-col items-center mt-6 lg:mt-0", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full bg-white rounded-lg shadow-md p-4 flex flex-col items-center border-4 border-[#012169]", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#012169] text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "Choose Products"), /*#__PURE__*/ React.createElement("div", { className: "w-full grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, [ 'Lipstick', 'Eyeshadow', 'Blush', 'Foundation' ].map((product, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `relative/path/to/${product.toLowerCase()}-image.jpg`, alt: `${product} product aesthetic`, className: "w-[100px] h-[100px] object-cover rounded-full mb-2 border-2 border-[#68a0cf]", __source: { fileName: "", lineNumber: 37, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#012169] text-sm", __source: { fileName: "", lineNumber: 38, columnNumber: 19 }, __self: this }, product)))))))); }