function MainComponent() { const [activeTab, setActiveTab] = React.useState('home'); const [contentData, setContentData] = React.useState({}); const handleTabChange = (tab)=>{ setActiveTab(tab); if (!contentData[tab]) { fetch(`https://api.openai.com/v1/engines/chatgpt/completions`, { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer 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` }, body: JSON.stringify({ prompt: `Generate a trivia question and answer about ${tab}:`, max_tokens: 2000 }) }).then((response)=>response.json()).then((data)=>setContentData((prevState)=>({ ...prevState, [tab]: data.choices[0].text }))); } }; let content; switch(activeTab){ case 'politics': case 'media': case 'money': case 'lifestyle': case 'movies and TV shows': case 'sports': case 'religion': content = /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-serif text-[#5b5b5b]", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Trivia & Questions - ", activeTab), /*#__PURE__*/ React.createElement("div", { className: "my-4 bg-white shadow overflow-hidden sm:rounded-lg", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-5 sm:px-6", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg leading-6 font-medium text-gray-900", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "Trivia Question"), /*#__PURE__*/ React.createElement("p", { className: "mt-1 max-w-2xl text-sm text-gray-500", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, activeTab, " related question.")), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-200", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("dl", { __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("dt", { className: "text-sm font-medium text-gray-500", __source: { fileName: "", lineNumber: 46, columnNumber: 19 }, __self: this }, "Question"), /*#__PURE__*/ React.createElement("dd", { className: "mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, contentData[activeTab] || 'Loading question...')))))); break; case 'login': content = /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xs m-auto mt-10", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "username", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "username", type: "text", placeholder: "Username", name: "username", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "password", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { 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: "password", type: "password", placeholder: "******************", name: "password", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "Sign In")))); break; case 'account': content = /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xs m-auto mt-10", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-gray-900", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "Your account details"))); break; default: content = /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-serif text-[#5b5b5b] mb-4", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, "Welcome to AI Blogging"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full h-40 p-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-blue-500", placeholder: "Introduce yourself...", name: "introduction", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this })); break; } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f5efdc]", __source: { fileName: "", lineNumber: 119, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-[#333333] text-white", __source: { fileName: "", lineNumber: 120, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-2 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative flex items-center justify-between h-16", __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex items-center justify-center sm:items-stretch sm:justify-start", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0 flex items-center", __source: { fileName: "", lineNumber: 124, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "block lg:hidden h-8 w-auto", src: "/logo.png", alt: "Newspaper-themed blog logo for smaller screens", __source: { fileName: "", lineNumber: 125, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("img", { className: "hidden lg:block h-8 w-auto", src: "/logo.png", alt: "Newspaper-themed blog logo for larger screens", __source: { fileName: "", lineNumber: 130, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "hidden sm:block sm:ml-6", __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }, [ 'home', 'politics', 'media', 'money', 'lifestyle', 'movies and TV shows', 'sports', 'religion', 'login', 'account' ].map((tab)=>/*#__PURE__*/ React.createElement("a", { key: tab, href: "#", className: `${activeTab === tab ? 'bg-gray-900' : 'text-gray-300'} px-3 py-2 rounded-md text-sm font-medium`, onClick: ()=>handleTabChange(tab), __source: { fileName: "", lineNumber: 150, columnNumber: 21 }, __self: this }, tab.charAt(0).toUpperCase() + tab.slice(1))))))))), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 166, columnNumber: 7 }, __self: this }, content)); }