Add movie gallery, similar movies, and recommended movies components: integrate MovieGallery, SimilarMovies, and RecommendedMovies into the film detail page for enhanced user engagement. Update AuroraLayout to improve button visibility and interaction.

2025-08-17 20:06:51 +02:00
parent 61395ca1ec
commit dc0d7693c1
5 changed files with 449 additions and 11 deletions
--- a/src/components/molecules/SimilarMovies/index.tsx
+++ b/src/components/molecules/SimilarMovies/index.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import { SearchResult } from "@/lib/tmdb/types";
+import { MovieCard } from "@/components/atoms/MovieCard";
+import { FC, useState } from "react";
+import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
+
+type Props = {
+  movies: SearchResult;
+};
+
+export const SimilarMovies: 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">
+      <div className="px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto">
+          <div className="flex items-center justify-between mb-8">
+            <h2 className="text-3xl font-bold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
+              Podobne filmy
+            </h2>
+
+            {totalPages > 1 && (
+              <div className="flex gap-2">
+                <button
+                  onClick={prevPage}
+                  className="p-3 rounded-full bg-white/10 hover:bg-white/20 text-white transition-all duration-300 border border-white/20 hover:border-purple-400/50"
+                >
+                  <FaChevronLeft size={16} />
+                </button>
+                <button
+                  onClick={nextPage}
+                  className="p-3 rounded-full bg-white/10 hover:bg-white/20 text-white transition-all duration-300 border border-white/20 hover:border-purple-400/50"
+                >
+                  <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-purple-500 to-pink-500 scale-110"
+                        : "bg-white/30 hover:bg-white/50"
+                    }`}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};