edit metrics

components/MetricCard.js

@@ -1,6 +1,8 @@
 import Image from "next/image";
 
-const MetricCard = ({ title, iconSrc, metric, unit = "", styles }) => {
+import styles from "./MetricCard.module.css";
+
+const MetricCard = ({ title, iconSrc, metric, unit = "" }) => {
   return (
     <div className={styles.statsCard}>
       <p>{title}</p>

components/MetricCard.module.css

@@ -0,0 +1,16 @@
+.statsCard {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 20px;
+  padding: 20px;
+}
+
+.statsCardContent {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+@media only screen and (max-width: 475px) {
+  .statsCardContent {
+    grid-template-columns: 1fr 2fr;
+  }
+}

components/Metrics.js

@@ -7,7 +7,9 @@ import {
 } from "../services/utils";
 import MetricCard from "./MetricCard";
 
-const Metrics = ({ styles, data, systemUsed }) => {
+import styles from "./Metrics.module.css";
+
+const Metrics = ({ data, systemUsed }) => {
   return (
     <div className={styles.statsBox}>
       <MetricCard
@@ -15,7 +17,6 @@ const Metrics = ({ styles, data, systemUsed }) => {
         iconSrc={"/icons/humidity.png"}
         metric={data.main.humidity}
         unit={"%"}
-        styles={styles}
       />
 
       <MetricCard
@@ -23,14 +24,12 @@ const Metrics = ({ styles, data, systemUsed }) => {
         iconSrc={"/icons/wind.png"}
         metric={getWindSpeed(systemUsed, data.wind.speed)}
         unit={systemUsed == "metric" ? "m/s" : "m/h"}
-        styles={styles}
       />
 
       <MetricCard
         title={"Wind direction"}
         iconSrc={"/icons/compass.png"}
         metric={degToCompass(data.wind.deg)}
-        styles={styles}
       />
 
       <MetricCard
@@ -38,7 +37,6 @@ const Metrics = ({ styles, data, systemUsed }) => {
         iconSrc={"/icons/binocular.png"}
         metric={getVisibility(systemUsed, data.visibility)}
         unit={systemUsed == "metric" ? "km" : "miles"}
-        styles={styles}
       />
 
       <MetricCard
@@ -46,7 +44,6 @@ const Metrics = ({ styles, data, systemUsed }) => {
         iconSrc={"/icons/sunrise.png"}
         metric={getTime(systemUsed, data.sys.sunrise, data.timezone)}
         unit={getAMPM(systemUsed, data.sys.sunrise, data.timezone)}
-        styles={styles}
       />
 
       <MetricCard
@@ -54,7 +51,6 @@ const Metrics = ({ styles, data, systemUsed }) => {
         iconSrc={"/icons/sunset.png"}
         metric={getTime(systemUsed, data.sys.sunset, data.timezone)}
         unit={getAMPM(systemUsed, data.sys.sunset, data.timezone)}
-        styles={styles}
       />
     </div>
   );

components/Metrics.module.css

@@ -0,0 +1,19 @@
+.statsBox {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 20px;
+  border-radius: 20px;
+  margin-bottom: 20px;
+}
+
+@media only screen and (max-width: 600px) {
+  .statsBox {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media only screen and (max-width: 475px) {
+  .statsBox {
+    grid-template-columns: 1fr;
+  }
+}

pages/index.js

@@ -129,7 +129,7 @@ const App = () => {
           />
         </div>
 
-        <Metrics styles={styles} data={weatherData} systemUsed={systemUsed} />
+        <Metrics data={weatherData} systemUsed={systemUsed} />
         <SwitchBox onClick={changeSystem} systemUsed={systemUsed} />
       </div>
     </div>

styles/Home.module.css

@@ -42,25 +42,6 @@
   gap: 20px;
 }
 
-.statsBox {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 20px;
-  border-radius: 20px;
-  margin-bottom: 20px;
-}
-
-.statsCard {
-  background: rgba(255, 255, 255, 0.95);
-  border-radius: 20px;
-  padding: 20px;
-}
-
-.statsCardContent {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-
 .mainTemp {
   font-size: 84px;
 }
@@ -96,10 +77,6 @@
     margin: 0 auto;
     border-radius: 0;
   }
-
-  .statsBox {
-    grid-template-columns: 1fr 1fr;
-  }
 }
 
 @media only screen and (max-width: 520px) {
@@ -112,13 +89,3 @@
     width: 100%;
   }
 }
-
-@media only screen and (max-width: 475px) {
-  .statsBox {
-    grid-template-columns: 1fr;
-  }
-
-  .statsCardContent {
-    grid-template-columns: 1fr 2fr;
-  }
-}