Current Weather
Florence
Loading...
Loading...
The CurrentWeatherWidget component displays real-time weather data from external APIs (OpenWeatherMap, WeatherAPI, etc.). Shows current temperature, conditions, humidity, wind speed, and other metrics with a 5-day forecast preview. Features auto-refresh, error handling, and loading states.
Real-time weather display component with API integration. Shows current weather conditions, metrics, and 5-day forecast preview.
Florence
Florence
Rome
Last updated:
Venice
Last updated:
Milan
Last updated:
Naples
Unable to load weather data
Unable to connect to weather service
Turin
import { CurrentWeatherWidget } from '@/components/composite/CurrentWeatherWidget';
// With API integration
<CurrentWeatherWidget
location={{
name: 'Florence',
coordinates: { lat: 43.7696, lng: 11.2558 },
timezone: 'Europe/Rome',
}}
provider="openweathermap"
showForecast={true}
forecastDays={5}
variant="full"
autoRefresh={15}
/>
// With custom data (no API call)
<CurrentWeatherWidget
location={{ name: 'Rome' }}
weatherData={{
temperature: 25,
condition: 'Partly Cloudy',
conditionCode: 'partly-cloudy',
humidity: 68,
windSpeed: 15,
feelsLike: 27,
lastUpdated: new Date(),
forecast: [
{
date: new Date(Date.now() + 86400000),
high: 26,
low: 18,
condition: 'Sunny',
conditionCode: 'sunny',
},
// ... more forecast days
],
}}
variant="full"
showForecast={true}
/>
// Compact variant
<CurrentWeatherWidget
location={{ name: 'Venice' }}
variant="compact"
showForecast={false}
/>Required. Object containing location name, coordinates (lat/lng), and optional timezone.
Optional. Weather API key. Can also be provided via environment variable.
Optional. 'openweathermap' | 'weatherapi' | 'accuweather' (default: 'openweathermap').
Optional. Boolean to show/hide forecast preview (default: true).
Optional. Number of forecast days to display (default: 5).
Optional. Callback function called when weather data is updated.
Optional. 'compact' | 'full' (default: 'full'). Controls layout density.
Optional. Auto-refresh interval in minutes (0 = disabled, default: 0).
Optional. Custom weather data object. If provided, no API call is made.
Optional. Override loading state.
Optional. Override error state with custom error message.
Optional. Additional CSS classes for the wrapper.
interface WeatherData {
temperature: number; // Celsius
condition: string; // "Sunny", "Cloudy", "Rain", etc.
conditionCode?: WeatherCondition; // For icon mapping
humidity: number; // percentage
windSpeed?: number; // km/h
windDirection?: number; // degrees
pressure?: number; // hPa
visibility?: number; // km
uvIndex?: number;
feelsLike?: number; // Celsius
lastUpdated: Date;
forecast?: ForecastDay[];
}
interface ForecastDay {
date: Date;
high: number;
low: number;
condition: string;
conditionCode?: WeatherCondition;
precipitation?: number; // mm
chanceOfRain?: number; // percentage
}
type WeatherCondition =
| 'sunny'
| 'partly-cloudy'
| 'cloudy'
| 'rainy'
| 'snowy'
| 'windy'
| 'foggy'
| 'stormy';The component currently includes placeholder API integration code. To implement real API calls, replace the mock data in the fetchWeatherData function with actual API calls to your chosen weather provider.
Store your weather API key in environment variables (e.g., NEXT_PUBLIC_WEATHER_API_KEY) for security. The component will use the apiKey prop or fall back to environment variables.
The component gracefully handles API errors and displays user-friendly error messages with a retry button. Consider implementing exponential backoff for retry attempts in production.
The component uses semantic HTML (article, time elements) for SEO. For enhanced SEO, consider adding Weather schema markup via the StructuredData component when displaying weather information on pages.