function MainComponent() { const [dressImage, setDressImage] = React.useState(''); const handleSubmit = (e)=>{ e.preventDefault(); const formData = new FormData(e.target); const data = { occasion: formData.get('occasion'), size: formData.get('size'), color: formData.get('color') }; if (data.occasion && data.size && data.color) { setDressImage('/assets/dress-image.jpg'); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-5", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-5 font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, "Find Your Perfect Dress"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-md bg-[#f9f9f9] p-5 rounded-lg shadow-md", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-2 font-roboto", htmlFor: "occasion", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "Occasion"), /*#__PURE__*/ React.createElement("input", { name: "occasion", className: "w-full px-3 py-2 border rounded", type: "text", id: "occasion", placeholder: "e.g. Wedding, Party", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-2 font-roboto", htmlFor: "size", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Size"), /*#__PURE__*/ React.createElement("input", { name: "size", className: "w-full px-3 py-2 border rounded", type: "text", id: "size", placeholder: "e.g. S, M, L", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-2 font-roboto", htmlFor: "color", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Color"), /*#__PURE__*/ React.createElement("input", { name: "color", className: "w-full px-3 py-2 border rounded", type: "text", id: "color", placeholder: "e.g. Red, Blue, Black", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#010101] text-white py-2 px-4 rounded font-roboto hover:bg-[#121212]", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "Find Dress")), dressImage && /*#__PURE__*/ React.createElement("div", { className: "mt-5", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: dressImage, alt: "Perfect dress for the customer", className: "w-[300px] h-[400px] object-cover rounded shadow-md", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }))); }