function MainComponent() { const [formData, setFormData] = React.useState({ name: "", age: "", interests: "" }); const [matches, setMatches] = React.useState([]); const handleChange = (event)=>{ const { name, value } = event.target; setFormData((prevState)=>({ ...prevState, [name]: value })); }; const handleSubmit = async (event)=>{ event.preventDefault(); try { const response = await fetch('https://api.example.com/matches', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) }); if (!response.ok) { throw new Error('Network response was not ok'); } const data = await response.json(); setMatches(data.matches); } catch (error) { console.error('There was a problem with your fetch operation:', error); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-pink-300", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white mb-8", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, "🌹 Find Your Perfect Match 🌹"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-sm p-8 bg-white rounded-lg shadow-md", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Your Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "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: 44, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "age", className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Your Age"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "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: 50, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "interests", className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Your Interests"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "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: 56, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "試合を探す"))), /*#__PURE__*/ React.createElement("div", { className: "mt-10 w-full max-w-md", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, matches.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-gray-800 py-4 px-6", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Your Matches"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, matches.map((match)=>/*#__PURE__*/ React.createElement("li", { key: match.id, className: "border-b border-gray-300 py-2 px-4 text-gray-600 flex justify-between items-center", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }, match.name, ", ", match.age), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this }, match.interests.join(", ")))))))); }