91 lines
2.9 KiB
TypeScript
91 lines
2.9 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'
|
|
|
|
import { useContext } from "react";
|
|
import { WeatherContext } from "./WeatherNow";
|
|
|
|
|
|
|
|
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;
|
|
}
|
|
};
|
|
|
|
|
|
export default function WeatherHero() {
|
|
const { weather } = useContext(WeatherContext);
|
|
const weatherCode = weather.current.weather_code;
|
|
return(
|
|
<>
|
|
<Image className="h-1/3 mx-auto" src={getCurrentWeatherIcon(weatherCode)} alt="Weather icon"/>
|
|
</>
|
|
)
|
|
}; |