42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import { useEffect } from "react";
|
|
import { useWeatherStore } from "@/store/weather";
|
|
|
|
import styles from "./style.module.css";
|
|
|
|
export default function Weather() {
|
|
const weatherData = useWeatherStore((state) => state.weatherData);
|
|
const fetchWeatherData = useWeatherStore((state) => state.fetchWeatherData);
|
|
|
|
useEffect(() => {
|
|
fetchWeatherData();
|
|
const interval = setInterval(() => {
|
|
fetchWeatherData();
|
|
}, 10 * 60000);
|
|
return () => clearInterval(interval);
|
|
}, [fetchWeatherData]);
|
|
|
|
if (!weatherData.current) {
|
|
return <div>Loading...</div>;
|
|
}
|
|
|
|
return (
|
|
<div className={styles.weatherContainer}>
|
|
<div className={styles.currentTemperature}>
|
|
<img
|
|
src={weatherData.current.icon}
|
|
alt={weatherData.current.weather_description}
|
|
/>
|
|
<span>{weatherData.current.temperature_2m.toFixed(1)}°C</span>
|
|
</div>
|
|
<div className={styles.dailyTemperatures}>
|
|
<span className={styles.minTemperature}>
|
|
{weatherData.daily.temperature_2m_min[0].toFixed(1)}°C
|
|
</span>
|
|
<span className={styles.maxTemperature}>
|
|
{weatherData.daily.temperature_2m_max[0].toFixed(1)}°C
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|