add search comp

components/Search.js

@@ -0,0 +1,17 @@
+import styles from "./Search.module.css";
+
+const Search = ({ placeHolder, value, onFocus, onChange, onKeyDown }) => {
+  return (
+    <input
+      className={styles.searchInput}
+      type="text"
+      placeholder={placeHolder}
+      value={value}
+      onFocus={onFocus}
+      onChange={onChange}
+      onKeyDown={onKeyDown}
+    />
+  );
+};
+
+export default Search;

components/Search.module.css

@@ -0,0 +1,18 @@
+.searchInput {
+  margin-bottom: 20px;
+  height: 40px;
+  border: none;
+  padding: 0 10px;
+  color: #303030;
+  font-size: 20px;
+  text-align: right;
+  border-radius: 10px;
+  font-family: "Varela Round", sans-serif;
+  font-size: 18px;
+}
+
+@media only screen and (max-width: 520px) {
+  .searchInput {
+    width: 100%;
+  }
+}

pages/index.js

@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 
 import MainCard from "../components/MainCard";
 import Dates from "../components/Dates";
+import Search from "../components/Search";
 import Metrics from "../components/Metrics";
 import SwitchBox from "../components/SwitchBox";
 import LoadingScreen from "../components/LoadingScreen";
@@ -51,14 +52,11 @@ const App = () => {
         systemUsed={systemUsed}
         weatherData={weatherData}
       />
-
       <div className={styles.statsWrapper}>
         <div className={styles.titleAndSearch}>
           <Dates weatherData={weatherData} systemUsed={systemUsed} />
-          <input
+          <Search
-            type="text"
+            placeHolder="Search a city..."
-            className={styles.searchInput}
-            placeholder="Search a city..."
             value={input}
             onFocus={(e) => {
               e.target.value = "";
@@ -71,7 +69,6 @@ const App = () => {
             }}
           />
         </div>
-
         <Metrics data={weatherData} systemUsed={systemUsed} />
         <SwitchBox onClick={changeSystem} systemUsed={systemUsed} />
       </div>

styles/Home.module.css

@@ -11,10 +11,6 @@
   margin: 0 20px;
 }
 
-.wrapperHide {
-  display: none;
-}
-
 .statsWrapper {
   background-color: rgb(247, 247, 247);
   padding: 30px;
@@ -28,19 +24,6 @@
   gap: 20px;
 }
 
-.searchInput {
-  margin-bottom: 20px;
-  height: 40px;
-  border: none;
-  padding: 0 10px;
-  color: #303030;
-  font-size: 20px;
-  text-align: right;
-  border-radius: 10px;
-  font-family: "Varela Round", sans-serif;
-  font-size: 18px;
-}
-
 @media only screen and (max-width: 950px) {
   .wrapper {
     display: grid;
@@ -66,8 +49,4 @@
     grid-template-columns: 1fr;
     place-items: center;
   }
-
-  .searchInput {
-    width: 100%;
-  }
 }