Add Hero component for movie carousel: implement auto-rotation, navigation controls, and movie details display, including add/remove functionality for user favorites.
This commit is contained in:
Norbert Maciaszek
parent
25e5b90ee8
commit
a230a4cf45
|
|
@ -0,0 +1,248 @@
|
||||||
|
"use client";
|
||||||
|
import { FC, useState, useEffect, useCallback } from "react";
|
||||||
|
import { Movie } from "@/types/global";
|
||||||
|
import {
|
||||||
|
FaPlus,
|
||||||
|
FaFire,
|
||||||
|
FaChevronLeft,
|
||||||
|
FaChevronRight,
|
||||||
|
FaMinus,
|
||||||
|
} from "react-icons/fa";
|
||||||
|
import { RiCalendarCheckLine, RiCalendarScheduleLine } from "react-icons/ri";
|
||||||
|
import { useGlobalStore } from "@/app/store/globalStore";
|
||||||
|
import { addMovie, deleteMovie } from "@/lib/db";
|
||||||
|
import { ReadMore } from "@/components/atoms/ReadMore";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
movies: Movie[];
|
||||||
|
preheading?: string;
|
||||||
|
autoRotate?: boolean;
|
||||||
|
rotateInterval?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Hero: FC<Props> = ({
|
||||||
|
movies,
|
||||||
|
preheading,
|
||||||
|
autoRotate = true,
|
||||||
|
rotateInterval = 10000,
|
||||||
|
}) => {
|
||||||
|
const [currentIndex, setCurrentIndex] = useState(0);
|
||||||
|
const [isTransitioning, setIsTransitioning] = useState(false);
|
||||||
|
|
||||||
|
const {
|
||||||
|
movies: storedMovies,
|
||||||
|
addMovie: addMovieToStore,
|
||||||
|
deleteMovie: deleteMovieInStore,
|
||||||
|
} = useGlobalStore();
|
||||||
|
|
||||||
|
const currentMovie = movies[currentIndex];
|
||||||
|
|
||||||
|
if (!currentMovie) return null;
|
||||||
|
|
||||||
|
const {
|
||||||
|
id,
|
||||||
|
title,
|
||||||
|
overview,
|
||||||
|
backdrop_path,
|
||||||
|
poster_path,
|
||||||
|
release_date,
|
||||||
|
popularity,
|
||||||
|
vote_average,
|
||||||
|
} = currentMovie;
|
||||||
|
|
||||||
|
const alreadyInStore = storedMovies.find((m) => m.id === id);
|
||||||
|
const isReleased = new Date(release_date) < new Date();
|
||||||
|
const releaseDate = new Date(release_date);
|
||||||
|
|
||||||
|
const nextSlide = useCallback(() => {
|
||||||
|
if (isTransitioning) return;
|
||||||
|
setIsTransitioning(true);
|
||||||
|
setTimeout(() => {
|
||||||
|
setCurrentIndex((prev) => (prev + 1) % movies.length);
|
||||||
|
setIsTransitioning(false);
|
||||||
|
}, 500);
|
||||||
|
}, [movies.length, isTransitioning]);
|
||||||
|
|
||||||
|
const prevSlide = useCallback(() => {
|
||||||
|
if (isTransitioning) return;
|
||||||
|
setIsTransitioning(true);
|
||||||
|
setTimeout(() => {
|
||||||
|
setCurrentIndex((prev) => (prev - 1 + movies.length) % movies.length);
|
||||||
|
setIsTransitioning(false);
|
||||||
|
}, 500);
|
||||||
|
}, [movies.length, isTransitioning]);
|
||||||
|
|
||||||
|
const goToSlide = useCallback(
|
||||||
|
(index: number) => {
|
||||||
|
if (isTransitioning || index === currentIndex) return;
|
||||||
|
setIsTransitioning(true);
|
||||||
|
setTimeout(() => {
|
||||||
|
setCurrentIndex(index);
|
||||||
|
setIsTransitioning(false);
|
||||||
|
}, 500);
|
||||||
|
},
|
||||||
|
[currentIndex, isTransitioning]
|
||||||
|
);
|
||||||
|
|
||||||
|
// Auto-rotate functionality.
|
||||||
|
useEffect(() => {
|
||||||
|
if (!autoRotate || movies.length <= 1) return;
|
||||||
|
|
||||||
|
const interval = setInterval(nextSlide, rotateInterval);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [autoRotate, rotateInterval, nextSlide, movies.length]);
|
||||||
|
|
||||||
|
const handleAdd = async () => {
|
||||||
|
await addMovie(currentMovie);
|
||||||
|
addMovieToStore(currentMovie);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemove = async () => {
|
||||||
|
await deleteMovie(id);
|
||||||
|
deleteMovieInStore(id);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="relative min-h-[70vh] flex items-center overflow-hidden pt-10 pb-20">
|
||||||
|
{/* Background carousel */}
|
||||||
|
<div className="absolute inset-0">
|
||||||
|
{movies.map((movie, index) => (
|
||||||
|
<div
|
||||||
|
key={movie.id}
|
||||||
|
className={`absolute inset-0 transition-opacity duration-500 ${
|
||||||
|
index === currentIndex ? "opacity-100" : "opacity-0"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={`http://image.tmdb.org/t/p/w1280${backdrop_path}`}
|
||||||
|
alt={movie.title}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/50 to-transparent" />
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-black/30" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation arrows */}
|
||||||
|
{movies.length > 1 && (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={prevSlide}
|
||||||
|
disabled={isTransitioning}
|
||||||
|
className="absolute left-4 top-1/2 -translate-y-1/2 z-20 p-3 bg-black/50 hover:bg-black/70 text-white rounded-full transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
<FaChevronLeft size={20} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={nextSlide}
|
||||||
|
disabled={isTransitioning}
|
||||||
|
className="absolute right-4 top-1/2 -translate-y-1/2 z-20 p-3 bg-black/50 hover:bg-black/70 text-white rounded-full transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
<FaChevronRight size={20} />
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Content with fade transitions */}
|
||||||
|
<div className="container relative z-10">
|
||||||
|
<div
|
||||||
|
className={`flex flex-col lg:flex-row items-center gap-8 lg:gap-12 transition-opacity duration-500 ${
|
||||||
|
isTransitioning ? "opacity-0" : "opacity-100"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{/* Poster */}
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<img
|
||||||
|
src={`http://image.tmdb.org/t/p/w500${poster_path}`}
|
||||||
|
alt={title}
|
||||||
|
className="w-64 h-96 object-cover rounded-lg shadow-2xl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Movie details */}
|
||||||
|
<div className="flex-1 text-center lg:text-left">
|
||||||
|
{preheading && (
|
||||||
|
<h3 className="font-bold text-white leading-tight mb-2">
|
||||||
|
{preheading}
|
||||||
|
</h3>
|
||||||
|
)}
|
||||||
|
<h2 className="text-4xl lg:text-6xl font-bold text-white mb-4 leading-tight">
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Movie meta info */}
|
||||||
|
<div className="flex flex-wrap items-center justify-center lg:justify-start gap-4 mb-6 text-white/80">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span
|
||||||
|
className={`flex items-center gap-1 text-sm ${
|
||||||
|
isReleased ? "text-green-400" : "text-yellow-400"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{isReleased ? (
|
||||||
|
<RiCalendarCheckLine />
|
||||||
|
) : (
|
||||||
|
<RiCalendarScheduleLine />
|
||||||
|
)}
|
||||||
|
{releaseDate.toLocaleDateString("pl-PL", {
|
||||||
|
day: "numeric",
|
||||||
|
month: "long",
|
||||||
|
year: "numeric",
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-1 text-sm">
|
||||||
|
<FaFire className="text-orange-400" />
|
||||||
|
<span>{popularity.toFixed(1)}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-1 text-sm">
|
||||||
|
<span className="text-yellow-400">★</span>
|
||||||
|
<span>{vote_average.toFixed(1)}/10</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Overview */}
|
||||||
|
<div className="text-lg lg:text-xl text-white/90 mb-8 max-w-2xl leading-relaxed">
|
||||||
|
<ReadMore text={overview} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action buttons */}
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
|
||||||
|
<button
|
||||||
|
onClick={alreadyInStore ? handleRemove : handleAdd}
|
||||||
|
className={`flex items-center justify-center gap-3 px-8 py-3 rounded-lg font-semibold text-lg text-white transition-colors cursor-pointer ${
|
||||||
|
alreadyInStore
|
||||||
|
? "bg-red-500 hover:bg-red-600"
|
||||||
|
: "bg-primary hover:bg-primary/80"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{alreadyInStore ? <FaMinus /> : <FaPlus />}
|
||||||
|
{alreadyInStore ? "Usuń z listy" : "Dodaj do listy"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Dot indicators */}
|
||||||
|
{movies.length > 1 && (
|
||||||
|
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-20 flex gap-2">
|
||||||
|
{movies.map((_, index) => (
|
||||||
|
<button
|
||||||
|
key={index}
|
||||||
|
onClick={() => goToSlide(index)}
|
||||||
|
disabled={isTransitioning}
|
||||||
|
className={`w-3 h-3 rounded-full transition-all duration-300 disabled:cursor-not-allowed cursor-pointer ${
|
||||||
|
index === currentIndex
|
||||||
|
? "bg-secondary scale-125"
|
||||||
|
: "bg-secondary/50 hover:bg-secondary/70"
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue