function MainComponent() { const [weatherData, setWeatherData] = React.useState([]); React.useEffect(()=>{ async function fetchData() { const data = await fetch('/api/satellite/weather').then((response)=>response.json()); setWeatherData(data); } fetchData(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#E3F2FD] min-h-screen p-8", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl font-bold mb-6 text-[#121212]", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, "Weather Satellite Dashboard"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, weatherData.map((data, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl font-semibold mb-2 text-[#121212]", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, data.stationName), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#121212]", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 20, columnNumber: 45 }, __self: this }, "ID:"), " ", data.id), /*#__PURE__*/ React.createElement("p", { className: "text-[#121212]", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 21, columnNumber: 45 }, __self: this }, "Temperature:"), " ", data.temperature, "°C"), /*#__PURE__*/ React.createElement("p", { className: "text-[#121212]", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 22, columnNumber: 45 }, __self: this }, "Humidity:"), " ", data.humidity, "%"), /*#__PURE__*/ React.createElement("p", { className: "text-[#121212]", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 23, columnNumber: 45 }, __self: this }, "Wind Speed:"), " ", data.windSpeed, " km/h"))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } `), /*#__PURE__*/ React.createElement("style", { jsx: true, __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, ` .weather-card { animation: fadeIn 1s ease-in-out; } `)); }