img rename

pages/components/Metrics.jsx

@@ -13,7 +13,7 @@ const Metrics = ({ styles, data, systemUsed }) => {
     <div className={styles.statsBox}>
       <MetricCard
         title={"Humidity"}
-        iconSrc={"/icons/025-humidity.png"}
+        iconSrc={"/icons/humidity.png"}
         metric={data.main.humidity}
         unit={"%"}
         styles={styles}
@@ -21,7 +21,7 @@ const Metrics = ({ styles, data, systemUsed }) => {
 
       <MetricCard
         title={"Wind speed"}
-        iconSrc={"/icons/017-wind.png"}
+        iconSrc={"/icons/wind.png"}
         metric={getWindSpeed(systemUsed, data.wind.speed)}
         unit={systemUsed == "metric" ? "m/s" : "m/h"}
         styles={styles}
@@ -29,7 +29,7 @@ const Metrics = ({ styles, data, systemUsed }) => {
 
       <MetricCard
         title={"Wind direction"}
-        iconSrc={"/icons/014-compass.png"}
+        iconSrc={"/icons/compass.png"}
         metric={degToCompass(data.wind.deg)}
         styles={styles}
       />
@@ -44,7 +44,7 @@ const Metrics = ({ styles, data, systemUsed }) => {
 
       <MetricCard
         title={"Sunrise"}
-        iconSrc={"/icons/040-sunrise.png"}
+        iconSrc={"/icons/sunrise.png"}
         metric={getTime(systemUsed, data.sys.sunrise, data.timezone)}
         unit={getAMPM(systemUsed, data.sys.sunrise, data.timezone)}
         styles={styles}
@@ -52,7 +52,7 @@ const Metrics = ({ styles, data, systemUsed }) => {
 
       <MetricCard
         title={"Sunset"}
-        iconSrc={"/icons/041-sunset.png"}
+        iconSrc={"/icons/sunset.png"}
         metric={getTime(systemUsed, data.sys.sunset, data.timezone)}
         unit={getAMPM(systemUsed, data.sys.sunset, data.timezone)}
         styles={styles}

pages/index.js

@@ -1,11 +1,13 @@
 import { useState, useEffect } from "react";
-import styles from "../styles/Home.module.css";
 import Image from "next/image";
+
 import Metrics from "./components/Metrics";
 import { convertTime, ctoF, timeToAMPM } from "./services/converters";
 import { isPM } from "./services/utils";
 
-export default function Home() {
+import styles from "../styles/Home.module.css";
+
+const App = () => {
   const [input, setInput] = useState("Riga");
   const [systemUsed, setSystemUsed] = useState("metric");
   const [weatherData, setWeatherData] = useState();
@@ -159,4 +161,6 @@ export default function Home() {
       <h1>Loading data...</h1>
     </div>
   );
-}
+};
+
+export default App;