home

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@google/generative-ai": "^0.14.1",

src/components/Gpt.js

@@ -1,12 +1,14 @@
 import React from "react";
 import GptSearch from "./GptSearch";
 import GptResults from "./GptResults";
+import Footer from "./Footer";
 
 const Gpt = () => {
   return (
     <div>
       <GptSearch />
       <GptResults />
+      <Footer />
     </div>
   );
 };

src/components/GptSearch.js

@@ -6,6 +6,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { addGptMovies, showError } from "../utils/gptSlice";
 import { API_OPTIONS } from "../utils/constants";
 import { bgImage } from "../utils/constants";
+import Loader from "./Loader";
 
 const GptSearch = () => {
   const lang = useSelector((store) => store.lang.selectedLang);
@@ -107,8 +108,7 @@ const GptSearch = () => {
 
       {loading && (
         <div className="flex justify-center mt-4">
-          <div className="loader font-bold text-2xl"></div>
-          Loading...
+          <Loader />
         </div>
       )}
 

src/components/HeaderBrowse.js

@@ -9,8 +9,6 @@ import { removeGptMovies, toggleGptSearch } from "../utils/gptSlice";
 import { SUPPORTED_LANGUAGES } from "../utils/constants";
 import { changeLang } from "../utils/langSlice";
 import aiLogo from "../utils/images/gemini-icon.png";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faHouse } from "@fortawesome/free-solid-svg-icons";
 
 const HeaderBrowse = () => {
   const user = useSelector((store) => store.user);
@@ -19,13 +17,9 @@ const HeaderBrowse = () => {
   const dispatch = useDispatch();
 
   const handleSignOut = () => {
-    signOut(auth)
-      .then(() => {
-        // Sign-out successful.
-      })
-      .catch(() => {
-        navigate("/error");
-      });
+    signOut(auth).then(() => {
+      // Sign-out successful.
+    });
   };
 
   useEffect(() => {
@@ -75,7 +69,8 @@ const HeaderBrowse = () => {
               onClick={handleGptSearchBtn}
               className="text-sm mx-6 p-2 text-white hover:border hover:rounded-lg"
             >
-              <img className="w-6 inline-flex" src={aiLogo} /> AI Search
+              <img className="w-6 inline-flex" src={aiLogo} alt="ai" /> AI
+              Search
             </button>
 
             <button
@@ -90,7 +85,7 @@ const HeaderBrowse = () => {
         {showGpt && (
           <>
             <select
-              className="text-white p-2 bg-transparent hover:font-bold"
+              className="text-white p-2 bg-transparent hover:border hover:rounded-lg mr-10"
               onChange={langChangeHandler}
             >
               {SUPPORTED_LANGUAGES.map((lang) => (
@@ -106,9 +101,9 @@ const HeaderBrowse = () => {
 
             <button
               onClick={handleGptSearchBtn}
-              className="text-white text-lg hover:text-2xl px-10 pt-1 pb-2"
+              className="text-white text-md hover:border hover:rounded-lg pt-1 pb-1 px-3"
             >
-              <FontAwesomeIcon icon={faHouse} />
+              Home
             </button>
           </>
         )}

src/components/Home.js

@@ -0,0 +1,24 @@
+import { useSelector } from "react-redux";
+import Footer from "./Footer";
+import PrimaryContainer from "./PrimaryContainer";
+import SecondaryContainer from "./SecondaryContainer";
+import PlayMovie from "./PlayMovie";
+
+const Home = () => {
+  const showMovie = useSelector((store) => store.movies.playMovie);
+  return (
+    <div>
+      {!showMovie ? (
+        <>
+          <PrimaryContainer />
+          <SecondaryContainer />
+          <Footer />
+        </>
+      ) : (
+        <PlayMovie />
+      )}
+    </div>
+  );
+};
+
+export default Home;