Add Search Query

src/App.js

@@ -1,17 +1,20 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import "./App.css";
 import { Route, Routes } from "react-router-dom";
 
 import GlobalContext from "./context/GlobalContext";
 import { HomeScreen, VideoDetailsScreen, ErrorScreen } from "../src/screens";
-import { Header, Footer, Loading } from "../src/components";
+import { Header, Footer, Loading, SearchQuery } from "../src/components";
 
 function App() {
   /* States */
 
   //Loading
   const [loading, setLoading] = useState(true);
 
+  // Global States
+  const [userSearch, setUserSearch] = useState("");
+
   useEffect(() => {
     setTimeout(() => {
       setLoading(false);
@@ -24,7 +27,10 @@ function App() {
 
   return (
     <div className="app-container">
-      <Header />
+      <div>
+        <Header />
+        <SearchQuery userSearch={userSearch} setUserSearch={setUserSearch} />
+      </div>
       <div className="screen-container">
         <GlobalContext.Provider value={{}}>
           <Routes>

src/components/SearchQuery.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { FaSearch } from "react-icons/fa";
+
+const SearchQuery = ({ userSearch, setUserSearch }) => {
+  const handleChange = (event) => {
+    setUserSearch(event.target.value);
+  };
+
+  const handleClickEnter = (event) => {
+    if (event.key === "Enter") {
+      console.log(userSearch);
+    }
+  };
+
+  return (
+    <div>
+      <div className="input-container">
+        <div className="input">
+          <input
+            type="text"
+            placeholder="Search Videos..."
+            value={userSearch}
+            onChange={(e) => handleChange(e)}
+            className="input-search"
+            onKeyDown={(e) => handleClickEnter(e)}
+          />
+
+          <FaSearch color="aqua" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SearchQuery;

src/components/index.js

@@ -1,3 +1,4 @@
 export { default as Header } from "./Header";
 export { default as Footer } from "./Footer";
 export { default as Loading } from "./Loading";
+export { default as SearchQuery } from "./SearchQuery";