111 lines
4.0 KiB
TypeScript
111 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import { SearchResult } from "@/lib/tmdb/types";
|
|
import { MovieCard } from "@/components/atoms/MovieCard";
|
|
import { FC, useState } from "react";
|
|
import { FaChevronLeft, FaChevronRight, FaStar } from "react-icons/fa";
|
|
|
|
type Props = {
|
|
movies: SearchResult;
|
|
};
|
|
|
|
export const RecommendedMovies: FC<Props> = ({ movies }) => {
|
|
const [currentPage, setCurrentPage] = useState(0);
|
|
const moviesPerPage = 4;
|
|
const totalPages = Math.ceil(movies.results.length / moviesPerPage);
|
|
|
|
if (!movies.results.length) return null;
|
|
|
|
const currentMovies = movies.results.slice(
|
|
currentPage * moviesPerPage,
|
|
(currentPage + 1) * moviesPerPage
|
|
);
|
|
|
|
const nextPage = () => {
|
|
setCurrentPage((prev) => (prev + 1) % totalPages);
|
|
};
|
|
|
|
const prevPage = () => {
|
|
setCurrentPage((prev) => (prev - 1 + totalPages) % totalPages);
|
|
};
|
|
|
|
return (
|
|
<section className="py-16 bg-gradient-to-br from-slate-900/50 to-slate-800/50">
|
|
<div className="px-6 lg:px-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="flex items-center justify-between mb-8">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 rounded-lg bg-gradient-to-r from-yellow-500 to-orange-500">
|
|
<FaStar className="text-white" size={20} />
|
|
</div>
|
|
<h2 className="text-3xl font-bold bg-gradient-to-r from-yellow-400 to-orange-400 bg-clip-text text-transparent">
|
|
Rekomendowane filmy
|
|
</h2>
|
|
</div>
|
|
|
|
{totalPages > 1 && (
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={prevPage}
|
|
className="p-3 rounded-full bg-gradient-to-r from-yellow-500/20 to-orange-500/20 hover:from-yellow-500/30 hover:to-orange-500/30 text-white transition-all duration-300 border border-yellow-400/30"
|
|
>
|
|
<FaChevronLeft size={16} />
|
|
</button>
|
|
<button
|
|
onClick={nextPage}
|
|
className="p-3 rounded-full bg-gradient-to-r from-yellow-500/20 to-orange-500/20 hover:from-yellow-500/30 hover:to-orange-500/30 text-white transition-all duration-300 border border-yellow-400/30"
|
|
>
|
|
<FaChevronRight size={16} />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
{currentMovies.map((movie) => (
|
|
<MovieCard
|
|
key={movie.id}
|
|
layout="aurora"
|
|
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}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{totalPages > 1 && (
|
|
<div className="flex justify-center mt-8">
|
|
<div className="flex gap-2">
|
|
{Array.from({ length: totalPages }, (_, i) => (
|
|
<button
|
|
key={i}
|
|
onClick={() => setCurrentPage(i)}
|
|
className={`w-3 h-3 rounded-full transition-all duration-300 ${
|
|
currentPage === i
|
|
? "bg-gradient-to-r from-yellow-500 to-orange-500 scale-110"
|
|
: "bg-white/30 hover:bg-white/50"
|
|
}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|