edit error scr

components/ErrorScreen.js

@@ -1,16 +1,10 @@
 import styles from "./ErrorScreen.module.css";
 
-const ErrorScreen = ({ onFocus, onChange, onKeyDown }) => {
+const ErrorScreen = ({ errorMessage, children }) => {
   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}
-      />
+      <h1 className={styles.message}>{errorMessage}</h1>
+      {children}
     </div>
   );
 };

components/ErrorScreen.module.css

@@ -8,17 +8,3 @@
 .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

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

pages/index.js

@@ -74,13 +74,15 @@ const App = () => {
       </div>
     </div>
   ) : weatherData && weatherData.message ? (
-    <ErrorScreen
+    <ErrorScreen errorMessage="City not found, try again!">
+      <Search
         onFocus={(e) => (e.target.value = "")}
         onChange={(e) => setInput(e.target.value)}
         onKeyDown={(e) => enterKeydown(e)}
       />
+    </ErrorScreen>
   ) : (
-    <LoadingScreen />
+    <LoadingScreen loadingMessage="Loading data..." />
   );
 };