function MainComponent() { const [weatherData, setWeatherData] = React.useState(null); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const [city, setCity] = React.useState(""); const [showLocationSelector, setShowLocationSelector] = React.useState(true); const [selectedForecast, setSelectedForecast] = React.useState("today"); const getForecastContent = React.useCallback(()=>{ if (!weatherData || !weatherData.current) return null; const { current, forecast } = weatherData; switch(selectedForecast){ case "today": return { temp: Math.round(current.temp_c), condition: current.condition.text, icon: current.condition.icon, details: [ { label: "Feels like", value: `${Math.round(current.feelslike_c)}°` }, { label: "Rain", value: `${current.precip_mm || 0}mm` }, { label: "Wind", value: `${current.wind_kph} km/h` }, { label: "Rain chance", value: `${forecast?.forecastday?.[0]?.day?.daily_chance_of_rain || 0}%` } ] }; case "tomorrow": if (forecast && forecast.forecastday && forecast.forecastday[1]) { const tomorrowData = forecast.forecastday[1]; return { temp: Math.round(tomorrowData.day.avgtemp_c), condition: tomorrowData.day.condition.text, icon: tomorrowData.day.condition.icon, details: [ { label: "Max temp", value: `${Math.round(tomorrowData.day.maxtemp_c)}°` }, { label: "Min temp", value: `${Math.round(tomorrowData.day.mintemp_c)}°` }, { label: "Rain", value: `${tomorrowData.day.totalprecip_mm || 0}mm` }, { label: "Rain chance", value: `${tomorrowData.day.daily_chance_of_rain}%` } ] }; } return { temp: Math.round(current.temp_c), condition: "Tomorrow forecast unavailable", icon: current.condition.icon, details: [ { label: "Current", value: `${Math.round(current.temp_c)}°` }, { label: "Rain", value: `${current.precip_mm || 0}mm` }, { label: "Wind", value: `${current.wind_kph} km/h` }, { label: "Status", value: "Limited data" } ] }; case "nextrain": if (forecast && forecast.forecastday) { // Find the next day with rain const nextRainDay = forecast.forecastday.find((day)=>day.day.daily_chance_of_rain > 50 || day.day.totalprecip_mm > 0); if (nextRainDay) { const date = new Date(nextRainDay.date); const dayName = date.toLocaleDateString("en-US", { weekday: "long" }); return { temp: Math.round(nextRainDay.day.avgtemp_c), condition: `Rain expected on ${dayName}`, icon: nextRainDay.day.condition.icon, details: [ { label: "Rain chance", value: `${nextRainDay.day.daily_chance_of_rain}%` }, { label: "Rain", value: `${nextRainDay.day.totalprecip_mm}mm` }, { label: "Max temp", value: `${Math.round(nextRainDay.day.maxtemp_c)}°` }, { label: "Min temp", value: `${Math.round(nextRainDay.day.mintemp_c)}°` } ] }; } } return { temp: Math.round(current.temp_c), condition: "No rain expected soon", icon: "/icons/sun.png", details: [ { label: "Current", value: `${Math.round(current.temp_c)}°` }, { label: "Rain", value: `${current.precip_mm || 0}mm` }, { label: "Rain chance", value: "Low" }, { label: "Status", value: "Clear skies" } ] }; default: return { temp: Math.round(current.temp_c), condition: current.condition.text, icon: current.condition.icon, details: [ { label: "Feels like", value: `${Math.round(current.feelslike_c)}°` }, { label: "Rain", value: `${current.precip_mm || 0}mm` }, { label: "Wind", value: `${current.wind_kph} km/h` }, { label: "Rain chance", value: `${forecast?.forecastday?.[0]?.day?.daily_chance_of_rain || 0}%` } ] }; } }, [ weatherData, selectedForecast ]); const fetchWeather = React.useCallback(async (cityName)=>{ setLoading(true); setError(null); try { const response = await fetch(`/integrations/weather-by-city/weather/${encodeURIComponent(cityName)}`); if (!response.ok) { throw new Error(`Weather API returned ${response.status}: ${response.statusText}`); } const data = await response.json(); setWeatherData(data); setShowLocationSelector(false); } catch (err) { console.error("Weather fetch error:", err); setError("Could not fetch weather data"); } finally{ setLoading(false); } }, []); React.useEffect(()=>{ if (city && !showLocationSelector) { fetchWeather(city); } }, [ fetchWeather, city, showLocationSelector ]); const handleLocationSelect = (selectedCity)=>{ setCity(selectedCity); fetchWeather(selectedCity); }; const handleSearch = (e)=>{ e.preventDefault(); const formData = new FormData(e.target); const searchCity = formData.get("city"); if (searchCity.trim()) { setCity(searchCity.trim()); fetchWeather(searchCity.trim()); } }; const handleForecastSelect = (forecast)=>{ setSelectedForecast(forecast); }; // Location Selector Screen if (showLocationSelector) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-blue-400 via-blue-500 to-blue-600 p-4", __source: { fileName: "", lineNumber: 194, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto", __source: { fileName: "", lineNumber: 195, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 197, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-white mb-2", __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this }, "Ramesh Rain Miter"), /*#__PURE__*/ React.createElement("p", { className: "text-white text-lg opacity-90", __source: { fileName: "", lineNumber: 201, columnNumber: 13 }, __self: this }, "Choose Your Location")), /*#__PURE__*/ React.createElement("div", { className: "bg-white bg-opacity-20 backdrop-blur-sm rounded-3xl p-8 text-white shadow-lg", __source: { fileName: "", lineNumber: 207, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-6", __source: { fileName: "", lineNumber: 208, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt text-4xl mb-4 opacity-80", __source: { fileName: "", lineNumber: 209, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-medium mb-2", __source: { fileName: "", lineNumber: 210, columnNumber: 15 }, __self: this }, "Select Your City"), /*#__PURE__*/ React.createElement("p", { className: "text-sm opacity-80", __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this }, "Choose a location to get started with weather updates")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, className: "mb-6", __source: { fileName: "", lineNumber: 217, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 218, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "city", placeholder: "Enter city name...", className: "w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 text-white placeholder-white placeholder-opacity-70 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50", __source: { fileName: "", lineNumber: 219, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "absolute right-2 top-1/2 transform -translate-y-1/2 text-white hover:text-opacity-80", __source: { fileName: "", lineNumber: 225, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 229, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 235, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm opacity-80 text-center mb-4", __source: { fileName: "", lineNumber: 236, columnNumber: 15 }, __self: this }, "Or choose from popular locations:"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleLocationSelect("Mahuwan"), className: "w-full bg-white bg-opacity-10 hover:bg-opacity-20 rounded-lg p-3 text-left transition-all", __source: { fileName: "", lineNumber: 240, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 244, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home mr-3", __source: { fileName: "", lineNumber: 245, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 246, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium", __source: { fileName: "", lineNumber: 247, columnNumber: 21 }, __self: this }, "Mahuwan"), /*#__PURE__*/ React.createElement("div", { className: "text-sm opacity-70", __source: { fileName: "", lineNumber: 248, columnNumber: 21 }, __self: this }, "Parsa, Nepal")))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleLocationSelect("Kathmandu"), className: "w-full bg-white bg-opacity-10 hover:bg-opacity-20 rounded-lg p-3 text-left transition-all", __source: { fileName: "", lineNumber: 253, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 257, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-city mr-3", __source: { fileName: "", lineNumber: 258, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 259, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium", __source: { fileName: "", lineNumber: 260, columnNumber: 21 }, __self: this }, "Kathmandu"), /*#__PURE__*/ React.createElement("div", { className: "text-sm opacity-70", __source: { fileName: "", lineNumber: 261, columnNumber: 21 }, __self: this }, "Nepal")))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleLocationSelect("Delhi"), className: "w-full bg-white bg-opacity-10 hover:bg-opacity-20 rounded-lg p-3 text-left transition-all", __source: { fileName: "", lineNumber: 266, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 270, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-city mr-3", __source: { fileName: "", lineNumber: 271, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 272, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium", __source: { fileName: "", lineNumber: 273, columnNumber: 21 }, __self: this }, "Delhi"), /*#__PURE__*/ React.createElement("div", { className: "text-sm opacity-70", __source: { fileName: "", lineNumber: 274, columnNumber: 21 }, __self: this }, "India")))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleLocationSelect("London"), className: "w-full bg-white bg-opacity-10 hover:bg-opacity-20 rounded-lg p-3 text-left transition-all", __source: { fileName: "", lineNumber: 279, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 283, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-city mr-3", __source: { fileName: "", lineNumber: 284, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 285, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium", __source: { fileName: "", lineNumber: 286, columnNumber: 21 }, __self: this }, "London"), /*#__PURE__*/ React.createElement("div", { className: "text-sm opacity-70", __source: { fileName: "", lineNumber: 287, columnNumber: 21 }, __self: this }, "United Kingdom")))))), /*#__PURE__*/ React.createElement("div", { className: "text-right mt-6", __source: { fileName: "", lineNumber: 295, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white text-sm opacity-80", __source: { fileName: "", lineNumber: 296, columnNumber: 13 }, __self: this }, "Designed by - Ramesh Kumar Sah, Mahuwan, Parsa")))); } if (loading) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-blue-400 via-blue-500 to-blue-600 flex items-center justify-center", __source: { fileName: "", lineNumber: 307, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-xl", __source: { fileName: "", lineNumber: 308, columnNumber: 9 }, __self: this }, "Loading weather...")); } if (error) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-blue-400 via-blue-500 to-blue-600 flex items-center justify-center", __source: { fileName: "", lineNumber: 315, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-center", __source: { fileName: "", lineNumber: 316, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 317, columnNumber: 11 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowLocationSelector(true), className: "bg-white bg-opacity-20 px-6 py-2 rounded-lg text-white hover:bg-opacity-30 transition-all mr-4", __source: { fileName: "", lineNumber: 318, columnNumber: 11 }, __self: this }, "Choose Location"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>fetchWeather(city), className: "bg-white bg-opacity-20 px-6 py-2 rounded-lg text-white hover:bg-opacity-30 transition-all", __source: { fileName: "", lineNumber: 324, columnNumber: 11 }, __self: this }, "Try Again"))); } if (!weatherData || !weatherData.location || !weatherData.current) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-blue-400 via-blue-500 to-blue-600 flex items-center justify-center", __source: { fileName: "", lineNumber: 337, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-xl", __source: { fileName: "", lineNumber: 338, columnNumber: 9 }, __self: this }, "No weather data available")); } const { location, current } = weatherData; const forecastContent = getForecastContent(); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-blue-400 via-blue-500 to-blue-600 p-4", __source: { fileName: "", lineNumber: 347, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto", __source: { fileName: "", lineNumber: 348, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-6", __source: { fileName: "", lineNumber: 350, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-white", __source: { fileName: "", lineNumber: 351, columnNumber: 11 }, __self: this }, "Ramesh Rain Miter"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowLocationSelector(true), className: "text-white text-sm opacity-80 hover:opacity-100 mt-2", __source: { fileName: "", lineNumber: 352, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt mr-1", __source: { fileName: "", lineNumber: 356, columnNumber: 13 }, __self: this }), "Change Location")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, className: "mb-8", __source: { fileName: "", lineNumber: 362, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 363, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "city", placeholder: "Search for a city...", className: "w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 text-white placeholder-white placeholder-opacity-70 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50", defaultValue: city, __source: { fileName: "", lineNumber: 364, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "absolute right-2 top-1/2 transform -translate-y-1/2 text-white hover:text-opacity-80", __source: { fileName: "", lineNumber: 371, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 375, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "bg-white bg-opacity-20 backdrop-blur-sm rounded-3xl p-8 text-center text-white shadow-lg", __source: { fileName: "", lineNumber: 381, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-light mb-2", __source: { fileName: "", lineNumber: 383, columnNumber: 11 }, __self: this }, location.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm opacity-80 mb-8", __source: { fileName: "", lineNumber: 384, columnNumber: 11 }, __self: this }, location.region, ", ", location.country), forecastContent && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 392, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `https:${forecastContent.icon}`, alt: forecastContent.condition, className: "w-24 h-24 mx-auto", __source: { fileName: "", lineNumber: 393, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 401, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-6xl font-thin mb-2", __source: { fileName: "", lineNumber: 402, columnNumber: 17 }, __self: this }, forecastContent.temp, "°"), /*#__PURE__*/ React.createElement("div", { className: "text-lg opacity-90", __source: { fileName: "", lineNumber: 405, columnNumber: 17 }, __self: this }, forecastContent.condition)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 mt-8", __source: { fileName: "", lineNumber: 411, columnNumber: 15 }, __self: this }, forecastContent.details.map((detail, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white bg-opacity-10 rounded-xl p-4", __source: { fileName: "", lineNumber: 413, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm opacity-70 mb-1", __source: { fileName: "", lineNumber: 417, columnNumber: 21 }, __self: this }, detail.label), /*#__PURE__*/ React.createElement("div", { className: "text-xl font-medium", __source: { fileName: "", lineNumber: 420, columnNumber: 21 }, __self: this }, detail.value))))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-sm opacity-70", __source: { fileName: "", lineNumber: 428, columnNumber: 11 }, __self: this }, selectedForecast === "today" ? `Last updated: ${new Date(current.last_updated).toLocaleTimeString()}` : `Forecast for ${location.name}`), /*#__PURE__*/ React.createElement("div", { className: "mt-6 space-y-3", __source: { fileName: "", lineNumber: 435, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white text-lg font-medium text-center mb-4", __source: { fileName: "", lineNumber: 436, columnNumber: 13 }, __self: this }, "Choose Forecast"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleForecastSelect("today"), className: `w-full rounded-xl p-4 text-white transition-all ${selectedForecast === "today" ? "bg-white bg-opacity-30" : "bg-white bg-opacity-20 hover:bg-opacity-30"}`, __source: { fileName: "", lineNumber: 440, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 448, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 449, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white bg-opacity-20 rounded-full w-8 h-8 flex items-center justify-center mr-3", __source: { fileName: "", lineNumber: 450, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-bold", __source: { fileName: "", lineNumber: 451, columnNumber: 21 }, __self: this }, "1")), /*#__PURE__*/ React.createElement("div", { className: "text-left", __source: { fileName: "", lineNumber: 453, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium", __source: { fileName: "", lineNumber: 454, columnNumber: 21 }, __self: this }, "Today"), /*#__PURE__*/ React.createElement("div", { className: "text-sm opacity-80", __source: { fileName: "", lineNumber: 455, columnNumber: 21 }, __self: this }, "Current weather conditions"))), /*#__PURE__*/ React.createElement("i", { className: "fas fa-sun text-yellow-300", __source: { fileName: "", lineNumber: 460, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleForecastSelect("tomorrow"), className: `w-full rounded-xl p-4 text-white transition-all ${selectedForecast === "tomorrow" ? "bg-white bg-opacity-30" : "bg-white bg-opacity-20 hover:bg-opacity-30"}`, __source: { fileName: "", lineNumber: 464, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 472, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 473, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white bg-opacity-20 rounded-full w-8 h-8 flex items-center justify-center mr-3", __source: { fileName: "", lineNumber: 474, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-bold", __source: { fileName: "", lineNumber: 475, columnNumber: 21 }, __self: this }, "2")), /*#__PURE__*/ React.createElement("div", { className: "text-left", __source: { fileName: "", lineNumber: 477, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium", __source: { fileName: "", lineNumber: 478, columnNumber: 21 }, __self: this }, "Tomorrow"), /*#__PURE__*/ React.createElement("div", { className: "text-sm opacity-80", __source: { fileName: "", lineNumber: 479, columnNumber: 21 }, __self: this }, "Next day forecast"))), /*#__PURE__*/ React.createElement("i", { className: "fas fa-calendar-day text-blue-300", __source: { fileName: "", lineNumber: 482, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleForecastSelect("nextrain"), className: `w-full rounded-xl p-4 text-white transition-all ${selectedForecast === "nextrain" ? "bg-white bg-opacity-30" : "bg-white bg-opacity-20 hover:bg-opacity-30"}`, __source: { fileName: "", lineNumber: 486, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 494, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 495, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white bg-opacity-20 rounded-full w-8 h-8 flex items-center justify-center mr-3", __source: { fileName: "", lineNumber: 496, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-bold", __source: { fileName: "", lineNumber: 497, columnNumber: 21 }, __self: this }, "3")), /*#__PURE__*/ React.createElement("div", { className: "text-left", __source: { fileName: "", lineNumber: 499, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium", __source: { fileName: "", lineNumber: 500, columnNumber: 21 }, __self: this }, "Next Raining Day"), /*#__PURE__*/ React.createElement("div", { className: "text-sm opacity-80", __source: { fileName: "", lineNumber: 501, columnNumber: 21 }, __self: this }, "When will it rain next?"))), /*#__PURE__*/ React.createElement("i", { className: "fas fa-cloud-rain text-blue-400", __source: { fileName: "", lineNumber: 506, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "text-right mt-6", __source: { fileName: "", lineNumber: 513, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white text-sm opacity-80", __source: { fileName: "", lineNumber: 514, columnNumber: 11 }, __self: this }, "Designed by - Ramesh Kumar Sah, Mahuwan, Parsa")))); }