function MainComponent() { const [formData, setFormData] = React.useState({ name: '', age: '', gender: '', location: '', interests: '' }); const handleChange = (e)=>{ const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; const handleSubmit = (e)=>{ e.preventDefault(); // Submit form logic }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-[#f7f0e9]", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-lg p-10 bg-white shadow rounded-lg", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-3xl text-center mb-10 text-[#3d2c29]", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "Amish Singles Meet"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-[#3d2c29] font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", id: "name", value: formData.name, onChange: handleChange, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "age", className: "block text-[#3d2c29] font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Age"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "age", id: "age", value: formData.age, onChange: handleChange, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "gender", className: "block text-[#3d2c29] font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Gender"), /*#__PURE__*/ React.createElement("select", { name: "gender", id: "gender", value: formData.gender, onChange: handleChange, className: "shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Select Gender"), /*#__PURE__*/ React.createElement("option", { value: "male", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "Male"), /*#__PURE__*/ React.createElement("option", { value: "female", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Female"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "location", className: "block text-[#3d2c29] font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Location"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "location", id: "location", value: formData.location, onChange: handleChange, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "interests", className: "block text-[#3d2c29] font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Interests"), /*#__PURE__*/ React.createElement("textarea", { name: "interests", id: "interests", value: formData.interests, onChange: handleChange, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#b6a19e] hover:bg-[#9e8b89] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "Find Match")))); }