moviebox/src/components/molecules/RecommendedMovies/index.tsx

55 lines
1.7 KiB
TypeScript

"use client";
import { SearchResult } from "@/lib/tmdb/types";
import { MovieCard } from "@/components/atoms/MovieCard";
import { FC } from "react";
import { FaStar } from "react-icons/fa";
import { Carousel } from "../Carousel";
type Props = {
movies: SearchResult;
};
export const RecommendedMovies: FC<Props> = ({ movies }) => {
if (!movies.results.length) return null;
return (
<section className="blockp bg-gradient-to-br from-slate-900/50 to-slate-800/50">
<div className="container">
<Carousel
heading="Rekomendowane filmy"
icon={<FaStar />}
colors="yellow"
>
{movies.results
.sort(
(a, b) =>
new Date(b.release_date).getTime() -
new Date(a.release_date).getTime()
)
.map((movie) => (
<MovieCard
key={movie.id}
id={movie.id}
title={movie.title}
overview={movie.overview}
poster_path={movie.poster_path}
release_date={movie.release_date}
vote_average={movie.vote_average}
popularity={movie.popularity}
adult={movie.adult}
backdrop_path={movie.backdrop_path}
genre_ids={movie.genre_ids.join(",")}
original_language={movie.original_language}
original_title={movie.original_title}
video={movie.video}
vote_count={movie.vote_count}
seen={false}
favorite={false}
/>
))}
</Carousel>
</div>
</section>
);
};