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

55
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,40 +59,35 @@ 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 && (
{results?.slice(0, 5).map((result) => ( <MovieList
<MovieCard overrideMovies={results.slice(0, 5).map((m) => ({
layout="zeus" ...m,
key={result.id} favorite: false,
id={result.id} seen: false,
title={result.title} genre_ids: JSON.stringify(m.genre_ids),
releaseDate={result.release_date} }))}
popularity={result.popularity} fluid
overview={result.overview} />
imagePath={result.poster_path} )}
seen={false} {total_results > 5 && (
favorite={false} <div className="col-span-full text-center">
/> <Button href={`/search?s=${query}`} onClick={handleClose}>
))} Show more
{total_results > 5 && ( </Button>
<div className="col-span-full text-center"> </div>
<Button href={`/search?s=${query}`} onClick={handleClose}> )}
Show more
</Button>
</div>
)}
</div>
</div> </div>
</div> </div>
)} )}