feat: search keywords and companies

package.json

@@ -24,6 +24,7 @@
     "prettier": "^3.3.3",
     "query-string": "^9.1.0",
     "react": "^18.3.1",
+    "react-country-flag": "^3.1.0",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.25.1"
   },

src/pages/home/Home.tsx

@@ -9,6 +9,7 @@ import { useNavigate, useSearchParams } from "react-router-dom";
 
 const Home = () => {
   const navigate = useNavigate();
+  const [search, setSearch] = useSearchParams();
   const [trendingTab, setTrendingTab] = useState<TrendingTabEnum>(
     TrendingTabEnum.TODAY,
   );
@@ -28,7 +29,11 @@ const Home = () => {
     navigate(`/search?${search.toString()}`);
   };
 
-  const [search, setSearch] = useSearchParams();
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleSearch();
+    }
+  };
 
   return (
     <AppLayout>
@@ -43,6 +48,7 @@ const Home = () => {
             placeholder="Search for a movie, tv show, person"
             value={search.get("query") || ""}
             onChange={(e) => setSearch({ query: e.target.value })}
+            onKeyDown={handleKeyDown}
           />
           <button className="btn" onClick={handleSearch}>
             Search

src/pages/search/Search.tsx

@@ -14,6 +14,8 @@ import { SearchTabTypes } from "../../types";
 import SearchTab from "./SearchTab.tsx";
 import SearchMovieResult from "./SearchMovieResult.tsx";
 import SearchPeopleResult from "./SearchPeopleResult.tsx";
+import SearchKeywordResult from "./SearchKeywordResult.tsx";
+import SearchCompanyResult from "./SearchCompanyResult.tsx";
 
 const Search = () => {
   const [search, setSearch] = useSearchParams();
@@ -45,6 +47,7 @@ const Search = () => {
   const currentPage = parseInt(search.get("page") || "1") - 1;
 
   const handleTabChange = (value: SearchTabEnums) => {
+    setSearch({ page: "1", query: search.get("query") || "" });
     setCurrentSearchTab(value);
   };
 
@@ -155,6 +158,22 @@ const Search = () => {
               handlePageChange={handlePageChange}
             />
           )}
+          {currentSearchTab === SearchTabEnums.KEYWORDS && (
+            <SearchKeywordResult
+              loading={keywordPending}
+              data={keywordData}
+              handlePageChange={handlePageChange}
+              currentPage={currentPage}
+            />
+          )}
+          {currentSearchTab === SearchTabEnums.COMPANIES && (
+            <SearchCompanyResult
+              loading={companyPending}
+              data={companyData}
+              currentPage={currentPage}
+              handlePageChange={handlePageChange}
+            />
+          )}
         </div>
       </div>
     </AppLayout>

src/pages/search/SearchCompanyResult.tsx

@@ -1,3 +1,44 @@
-const SearchCompanyResult = () => {};
+import { SearchMovieResultProps } from "../../types";
+import SearchPagination from "./SearchPagination.tsx";
+import ReactCountryFlag from "react-country-flag";
+
+const SearchCompanyResult = ({
+  loading,
+  data,
+  currentPage,
+  handlePageChange,
+}: SearchMovieResultProps) => {
+  return (
+    <div className={`${loading ? "skeleton w-52 h-12" : ""}`}>
+      <div className="grid grid-cols-4 gap-4 mb-10">
+        {data &&
+          data.results.map((result) => (
+            <div
+              key={result.id}
+              className="rounded-btn bg-base-200 p-4 cursor-pointer"
+            >
+              {result.logo_path && (
+                <img
+                  src={`https://image.tmdb.org/t/p/w500${result.logo_path}`}
+                  alt={result.name}
+                  className="w-auto h-auto"
+                />
+              )}
+              <p> Name: {result.name}</p>
+              <p> Origin Country: {result.origin_country ?? "N/A"}</p>{" "}
+              {result.origin_country && (
+                <ReactCountryFlag countryCode={result.origin_country} />
+              )}
+            </div>
+          ))}
+      </div>
+      <SearchPagination
+        currentPage={currentPage}
+        data={data}
+        handlePageChange={handlePageChange}
+      />
+    </div>
+  );
+};
 
 export default SearchCompanyResult;

src/pages/search/SearchKeywordResult.tsx

@@ -1,3 +1,30 @@
-const SearchKeywordResult = () => {};
+import { Link } from "react-router-dom";
+import { SearchMovieResultProps } from "../../types";
+import SearchPagination from "./SearchPagination.tsx";
+
+const SearchKeywordResult = ({
+  loading,
+  data,
+  currentPage,
+  handlePageChange,
+}: SearchMovieResultProps) => {
+  return (
+    <div className={`${loading ? "skeleton w-52 h-12" : ""}`}>
+      <ul>
+        {data &&
+          data.results.map((result) => (
+            <li key={result.id}>
+              <Link to="/">{result.name}</Link>
+            </li>
+          ))}
+      </ul>
+      <SearchPagination
+        currentPage={currentPage}
+        data={data}
+        handlePageChange={handlePageChange}
+      />
+    </div>
+  );
+};
 
 export default SearchKeywordResult;