function GameLogButton({ onClick, isSelected }) { const buttonClass = `px-4 py-2 ${isSelected ? 'bg-blue-500 text-white' : 'bg-gray-200 text-black'} rounded focus:outline-none`; return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: buttonClass, __source: { fileName: "", lineNumber: 4, columnNumber: 5 }, __self: this }, "Game Log"); } function GameLogButtonStory() { const [currentPage, setCurrentPage] = React.useState('home'); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GameLogButton, { onClick: ()=>setCurrentPage('log'), isSelected: currentPage === 'log', __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function MainComponent() { const [currentPage, setCurrentPage] = React.useState('home'); const [games, setGames] = React.useState([ { game: "Example Game 1", date: "2022-12-01", stadium: "Example Stadium 1", highlights: "Example highlights here." }, { game: "Example Game 2", date: "2023-01-15", stadium: "Example Stadium 2", highlights: "Example highlights here." } ]); const [form, setForm] = React.useState({ game: "", date: "", stadium: "", highlights: "" }); const [news, setNews] = React.useState(''); const [image, setImage] = React.useState(''); const [loading, setLoading] = React.useState(false); const handleChange = (e)=>{ setForm({ ...form, [e.target.name]: e.target.value }); }; const handleSubmit = (e)=>{ e.preventDefault(); setGames([ ...games, form ]); setForm({ game: "", date: "", stadium: "", highlights: "" }); }; const fetchNews = async ()=>{ 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: 'Give me the latest football news' } ], system_prompt: 'Summarize the content' }) }); const data = await response.json(); setNews(data.choices[0].message.content); } catch (error) { setNews('Failed to fetch news'); } setLoading(false); }; const fetchImage = async ()=>{ try { const response = await fetch('/integrations/dall-e-3/?prompt=football+game'); const data = await response.json(); setImage(data.data[0]); } catch (error) { setImage(''); } }; React.useEffect(()=>{ fetchNews(); fetchImage(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[600px] mx-auto bg-white p-6 rounded shadow-md", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-between mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage('home'), className: `px-4 py-2 ${currentPage === 'home' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-black'} rounded focus:outline-none`, __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement(GameLogButton, { onClick: ()=>setCurrentPage('log'), isSelected: currentPage === 'log', __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this })), currentPage === 'home' && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 text-center", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Football News"), /*#__PURE__*/ React.createElement("p", { className: "mb-6 text-center", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Stay updated with the latest football news. Don't forget, you can log the games you have attended in the Game Log section!"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, "Loading news...") : /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, news)), image && /*#__PURE__*/ React.createElement("img", { src: image, alt: "Generated football game", className: "w-full h-[300px] object-cover", __source: { fileName: "", lineNumber: 84, columnNumber: 23 }, __self: this })), currentPage === 'log' && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 text-center", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "Log Your Game"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }, "Game"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "game", value: form.game, 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", placeholder: "Enter the game", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }, "Date"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "date", value: form.date, 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", placeholder: "Enter the date", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 117, columnNumber: 17 }, __self: this }, "Stadium"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "stadium", value: form.stadium, 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", placeholder: "Enter the stadium", __source: { fileName: "", lineNumber: 118, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this }, "Highlights"), /*#__PURE__*/ React.createElement("textarea", { name: "highlights", value: form.highlights, 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", placeholder: "Enter game highlights", __source: { fileName: "", lineNumber: 130, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 140, columnNumber: 17 }, __self: this }, "Add Game"))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 text-center", __source: { fileName: "", lineNumber: 150, columnNumber: 15 }, __self: this }, "Logged Games"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 151, columnNumber: 15 }, __self: this }, games.map((game, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "p-4 bg-gray-100 rounded mb-2 shadow-lg", __source: { fileName: "", lineNumber: 153, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-800", __source: { fileName: "", lineNumber: 154, columnNumber: 21 }, __self: this }, "Game: ", game.game), /*#__PURE__*/ React.createElement("p", { className: "text-gray-800", __source: { fileName: "", lineNumber: 155, columnNumber: 21 }, __self: this }, "Date: ", game.date), /*#__PURE__*/ React.createElement("p", { className: "text-gray-800", __source: { fileName: "", lineNumber: 156, columnNumber: 21 }, __self: this }, "Stadium: ", game.stadium), /*#__PURE__*/ React.createElement("p", { className: "text-gray-800", __source: { fileName: "", lineNumber: 157, columnNumber: 21 }, __self: this }, "Highlights: ", game.highlights)))))))); }