Remove logo.png and refactor Search component: replace MovieCard with MovieList for improved movie display, enhance responsiveness, and streamline search results presentation.

src/components/organisms/Navbar/components/Search/index.tsx

@@ -4,11 +4,11 @@ import { useState } from "react";
 import { SearchResult } from "@/lib/tmdb/types";
 import { TMDB } from "@/lib/tmdb";
 import { SearchInput } from "@/components/atoms/SearchInput";
-import { MovieCard } from "@/components/atoms/MovieCard";
 import { useKeyListener } from "@/hooks/useKeyListener";
 import { useRef } from "react";
 import { useOutsideClick } from "@/hooks/useOutsideClick";
 import { Button } from "@/components/atoms/Button";
+import { MovieList } from "@/components/molecules/MovieList";
 
 export const Search = () => {
   const ref = useRef<HTMLDivElement>(null);
@@ -59,40 +59,35 @@ export const Search = () => {
           <div className="container" ref={ref}>
             <div className="text-center">
               <SearchInput
-                className="scale-200"
+                className="lg:scale-200"
                 onChange={handleSearch}
                 placeholder="Search for a movie"
                 autoFocus={true}
               />
             </div>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mt-24">
-              {results && (
-                <div className="col-span-full">
-                  <p className="text-white">{total_results} movies found</p>
-                </div>
-              )}
-              {results?.slice(0, 5).map((result) => (
-                <MovieCard
-                  layout="zeus"
-                  key={result.id}
-                  id={result.id}
-                  title={result.title}
-                  releaseDate={result.release_date}
-                  popularity={result.popularity}
-                  overview={result.overview}
-                  imagePath={result.poster_path}
-                  seen={false}
-                  favorite={false}
-                />
-              ))}
-              {total_results > 5 && (
-                <div className="col-span-full text-center">
-                  <Button href={`/search?s=${query}`} onClick={handleClose}>
-                    Show more
-                  </Button>
-                </div>
-              )}
-            </div>
+            {results && (
+              <div className="col-span-full">
+                <p className="text-white">{total_results} movies found</p>
+              </div>
+            )}
+            {results && (
+              <MovieList
+                overrideMovies={results.slice(0, 5).map((m) => ({
+                  ...m,
+                  favorite: false,
+                  seen: false,
+                  genre_ids: JSON.stringify(m.genre_ids),
+                }))}
+                fluid
+              />
+            )}
+            {total_results > 5 && (
+              <div className="col-span-full text-center">
+                <Button href={`/search?s=${query}`} onClick={handleClose}>
+                  Show more
+                </Button>
+              </div>
+            )}
           </div>
         </div>
       )}