function MainComponent() { const [loading, setLoading] = React.useState(false); const [recipes, setRecipes] = React.useState([]); const chefMessage = { role: "user", content: "Hello, I'm a home chef looking to sell my recipes." }; React.useEffect(()=>{ async function fetchRecipes() { setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ chefMessage ], system_prompt: 'Show me recipes' }) }); const data = await response.json(); if (data.choices && data.choices[0].message) { const recipes = JSON.parse(data.choices[0].message.content); setRecipes(recipes); } } catch (error) { console.error("Error fetching recipes:", error); } finally{ setLoading(false); } } fetchRecipes(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "w-full flex flex-col items-center font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full bg-[#f8f8f8] p-6 shadow-md", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Home Chef Recipe Marketplace"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between w-full", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Sign Up"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Dashboard"))), /*#__PURE__*/ React.createElement("div", { className: "w-full flex flex-wrap justify-center mt-8", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "text-lg font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Loading...") : recipes.map((recipe, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-[300px] p-4 m-4 bg-white shadow-lg", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: recipe.image, alt: recipe.name, className: "w-full h-[200px] object-cover mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, recipe.name), /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-2", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "$", recipe.price.toFixed(2)), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, "Chef Profit: 85% ($", (recipe.price * 0.85).toFixed(2), ")"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, "Marketplace Split: 15% ($", (recipe.price * 0.15).toFixed(2), ")"))))); }