gitadmin
/
moviebox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Norbert Maciaszek 2025-08-11 23:52:38 +02:00
parent 186e98262b
commit 488b79e4b5
2 changed files with 25 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 32 KiB

29
src/components/organisms/Navbar/components/Search/index.tsx
View File

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