function MainComponent() { const [name, setName] = React.useState(''); const [interests, setInterests] = React.useState(''); const [matches, setMatches] = React.useState([]); const handleSubmit = (event)=>{ event.preventDefault(); // Simulate an API call to get matches and update state setMatches([ 'Match 1', 'Match 2', 'Match 3' ]); }; return /*#__PURE__*/ React.createElement("div", { className: "px-4 py-6 sm:p-6 md:p-8 lg:p-10 bg-[#f8f9fa] min-h-screen flex flex-col justify-center items-center", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl text-[#343a40] mb-8", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, "Find Your Match"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-md bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "Your Name"), /*#__PURE__*/ React.createElement("input", { value: name, onChange: (e)=>setName(e.target.value), className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "name", type: "text", placeholder: "Name", name: "name", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "interests", className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Interests"), /*#__PURE__*/ React.createElement("input", { value: interests, onChange: (e)=>setInterests(e.target.value), className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline", id: "interests", type: "text", placeholder: "Interests", name: "interests", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#e64980] hover:bg-[#d6336c] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Submit"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, matches.map((match, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 text-gray-700", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, match))))); }