Add SearchMovies component for movie search functionality, integrating TMDB API; update Home page to include search feature.
This commit is contained in:
37
src/components/molecules/SearchMovies/index.tsx
Normal file
37
src/components/molecules/SearchMovies/index.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
"use client";
|
||||
import { SearchInput } from "@/components/atoms/SearchInput";
|
||||
import { useState } from "react";
|
||||
import { TMDB } from "@/lib/tmdb";
|
||||
import { MovieCard } from "@/components/atoms/MovieCard";
|
||||
import { SearchResult } from "@/lib/tmdb/types";
|
||||
|
||||
export const SearchMovies = () => {
|
||||
const [results, setResults] = useState<SearchResult["results"]>([]);
|
||||
|
||||
const handleSearch = async (query: string) => {
|
||||
const data = await TMDB.search(query);
|
||||
setResults(data.results);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row justify-center">
|
||||
<div className="col-5">
|
||||
<SearchInput onChange={handleSearch} />
|
||||
</div>
|
||||
</div>
|
||||
<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}
|
||||
title={result.title}
|
||||
releaseDate={result.release_date}
|
||||
popularity={result.popularity}
|
||||
overview={result.overview}
|
||||
imagePath={result.poster_path}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user