function MainComponent() { const [menu, setMenu] = React.useState('〇〇〇'); const [restaurant, setRestaurant] = React.useState('〇〇〇'); const [recipes, setRecipes] = React.useState({ beginner: '', intermediate: '', advanced: '' }); const [recommendedRestaurants, setRecommendedRestaurants] = React.useState([]); const [loading, setLoading] = React.useState(false); const fetchRecipesAndRestaurants = async ()=>{ setLoading(true); const messages = [ { role: "user", content: "レシピはクックパッドからもってきて表示させたいです。レストランには現在の位置情報から近いレストランの評価が50件以上のレストランで上位5位のものを表示させてください。" } ]; const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages }) }); const data = await response.json(); const apiResponse = data.choices[0].message.content; const parsedResponse = JSON.parse(apiResponse); setRecipes({ beginner: parsedResponse.recipes.beginner, intermediate: parsedResponse.recipes.intermediate, advanced: parsedResponse.recipes.advanced }); setRecommendedRestaurants(parsedResponse.restaurants); setLoading(false); }; const handleButtonClick = ()=>{ const menus = [ 'カレー', 'ラーメン', '寿司', 'うどん', '天ぷら' ]; const randomMenu = menus[Math.floor(Math.random() * menus.length)]; setMenu(randomMenu); fetchRecipesAndRestaurants(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-cover bg-center font-sans text-white p-4", style: { backgroundImage: "url('/images/appetizing-food-background.jpg')" }, __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-extrabold mb-8 drop-shadow-lg", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, "今日の晩御飯ガチャ"), /*#__PURE__*/ React.createElement("button", { onClick: handleButtonClick, className: "bg-gradient-to-r from-blue-500 to-purple-700 hover:from-purple-700 hover:to-blue-500 text-white font-bold py-3 px-6 rounded-full shadow-2xl transition duration-300 ease-in-out transform hover:scale-110", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, loading ? '読み込み中...' : 'ガチャを回す'), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg bg-white text-black shadow-2xl rounded-2xl px-10 pt-8 pb-10 mt-10 text-lg", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "メニュー"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "今日の晩御飯は... ", /*#__PURE__*/ React.createElement("span", { className: "font-bold text-2xl", __source: { fileName: "", lineNumber: 52, columnNumber: 25 }, __self: this }, menu))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "レシピ"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-6 space-y-3", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, "初心者向け: "), /*#__PURE__*/ React.createElement("a", { href: recipes.beginner, className: "text-blue-500 underline", __source: { fileName: "", lineNumber: 57, columnNumber: 63 }, __self: this }, recipes.beginner)), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, "中級者向け: "), /*#__PURE__*/ React.createElement("a", { href: recipes.intermediate, className: "text-blue-500 underline", __source: { fileName: "", lineNumber: 58, columnNumber: 63 }, __self: this }, recipes.intermediate)), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, "上級者向け: "), /*#__PURE__*/ React.createElement("a", { href: recipes.advanced, className: "text-blue-500 underline", __source: { fileName: "", lineNumber: 59, columnNumber: 63 }, __self: this }, recipes.advanced)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "おすすめ店"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-6 space-y-3", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, recommendedRestaurants.map((name, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "font-bold text-2xl", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, name))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, ` button:hover { animation: bounce 1s; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } `)); }