function MainComponent() { const [formState, setFormState] = React.useState({ purpose: 'business' }); const handleChange = (event)=>{ const { name, value } = event.target; setFormState((prev)=>({ ...prev, [name]: value })); }; const handleSubmit = (event)=>{ event.preventDefault(); // Form submission logic here }; const purposeSelection = /*#__PURE__*/ React.createElement("select", { name: "purpose", value: formState.purpose, onChange: handleChange, className: "block w-full mt-1 bg-white border border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "business", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, "Business"), /*#__PURE__*/ React.createElement("option", { value: "love", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, "Love")); return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-[#f3f4f6]", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-lg p-8 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-5", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "purpose", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "I want to connect for"), purposeSelection), /*#__PURE__*/ React.createElement("div", { className: "mb-5", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Your Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", required: true, placeholder: "John Doe", className: "mt-1 block w-full bg-white border border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-5", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Email Address"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", required: true, placeholder: "john@example.com", className: "mt-1 block w-full bg-white border border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Connect Now 🦒"))); }