moved weathericon logic out of components as it

was needed in multiple places.

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
+];

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";
-
+import { weatherIcons } from "@/app/weatherIcons";
-
-
-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 { weather } = useContext(WeatherContext);
-    const weatherCode = weather.current.weather_code;
+  const weatherCode = weather.current.weather_code;
-    return(
+  const currentWeather = weatherIcons.filter((weather) => {
+    return weather.code === weatherCode;
+  });
+  return (
     <>
-    <Image className="h-44 w-auto mx-auto" src={getCurrentWeatherIcon(weatherCode)} alt="Weather icon"/>
+      <Image
+        className="h-44 w-auto mx-auto"
+        src={currentWeather[0].url}
+        alt="Weather icon"
+      />
     </>
-)
+  );
-};
+}

components/WeatherIcon.tsx

@@ -1,88 +1,20 @@
 import Image from "next/image";
-import cloudAndLightening from '../public/cloud-and-lightening.svg'
+import { weatherIcons } from "@/app/weatherIcons";
-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}) {
+export default function WeatherIcon(props: { weatherCode: number }) {
-    const weatherCode = props.weatherCode
+  const currentWeather = weatherIcons.filter((weather) => {
-    return (
+    return weather.code === props.weatherCode;
+  });
+  return (
     <div className="h-12">
-        <Image className="mt-2 max-h-12 mx-auto w-auto" src={getCurrentWeatherIcon(weatherCode)} alt="Weather icon"/>
+      <Image
+        className="mt-2 max-h-12 mx-auto w-auto"
+        src={currentWeather[0].url}
+        alt="Weather icon"
+        width={100}
+        height={100}
+      />
     </div>
-)
+  );
-};
+}

types/types.ts

@@ -147,7 +147,8 @@ export interface coordType {
   name: string;
   geo: {
     lat: number;
-    lng: number;}
+    lng: number;
+  };
 }
 
 export type EffectCallback = () => void | (() => void | undefined);
@@ -161,7 +162,6 @@ export interface TempInfo {
   humidity: number;
 }
 
-
 export interface LocationContextType {
   geoLocation: coordType;
   setGeoLocation: React.Dispatch<React.SetStateAction<coordType>>;
@@ -181,4 +181,9 @@ export interface DailyCardPropType {
   temperature: number;
   weatherCode: number;
   time: string;
-}
+}
+
+export interface WeatherIconType {
+  code: number;
+  url: string;
+}