local-weather/components/HourlyCard/WeatherIcon.tsx
2024-05-10 19:23:02 +02:00

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>
)
};