88 lines
3.0 KiB
TypeScript
88 lines
3.0 KiB
TypeScript
import Image from "next/image";
|
|
import cloudAndLightening from '../../public/cloud-and-lightening.svg'
|
|
import cloudAndMoon from '../../public/cloud-and-moon.svg'
|
|
import cloudAndRain from '../../public/cloud-and-rain.svg'
|
|
import cloudAndSnow from '../../public/cloud-and-snow.svg'
|
|
import cloudAndWind from '../../public/cloud-and-wind.svg'
|
|
import cloudSnowRain from '../../public/cloud-snow-rain.svg'
|
|
import cloudAndSun from '../../public/cloud-and-sun.svg'
|
|
import cloudWindRain from '../../public/cloud-wind-rain.svg'
|
|
import cloud from '../../public/cloud.svg'
|
|
import moon from '../../public/moon.svg'
|
|
import sun from '../../public/sun.svg'
|
|
|
|
|
|
|
|
|
|
function getCurrentWeatherIcon(weatherCode: number) {
|
|
switch (weatherCode) {
|
|
default:
|
|
return sun;
|
|
case 0: // clear sky
|
|
return sun;
|
|
case 1: // clear mainly
|
|
return cloudAndSun;
|
|
case 2: // partly cloudy
|
|
return cloud;
|
|
case 3: // overcast
|
|
return cloud;
|
|
case 45: // fog
|
|
return cloud;
|
|
case 48: // fog rime
|
|
return cloud;
|
|
case 51: // drizzle light
|
|
return cloudAndRain;
|
|
case 53: // drizzle moderate
|
|
return cloudAndRain;
|
|
case 55: // drizzle dense
|
|
return cloudAndRain;
|
|
case 56: // drizzle light freezing
|
|
return cloudSnowRain;
|
|
case 57: // drizzle dense freezing
|
|
return cloudSnowRain;
|
|
case 61: // rain slight
|
|
return cloudAndRain;
|
|
case 63: // rain moderate
|
|
return cloudAndRain;
|
|
case 65: // rain heavy
|
|
return cloudAndRain;
|
|
case 66: // rain light freezing
|
|
return cloudWindRain;
|
|
case 67: // rain dense freezing
|
|
return cloudWindRain;
|
|
case 71: // snow slight
|
|
return cloudAndSnow;
|
|
case 73: // snow moderate
|
|
return cloudAndSnow;
|
|
case 75: // snow heavy
|
|
return cloudAndSnow;
|
|
case 77: // snow grains
|
|
return cloudAndSnow;
|
|
case 80: // rain showers slight
|
|
return cloudAndRain;
|
|
case 81: // rain showers moderate
|
|
return cloudAndRain;
|
|
case 82: // rain showers violent
|
|
return cloudAndRain;
|
|
case 85: // snow showers slight
|
|
return cloudAndSnow;
|
|
case 86: // snow showers heavy
|
|
return cloudAndSnow;
|
|
case 95: // thunderstorm
|
|
return cloudAndLightening;
|
|
case 96: //thunderstorm hail slight
|
|
return cloudAndLightening;
|
|
case 99: //thunderstorm hail heavy
|
|
return cloudAndLightening;
|
|
}
|
|
};
|
|
|
|
// this component takes WeatherIconPropType as props and shows the weather icon for the hour index it is given in timeIndex prop.
|
|
export default function WeatherIcon(props: {weatherCode: number}) {
|
|
const weatherCode = props.weatherCode
|
|
return (
|
|
<div className="p-2">
|
|
<Image src={getCurrentWeatherIcon(weatherCode)} alt="Weather icon"/>
|
|
</div>
|
|
)
|
|
}; |