Refactor Dropdown component: integrate useOutsideClick for improved click handling, manage dropdown state with useRef and useState, and enhance button functionality for better user experience.

src/components/molecules/SearchMovies/index.tsx

@@ -6,6 +6,7 @@ import { SearchResult } from "@/lib/tmdb/types";
 import { FC } from "react";
 import { useEffect } from "react";
 import { Pagination } from "@/components/atoms/Pagination";
+import { MovieList } from "../MovieList";
 
 type Props = {
   query: string;
@@ -44,18 +45,16 @@ export const SearchList: FC<Props> = ({ query }) => {
         <p className="text-sm text-gray-500">
           {total_results} movies found for your search
         </p>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mt-8">
-          {results?.map((result) => (
-            <MovieCard
-              key={result.id}
-              layout="zeus"
-              {...result}
-              genre_ids={result.genre_ids.join(",")}
-              seen={false}
-              favorite={false}
-            />
-          ))}
-        </div>
+
+        <MovieList
+          overrideMovies={results?.map((m) => ({
+            ...m,
+            favorite: false,
+            seen: false,
+            genre_ids: JSON.stringify(m.genre_ids),
+          }))}
+          fluid
+        />
         <Pagination
           totalPages={total_pages}
           currentPage={page}