function MainComponent() { const [foodTrucks, setFoodTrucks] = React.useState([]); const [loading, setLoading] = React.useState(false); const mapCenter = { lat: 43.0731, lng: -89.4012 }; React.useEffect(()=>{ async function fetchFoodTrucks() { setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: 'Show me where food trucks will be in Madison, Wisconsin in the future and what they are serving' } ] }) }); const data = await response.json(); const parsedData = JSON.parse(data.choices[0].message.content); setFoodTrucks(parsedData); setLoading(false); } fetchFoodTrucks(); }, []); React.useEffect(()=>{ if (!loading && window.google) { const map = new window.google.maps.Map(document.getElementById('map'), { zoom: 12, center: mapCenter }); foodTrucks.forEach((truck)=>{ new window.google.maps.Marker({ position: { lat: truck.coords.lat, lng: truck.coords.lng }, map, title: truck.name }); }); } }, [ loading, foodTrucks ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-[#f7f7f7] min-h-screen", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto mt-10 mb-6", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, "Madison, WI Food Trucks"), loading ? /*#__PURE__*/ React.createElement("div", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Loading...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px]", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, foodTrucks.map((truck, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white shadow-lg rounded-lg p-6 mb-6", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, truck.name), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto mt-2", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt text-[#ff5733]", __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }), " ", truck.location), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto mt-2", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calendar-alt text-[#42a5f5]", __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }), " ", truck.date), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold font-roboto mt-4", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, "Menu"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5 mt-2 font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, truck.menu.map((item, idx)=>/*#__PURE__*/ React.createElement("li", { key: idx, className: "text-lg", __source: { fileName: "", lineNumber: 69, columnNumber: 21 }, __self: this }, item)))))), /*#__PURE__*/ React.createElement("div", { id: "map", className: "w-full max-w-[600px] h-[400px] mt-6", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, ` #map { height: 100%; } `)); }