byte/solar-management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix weather forecast

Browse Source
This commit is contained in:
lumijiez
2025-05-22 22:52:54 +03:00
parent fe5fe3da66
commit 4383c6963f
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/WeatherForecast.js
View File

@@ -95,7 +95,7 @@ export default function WeatherForecast() {
Last updated: {new Date(weatherData.lastUpdated).toLocaleTimeString()} Last updated: {new Date(weatherData.lastUpdated).toLocaleTimeString()}
</div> </div>
</div> </div>
<div className="grid grid-cols-7 gap-2"> <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-2">
{weatherData.forecast.forecastday.map((day, index) => ( {weatherData.forecast.forecastday.map((day, index) => (
<motion.div <motion.div
key={day.date} key={day.date}
@@ -107,8 +107,8 @@ export default function WeatherForecast() {
<div className="text-xs text-gray-400"> <div className="text-xs text-gray-400">
{index === 0 ? 'Today' : new Date(day.date).toLocaleDateString('en-US', { weekday: 'short' })} {index === 0 ? 'Today' : new Date(day.date).toLocaleDateString('en-US', { weekday: 'short' })}
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-1 sm:gap-2">
<div className="relative w-10 h-10"> <div className="relative w-8 h-8 sm:w-10 sm:h-10">
<Image <Image
src={`https:${day.day.condition.icon}`} src={`https:${day.day.condition.icon}`}
alt={day.day.condition.text} alt={day.day.condition.text}
@@ -125,10 +125,10 @@ export default function WeatherForecast() {
</span> </span>
</div> </div>
</div> </div>
<div className="text-xs text-gray-500 text-center mt-0.5 line-clamp-1"> <div className="text-[10px] sm:text-xs text-gray-500 text-center mt-0.5 line-clamp-1">
{day.day.condition.text} {day.day.condition.text}
</div> </div>
<div className="text-xs text-gray-400"> <div className="text-[10px] sm:text-xs text-gray-400">
{day.day.daily_chance_of_rain}% {day.day.daily_chance_of_rain}%
</div> </div>
</motion.div> </motion.div>