function MainComponent() { const [question, setQuestion] = React.useState(''); const [chatGPTResponse, setChatGPTResponse] = React.useState(''); const [claudeResponse, setClaudeResponse] = React.useState(''); const fetchChatGPTResponse = async ()=>{ const response = await fetch("https://api.openai.com/v1/engines/chatgpt/completions", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": "Bearer YOUR_CHATGPT_API_KEY" }, body: JSON.stringify({ prompt: question, max_tokens: 100 }) }); const data = await response.json(); return data.choices[0].text; }; const fetchClaudeResponse = async ()=>{ const response = await fetch("https://api.claude.ai/v1/engines/claude/completions", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": "Bearer YOUR_CLAUDE_API_KEY" }, body: JSON.stringify({ prompt: question, max_tokens: 100 }) }); const data = await response.json(); return data.choices[0].text; }; const handleSubmit = async (e)=>{ e.preventDefault(); if (question.trim() === '') return; const chatGPTRes = await fetchChatGPTResponse(); const claudeRes = await fetchClaudeResponse(); setChatGPTResponse(chatGPTRes); setClaudeResponse(claudeRes); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#333] mb-8", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, "Ask ChatGPT & Claude"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-[800px] flex flex-col gap-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Enter your question here...", className: "form-input px-4 py-2 border rounded-md w-full", name: "question", value: question, onChange: (e)=>setQuestion(e.target.value), __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#007bff] text-white rounded-md px-6 py-2 font-semibold hover:bg-[#0056b3] transition duration-300", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Submit"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-around items-start mt-10 w-full max-w-[800px]", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[48%] bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold text-[#333] mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "ChatGPT"), /*#__PURE__*/ React.createElement("p", { className: "text-[#666]", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, chatGPTResponse)), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[48%] bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold text-[#333] mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Claude"), /*#__PURE__*/ React.createElement("p", { className: "text-[#666]", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, claudeResponse)))); }