add new comps

components/ContentBox.js

@@ -0,0 +1,7 @@
+import styles from "./ContentBox.module.css";
+
+const ContentBox = ({ children }) => {
+  return <div className={styles.statsWrapper}>{children}</div>;
+};
+
+export default ContentBox;

components/ContentBox.module.css

@@ -0,0 +1,12 @@
+.statsWrapper {
+  background-color: rgb(247, 247, 247);
+  padding: 30px;
+  text-align: right;
+  border-radius: 0 30px 30px 0;
+}
+
+@media only screen and (max-width: 950px) {
+  .statsWrapper {
+    border-radius: 0;
+  }
+}

components/Header.js

@@ -0,0 +1,7 @@
+import styles from "./Header.module.css";
+
+const Header = ({ children }) => {
+  return <div className={styles.titleAndSearch}>{children}</div>;
+};
+
+export default Header;

components/Header.module.css

@@ -0,0 +1,12 @@
+.titleAndSearch {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 20px;
+}
+
+@media only screen and (max-width: 520px) {
+  .titleAndSearch {
+    grid-template-columns: 1fr;
+    place-items: center;
+  }
+}

pages/index.js

@@ -1,6 +1,8 @@
 import { useState, useEffect } from "react";
 
 import MainCard from "../components/MainCard";
+import ContentBox from "../components/ContentBox";
+import Header from "../components/Header";
 import Dates from "../components/Dates";
 import Search from "../components/Search";
 import Metrics from "../components/Metrics";
@@ -52,8 +54,8 @@ const App = () => {
         systemUsed={systemUsed}
         weatherData={weatherData}
       />
-      <div className={styles.statsWrapper}>
+      <ContentBox>
-        <div className={styles.titleAndSearch}>
+        <Header>
           <Dates weatherData={weatherData} systemUsed={systemUsed} />
           <Search
             placeHolder="Search a city..."
@@ -68,10 +70,10 @@ const App = () => {
               e.target.placeholder = "Search a city...";
             }}
           />
-        </div>
+        </Header>
         <Metrics data={weatherData} systemUsed={systemUsed} />
         <SwitchBox onClick={changeSystem} systemUsed={systemUsed} />
-      </div>
+      </ContentBox>
     </div>
   ) : weatherData && weatherData.message ? (
     <ErrorScreen errorMessage="City not found, try again!">

styles/Home.module.css

@@ -11,19 +11,6 @@
   margin: 0 20px;
 }
 
-.statsWrapper {
-  background-color: rgb(247, 247, 247);
-  padding: 30px;
-  text-align: right;
-  border-radius: 0 30px 30px 0;
-}
-
-.titleAndSearch {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  gap: 20px;
-}
-
 @media only screen and (max-width: 950px) {
   .wrapper {
     display: grid;
@@ -31,10 +18,6 @@
     max-width: 600px;
     margin: 20px auto;
   }
-
-  .statsWrapper {
-    border-radius: 0;
-  }
 }
 
 @media only screen and (max-width: 600px) {
@@ -43,10 +26,3 @@
     border-radius: 0;
   }
 }
-
-@media only screen and (max-width: 520px) {
-  .titleAndSearch {
-    grid-template-columns: 1fr;
-    place-items: center;
-  }
-}