{current.weather[0].description}

{city}

{forecast.map((day, index) => (

{new Date(day.dt * 1000).toLocaleDateString('en-US', { weekday: 'short' })}

{Math.round(day.temp.max)}{tempUnit} {Math.round(day.temp.min)}{tempUnit}

))}

); }; export default WeatherDisplay; 19:T583,.weather-display { max-width: 800px; margin: 2rem auto; padding: 1.5rem; background-color: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); animation: fadeIn 0.5s ease-out; } .current-weather { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } .weather-main { display: flex; align-items: center; gap: 1rem; } .weather-temp h2 { font-size: 2.5rem; margin: 0; } .weather-city { text-align: right; } .weather-city h3 { margin: 0 0 0.5rem 0; font-size: 1.5rem; } .favorite-btn { background: none; border: 1px solid #007bff; color: #007bff; padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; transition: all 0.2s; } .favorite-btn:hover { background-color: #e7f1ff; } .favorite-btn.active { background-color: #007bff; color: white; } .forecast { display: flex; justify-content: space-between; gap: 1rem; } .forecast-day { flex: 1; tex