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;
+}