create SwitchBox comp

components/SwitchBox.js

@@ -0,0 +1,24 @@
+import styles from "./SwitchBox.module.css";
+
+const SwitchBox = ({ onClick, systemUsed }) => {
+  return (
+    <div className={styles.wrapper}>
+      <p
+        className={styles.switch}
+        style={{ color: systemUsed == "metric" ? "green" : "black" }}
+        onClick={onClick}
+      >
+        Metric System
+      </p>
+      <p
+        className={styles.switch}
+        style={{ color: systemUsed == "metric" ? "black" : "green" }}
+        onClick={onClick}
+      >
+        Imperial System
+      </p>
+    </div>
+  );
+};
+
+export default SwitchBox;

components/SwitchBox.module.css

@@ -0,0 +1,9 @@
+.wrapper {
+  text-align: right;
+}
+
+.switch {
+  margin: 0 10px;
+  cursor: pointer;
+  display: inline;
+}

pages/index.js

@@ -2,6 +2,8 @@ import { useState, useEffect } from "react";
 import Image from "next/image";
 
 import Metrics from "../components/Metrics";
+import SwitchBox from "../components/SwitchBox";
+
 import { convertTime, ctoF, timeToAMPM } from "../services/converters";
 import { isPM } from "../services/utils";
 
@@ -126,22 +128,7 @@ const App = () => {
         </div>
 
         <Metrics styles={styles} data={weatherData} systemUsed={systemUsed} />
-        <div className={styles.switchBox}>
-          <p
-            className={styles.switch}
-            style={{ color: systemUsed == "metric" ? "green" : "black" }}
-            onClick={changeSystem}
-          >
-            Metric System
-          </p>
-          <p
-            className={styles.switch}
-            style={{ color: systemUsed == "metric" ? "black" : "green" }}
-            onClick={changeSystem}
-          >
-            Imperial System
-          </p>
-        </div>
+        <SwitchBox onClick={changeSystem} systemUsed={systemUsed} />
       </div>
     </div>
   ) : weatherData && weatherData.message ? (

styles/Home.module.css

@@ -78,16 +78,6 @@
   font-size: 18px;
 }
 
-.switchBox {
-  text-align: right;
-}
-
-.switch {
-  margin: 0 10px;
-  cursor: pointer;
-  display: inline;
-}
-
 .errScr {
   text-align: center;
   height: 100vh;