feat(weather): add custom weather icon

client/src/components/current-weather-card.tsx

@@ -1,5 +1,6 @@
 import { getHours } from '@utils/utility-functions';
 import WeatherDetails from '@components/shared/weather-details';
+import WeatherIcon from '@components/shared/weather-icon/weather-icon';
 import { PiEyeLight, PiSunLight, PiDropLight, PiWindLight } from 'react-icons/pi';
 
 type Props = {
@@ -8,6 +9,8 @@ type Props = {
     wind: number;
     degrees: number;
     humidity: number;
+    isNight: boolean;
+    iconCode: number;
     localTime: string;
     visibility: number;
     description: string;
@@ -18,7 +21,9 @@ const CurrentWeatherCard: React.FC<Props> = ({
 	name,
 	wind,
 	degrees,
+    isNight,
 	humidity,
+    iconCode,
     localTime,
 	visibility,
 	description,
@@ -33,10 +38,7 @@ const CurrentWeatherCard: React.FC<Props> = ({
             </div>
 
             <div className='weather-degrees-container'>
-                <img
-                    src='/3d-weather-icon.png'
-                    alt='weather-icon'
-                />
+                <WeatherIcon isNight={ isNight } weatherCode={ iconCode } />
 
                 <div>
                     <span className='degrees'>{ degrees }</span>

client/src/components/dashboard.tsx

@@ -19,7 +19,9 @@ const Dashboard: React.FC<{
                 uv={ current.uv }
                 wind={ current.wind }
                 name={ location.name }
+                isNight={ ! current.is_day }
                 humidity={ current.humidity }
+                iconCode={ current.icon_code }
                 localTime={ location.localtime }
                 visibility={ current.visibility }
                 description={ current.description }

client/src/components/shared/weather-icon/icon-mapping.ts

@@ -0,0 +1,69 @@
+export const icons = {
+	Mist: 'mist.png',
+	Rain: 'rain.png',
+	Snow: 'snow.png',
+	Sunny: 'sunny.png',
+	Night: 'night.png',
+	Cloudy: 'cloudy.png',
+	Thunder: 'thunder.png',
+};
+
+// Sorry for that, I know it's terrible, but `weatherapi.com` API provides ugly icons
+// and I don't have enough icons to cover all the weather conditions...
+export const weatherIconMapping = {
+    // Clear/Sunny
+    1000: icons.Sunny,
+
+    // Cloudy/Overcast
+    1003: icons.Cloudy,
+    1006: icons.Cloudy,
+    1009: icons.Cloudy,
+
+    // Mist/Fog
+    1030: icons.Mist,
+    1135: icons.Mist,
+    1147: icons.Mist,
+
+    // Rain
+    1063: icons.Rain,
+    1069: icons.Rain,
+    1072: icons.Rain,
+    1150: icons.Rain,
+    1153: icons.Rain,
+    1168: icons.Rain,
+    1171: icons.Rain,
+    1180: icons.Rain,
+    1183: icons.Rain,
+    1186: icons.Rain,
+    1189: icons.Rain,
+    1192: icons.Rain,
+    1195: icons.Rain,
+    1240: icons.Rain,
+    1243: icons.Rain,
+    1246: icons.Rain,
+
+    // Snow
+    1066: icons.Snow,
+    1067: icons.Snow,
+    1114: icons.Snow,
+    1117: icons.Snow,
+    1204: icons.Snow,
+    1207: icons.Snow,
+    1210: icons.Snow,
+    1213: icons.Snow,
+    1216: icons.Snow,
+    1219: icons.Snow,
+    1222: icons.Snow,
+    1225: icons.Snow,
+    1237: icons.Snow,
+    1255: icons.Snow,
+    1258: icons.Snow,
+    1261: icons.Snow,
+    1264: icons.Snow,
+
+    // Thunder
+    1273: icons.Thunder,
+    1276: icons.Thunder,
+    1279: icons.Thunder,
+    1282: icons.Thunder,
+};

client/src/components/shared/weather-icon/weather-icon.tsx

@@ -0,0 +1,30 @@
+import { icons, weatherIconMapping } from './icon-mapping';
+
+type IconCodes = keyof typeof weatherIconMapping;
+
+const WeatherIcon: React.FC<{
+    isNight?: boolean;
+    weatherCode: number;
+}> = ({ isNight, weatherCode }) => {
+    const icon = weatherIconMapping[weatherCode as IconCodes] || icons.Sunny;
+
+    if(isNight) {
+        return (
+            <img
+                alt='weather icon'
+                className='weather-icon'
+                src={ `/icons/${ icons.Night }` }
+            />  
+        )
+    }
+
+    return (
+        <img
+            alt='weather icon'
+            className='weather-icon'
+            src={ `/icons/${ icon }` }
+        />
+    );
+}
+
+export default WeatherIcon;

client/src/components/weekly-forecast.tsx

@@ -1,3 +1,5 @@
+import WeatherIcon from '@components/shared/weather-icon/weather-icon';
+
 type Forecast = {
     date: string;
     icon_code: number;
@@ -25,7 +27,7 @@ const WeeklyForecast: React.FC<{
 
                         return (
                             <li key={ day.date }>
-                                <img src='/3d-weather-icon.png' alt='weather-icon' />
+                                <WeatherIcon weatherCode={ day.icon_code } />
 
                                 <span>
                                     { Math.round(day.max_temp_c) }° / { Math.round(day.min_temp_c) }°

server/utils/fetchers/fetchers.ts

@@ -36,6 +36,7 @@ export const fetchForecast = async (query: string) => {
             uv: current.uv,
             temp_c: current.temp_c,
             wind: current.wind_kph,
+            is_day: current.is_day,
             humidity: current.humidity,
             visibility: current.vis_km,
             icon_code: current.condition.code,