create new comp

components/ErrorScreen.js

@@ -0,0 +1,18 @@
+import styles from "./ErrorScreen.module.css";
+
+const ErrorScreen = ({ onFocus, onChange, onKeyDown }) => {
+  return (
+    <div className={styles.wrapper}>
+      <h1 className={styles.message}>City not found, try again!</h1>
+      <input
+        type="text"
+        className={styles.input}
+        onFocus={onFocus}
+        onChange={onChange}
+        onKeyDown={onKeyDown}
+      />
+    </div>
+  );
+};
+
+export default ErrorScreen;

components/ErrorScreen.module.css

@@ -0,0 +1,24 @@
+.wrapper {
+  max-width: 260px;
+  text-align: center;
+  display: grid;
+  place-items: center;
+}
+
+.message {
+  margin-bottom: 30px;
+}
+
+.input {
+  max-width: 100%;
+  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;
+}

components/LoadingScreen.js

@@ -0,0 +1,11 @@
+import styles from "./LoadingScreen.module.css";
+
+const LoadingScreen = () => {
+  return (
+    <div className={styles.wrapper}>
+      <h1>Loading data...</h1>
+    </div>
+  );
+};
+
+export default LoadingScreen;

components/LoadingScreen.module.css

@@ -0,0 +1,5 @@
+.wrapper {
+  max-width: 260px;
+  display: grid;
+  place-items: center;
+}

pages/index.js

@@ -3,6 +3,8 @@ import Image from "next/image";
 
 import Metrics from "../components/Metrics";
 import SwitchBox from "../components/SwitchBox";
+import LoadingScreen from "../components/LoadingScreen";
+import ErrorScreen from "../components/ErrorScreen";
 
 import { convertTime, ctoF, timeToAMPM } from "../services/converters";
 import { isPM } from "../services/utils";
@@ -132,22 +134,13 @@ const App = () => {
       </div>
     </div>
   ) : weatherData && weatherData.message ? (
-    <div className={styles.errScr}>
+    <ErrorScreen
-      <div>
+      onFocus={(e) => (e.target.value = "")}
-        <h1 style={{ marginBottom: "30px" }}>City not found, try again!</h1>
+      onChange={(e) => setInput(e.target.value)}
-        <input
+      onKeyDown={(e) => enterKeydown(e)}
-          type="text"
+    />
-          className={styles.searchInput}
-          onFocus={(e) => (e.target.value = "")}
-          onChange={(e) => setInput(e.target.value)}
-          onKeyDown={(e) => enterKeydown(e)}
-        />
-      </div>
-    </div>
   ) : (
-    <div className={styles.errScr}>
+    <LoadingScreen />
-      <h1>Loading data...</h1>
-    </div>
   );
 };
 

styles/Home.module.css

@@ -78,20 +78,6 @@
   font-size: 18px;
 }
 
-.errScr {
-  text-align: center;
-  height: 100vh;
-  max-width: 300px;
-  display: grid;
-  place-items: center;
-  padding: 20px;
-  margin: 0 auto;
-}
-
-.errSearchInput {
-  max-width: 100%;
-}
-
 @media only screen and (max-width: 950px) {
   .wrapper {
     display: grid;