diff --git a/app/weatherIcons.ts b/app/weatherIcons.ts
new file mode 100644
index 0000000..b7edce0
--- /dev/null
+++ b/app/weatherIcons.ts
@@ -0,0 +1,43 @@
+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 { WeatherIconType } from "@/types/types";
+
+export const weatherIcons: WeatherIconType[] = [
+ { code: 0, url: sun }, // clear sky
+ { code: 1, url: cloudAndSun }, // clear mainly
+ { code: 2, url: cloud }, // partly cloudy
+ { code: 3, url: cloud }, // overcast
+ { code: 45, url: cloud }, // fog
+ { code: 48, url: cloud }, // fog rime
+ { code: 51, url: cloudAndRain }, // drizzle light
+ { code: 53, url: cloudAndRain }, // drizzle moderate
+ { code: 55, url: cloudAndRain }, // drizzle dense
+ { code: 56, url: cloudSnowRain }, // drizzle light freezing
+ { code: 57, url: cloudSnowRain }, // drizzle dense freezing
+ { code: 61, url: cloudAndRain }, // rain slight
+ { code: 63, url: cloudAndRain }, // rain moderate
+ { code: 65, url: cloudAndRain }, // rain heavy
+ { code: 66, url: cloudWindRain }, // rain light freezing
+ { code: 67, url: cloudWindRain }, // rain dense freezing
+ { code: 71, url: cloudAndSnow }, // snow slight
+ { code: 73, url: cloudAndSnow }, // snow moderate
+ { code: 75, url: cloudAndSnow }, // snow heavy
+ { code: 77, url: cloudAndSnow }, // snow grains
+ { code: 80, url: cloudAndRain }, // rain showers slight
+ { code: 81, url: cloudAndRain }, // rain showers moderate
+ { code: 82, url: cloudAndRain }, // rain showers violent
+ { code: 85, url: cloudAndSnow }, // snow showers slight
+ { code: 86, url: cloudAndSnow }, // snow showers heavy
+ { code: 95, url: cloudAndLightening }, // thunderstorm
+ { code: 96, url: cloudAndLightening }, // thunderstorm hail slight
+ { code: 99, url: cloudAndLightening }, // thunderstorm hail heavy
+];
diff --git a/components/WeatherHero.tsx b/components/WeatherHero.tsx
index 4925334..415aac0 100644
--- a/components/WeatherHero.tsx
+++ b/components/WeatherHero.tsx
@@ -1,91 +1,22 @@
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;
- }
-};
-
+import { weatherIcons } from "@/app/weatherIcons";
export default function WeatherHero() {
- const { weather } = useContext(WeatherContext);
- const weatherCode = weather.current.weather_code;
- return(
+ const { weather } = useContext(WeatherContext);
+ const weatherCode = weather.current.weather_code;
+ const currentWeather = weatherIcons.filter((weather) => {
+ return weather.code === weatherCode;
+ });
+ return (
<>
-