function MainComponent() { const [weatherData, setWeatherData] = React.useState(null); const [searchResults, setSearchResults] = React.useState([]); const [city, setCity] = React.useState("Nigel, Gauteng, South Africa"); React.useEffect(()=>{ const fetchWeather = async ()=>{ const response = await fetch('/integrations/weather-by-city/weather/Nigel'); const data = await response.json(); setWeatherData(data); }; const fetchSearchResults = async ()=>{ const response = await fetch(`/integrations/google-search/search?q=weather+${city.replace(/ /g, '+')}`); const data = await response.json(); setSearchResults(data.items); }; fetchWeather(); fetchSearchResults(); }, [ city ]); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[url('https://example.com/futuristic-background.jpg')] bg-cover", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center py-8 bg-opacity-90 bg-black", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-white", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "Weather Dashboard: ", city), /*#__PURE__*/ React.createElement("p", { className: "text-md text-gray-400 mt-2", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "Using data from various websites")), /*#__PURE__*/ React.createElement("div", { className: "px-4 md:px-12 lg:px-24 bg-opacity-90 bg-black", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, weatherData && /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-5", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "Current Weather Information"), /*#__PURE__*/ React.createElement("p", { className: "text-[#555]", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, "Wind: ", weatherData.current.wind_dir, " at ", weatherData.current.wind_mph, " mph"), /*#__PURE__*/ React.createElement("p", { className: "text-[#555] mb-2", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, "Humidity: ", weatherData.current.humidity, "%")), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-5", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Related Searches"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, searchResults.map((result)=>/*#__PURE__*/ React.createElement("li", { key: result.link, className: "text-blue-600 hover:text-blue-800 visited:text-purple-600", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: result.link, target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 44, columnNumber: 19 }, __self: this }, result.title))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-5 col-span-3", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-3", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Weather Satellite Image for South Africa"), /*#__PURE__*/ React.createElement("img", { src: "https://example.com/satellite-image-south-africa.jpg", alt: "Live satellite image of South Africa", width: "100%", height: "400", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, ` body { background: url('https://example.com/futuristic-background.jpg') no-repeat center center fixed; background-size: cover; } `)); }

Weather Dashboard: Nigel, Gauteng, South Africa

Related Searches

Weather Satellite Image for South Africa