function MainComponent() { const [loading, setLoading] = React.useState(false); const [profilePics, setProfilePics] = React.useState([]); const [messages, setMessages] = React.useState([]); const [userMessage, setUserMessage] = React.useState(""); const [newUser, setNewUser] = React.useState({ email: "", password: "", sns: "" }); const [feedback, setFeedback] = React.useState([]); const handleSignupSubmit = async (e)=>{ e.preventDefault(); setLoading(true); try { // Simulate a signup setTimeout(()=>{ setLoading(false); }, 1000); } catch (error) { setLoading(false); } }; const handleChatSubmit = async (e)=>{ e.preventDefault(); if (!userMessage.trim()) return; setMessages((prev)=>[ ...prev, { role: 'user', content: userMessage } ]); setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: userMessage } ] }) }); const data = await response.json(); if (data.choices && data.choices.length > 0) { setMessages((prev)=>[ ...prev, data.choices[0].message ]); } setLoading(false); setUserMessage(""); } catch (error) { setLoading(false); } }; React.useEffect(()=>{ setProfilePics([ { imgSrc: "/profile1.jpg", name: "太郎", age: "25歳" }, { imgSrc: "/profile2.jpg", name: "花子", age: "23歳" }, { imgSrc: "/profile3.jpg", name: "次郎", age: "27歳" } ]); }, []); const handleFeedbackSubmit = (e)=>{ e.preventDefault(); setFeedback([ ...feedback, userMessage ]); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 min-h-screen flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-white p-4 shadow-md flex justify-between items-center", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold font-sans", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "マッチングアプリ"), /*#__PURE__*/ React.createElement("button", { className: "p-2 rounded-full bg-blue-500 text-white font-sans", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 w-full max-w-4xl mt-4", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "bg-white p-6 rounded-lg shadow-md mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-sans mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "新規ユーザー登録"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSignupSubmit, __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-sans", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, "メールアドレス"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-sans", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, "パスワード"), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 rounded bg-blue-500 text-white font-sans", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, loading ? "登録中..." : "登録")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center font-sans", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "または"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4 mt-4", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-blue-700 text-white rounded", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }), " Facebook"), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-red-500 text-white rounded", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-google", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }), " Google"))), /*#__PURE__*/ React.createElement("section", { className: "bg-white p-6 rounded-lg shadow-md mb-4", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-sans mb-4", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, "プロフィール候補"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, profilePics.map((profile, index)=>/*#__PURE__*/ React.createElement(ProfileCard, { key: index, imgSrc: profile.imgSrc, name: profile.name, age: profile.age, __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("section", { className: "bg-white p-6 rounded-lg shadow-md mb-4", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-sans mb-4", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, "メッセージ"), /*#__PURE__*/ React.createElement("div", { className: "chat-box border rounded p-4 h-72 overflow-y-auto bg-gray-100", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 rounded mb-2 ${msg.role === 'user' ? 'bg-blue-100' : 'bg-green-100'}`, __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this }, msg.content))), /*#__PURE__*/ React.createElement("form", { className: "flex items-center mt-4", onSubmit: handleChatSubmit, __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "flex-1 p-2 border rounded", placeholder: "メッセージを入力", value: userMessage, onChange: (e)=>setUserMessage(e.target.value), __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-blue-500 text-white ml-2 rounded", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }))), loading && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center font-sans", __source: { fileName: "", lineNumber: 129, columnNumber: 23 }, __self: this }, "メッセージ送信中...")), /*#__PURE__*/ React.createElement("section", { className: "bg-white p-6 rounded-lg shadow-md mb-4", __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-sans mb-4", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, "フィードバック"), /*#__PURE__*/ React.createElement("form", { className: "flex items-center mt-4", onSubmit: handleFeedbackSubmit, __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "feedback", className: "flex-1 p-2 border rounded", placeholder: "フィードバックを入力してください...", value: userMessage, onChange: (e)=>setUserMessage(e.target.value), __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-blue-500 text-white ml-2 rounded", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, feedback.map((fb, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-2 rounded mb-2 bg-gray-100", __source: { fileName: "", lineNumber: 149, columnNumber: 15 }, __self: this }, fb))))), /*#__PURE__*/ React.createElement("footer", { className: "w-full bg-white p-4 mt-4 shadow-md text-center font-sans", __source: { fileName: "", lineNumber: 154, columnNumber: 7 }, __self: this }, "© 2023 マッチングアプリ")); } function ProfileCard({ imgSrc, name, age }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-4 rounded-lg flex flex-col items-center", __source: { fileName: "", lineNumber: 163, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imgSrc, alt: `プロフィール画像 ${name}`, className: "w-32 h-32 rounded-full mb-4", __source: { fileName: "", lineNumber: 164, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-sans", __source: { fileName: "", lineNumber: 165, columnNumber: 7 }, __self: this }, name), /*#__PURE__*/ React.createElement("p", { className: "font-sans", __source: { fileName: "", lineNumber: 166, columnNumber: 7 }, __self: this }, age), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 mt-4", __source: { fileName: "", lineNumber: 167, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-green-500 text-white rounded", __source: { fileName: "", lineNumber: 168, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-thumbs-up", __source: { fileName: "", lineNumber: 168, columnNumber: 65 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 169, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment", __source: { fileName: "", lineNumber: 169, columnNumber: 64 }, __self: this })))); }