feat: enhance Carousel component with heading, icon, and color options; update movie sections in Odkrywaj page for improved UI consistency
This commit is contained in:
Norbert Maciaszek
parent
f498f2d217
commit
5a6ee42e28
|
|
@ -7,6 +7,13 @@ import {
|
|||
import { Hero } from "@/components/organisms/Hero";
|
||||
import { Carousel } from "@/components/molecules/Carousel";
|
||||
import { MovieCard } from "@/components/atoms/MovieCard";
|
||||
import {
|
||||
FaCalendar,
|
||||
FaChartLine,
|
||||
FaFire,
|
||||
FaPlay,
|
||||
FaStar,
|
||||
} from "react-icons/fa";
|
||||
|
||||
// 12 hours
|
||||
export const revalidate = 43200;
|
||||
|
|
@ -42,8 +49,7 @@ export default async function Home() {
|
|||
|
||||
<div className="container py-16 space-y-16">
|
||||
<section>
|
||||
<h2 className="text-3xl font-bold text-white mb-8">Teraz w kinach</h2>
|
||||
<Carousel>
|
||||
<Carousel heading="Teraz w kinach" icon={<FaPlay />}>
|
||||
{nowPlayingMovies.map((movie) => (
|
||||
<MovieCard
|
||||
key={movie.id}
|
||||
|
|
@ -56,10 +62,11 @@ export default async function Home() {
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-3xl font-bold text-white mb-8">
|
||||
Nadchodzące filmy
|
||||
</h2>
|
||||
<Carousel>
|
||||
<Carousel
|
||||
heading="Nadchodzące filmy"
|
||||
icon={<FaCalendar />}
|
||||
colors="blue"
|
||||
>
|
||||
{upcomingMovies.map((movie) => (
|
||||
<MovieCard
|
||||
key={movie.id}
|
||||
|
|
@ -72,10 +79,7 @@ export default async function Home() {
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-3xl font-bold text-white mb-8">
|
||||
Popularne filmy
|
||||
</h2>
|
||||
<Carousel>
|
||||
<Carousel heading="Popularne filmy" icon={<FaFire />} colors="red">
|
||||
{popularMovies.map((movie) => (
|
||||
<MovieCard
|
||||
key={movie.id}
|
||||
|
|
@ -88,8 +92,7 @@ export default async function Home() {
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-3xl font-bold text-white mb-8">Trendy dnia</h2>
|
||||
<Carousel>
|
||||
<Carousel heading="Trendy dnia" icon={<FaChartLine />} colors="green">
|
||||
{trendingMovies.map((movie) => (
|
||||
<MovieCard
|
||||
key={movie.id}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export const BackButton: FC<Props> = ({ label = "Powrót" }) => {
|
|||
return (
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="flex items-center gap-3 text-white hover:text-purple-300 transition-colors group"
|
||||
className="flex items-center gap-3 text-white hover:text-purple-300 transition-colors group cursor-pointer"
|
||||
>
|
||||
<div className="p-2 rounded-full bg-black/30 group-hover:bg-purple-600/30 transition-colors">
|
||||
<FaArrowLeft size={20} />
|
||||
|
|
|
|||
|
|
@ -6,174 +6,143 @@ type CarouselOptions = {
|
|||
itemsPerView?: number;
|
||||
itemsPerViewMobile?: number;
|
||||
itemsPerViewTablet?: number;
|
||||
gap?: number;
|
||||
showArrows?: boolean;
|
||||
showDots?: boolean;
|
||||
autoScroll?: boolean;
|
||||
autoScrollInterval?: number;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
children: ReactNode[];
|
||||
options?: CarouselOptions;
|
||||
className?: string;
|
||||
heading?: string;
|
||||
icon?: ReactNode;
|
||||
colors?: keyof typeof colorsMap;
|
||||
};
|
||||
|
||||
export const Carousel: FC<Props> = ({
|
||||
children,
|
||||
options = {},
|
||||
className = "",
|
||||
heading,
|
||||
icon,
|
||||
colors = "yellow",
|
||||
}) => {
|
||||
const {
|
||||
itemsPerView = 4,
|
||||
itemsPerViewMobile = 2,
|
||||
itemsPerViewTablet = 3,
|
||||
gap = 20,
|
||||
showArrows = true,
|
||||
showDots = true,
|
||||
autoScroll = false,
|
||||
autoScrollInterval = 5000,
|
||||
itemsPerViewMobile = 1,
|
||||
itemsPerViewTablet = 2,
|
||||
} = options;
|
||||
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const [isTransitioning, setIsTransitioning] = useState(false);
|
||||
const [itemsVisible, setItemsVisible] = useState(itemsPerView);
|
||||
const carouselRef = useRef<HTMLDivElement>(null);
|
||||
const [perView, setPerView] = useState(itemsPerView);
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const totalPages = Math.ceil(children.length / perView);
|
||||
|
||||
const totalItems = children.length;
|
||||
const maxIndex = Math.max(0, totalItems - itemsVisible);
|
||||
|
||||
// Responsive items per view.
|
||||
useEffect(() => {
|
||||
const updateItemsPerView = () => {
|
||||
if (window.innerWidth < 640) {
|
||||
setItemsVisible(itemsPerViewMobile);
|
||||
} else if (window.innerWidth < 1024) {
|
||||
setItemsVisible(itemsPerViewTablet);
|
||||
const handleResize = () => {
|
||||
if (window.matchMedia("(min-width: 1024px)").matches) {
|
||||
setPerView(itemsPerView);
|
||||
} else if (window.matchMedia("(min-width: 768px)").matches) {
|
||||
setPerView(itemsPerViewTablet);
|
||||
} else {
|
||||
setItemsVisible(itemsPerView);
|
||||
setPerView(itemsPerViewMobile);
|
||||
}
|
||||
};
|
||||
|
||||
updateItemsPerView();
|
||||
window.addEventListener("resize", updateItemsPerView);
|
||||
return () => window.removeEventListener("resize", updateItemsPerView);
|
||||
}, [itemsPerView, itemsPerViewMobile, itemsPerViewTablet]);
|
||||
handleResize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
|
||||
const nextSlide = useCallback(() => {
|
||||
if (isTransitioning) return;
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
setIsTransitioning(true);
|
||||
setCurrentIndex((prev) => {
|
||||
return Math.min(prev + itemsVisible, maxIndex);
|
||||
});
|
||||
|
||||
setTimeout(() => setIsTransitioning(false), 300);
|
||||
}, [isTransitioning, totalItems, maxIndex]);
|
||||
|
||||
const prevSlide = useCallback(() => {
|
||||
if (isTransitioning) return;
|
||||
|
||||
setIsTransitioning(true);
|
||||
setCurrentIndex((prev) => {
|
||||
return Math.max(prev - itemsVisible, 0);
|
||||
});
|
||||
|
||||
setTimeout(() => setIsTransitioning(false), 300);
|
||||
}, [isTransitioning, totalItems]);
|
||||
|
||||
const goToSlide = useCallback(
|
||||
(index: number) => {
|
||||
if (isTransitioning || index === currentIndex) return;
|
||||
|
||||
setIsTransitioning(true);
|
||||
setCurrentIndex(index);
|
||||
setTimeout(() => setIsTransitioning(false), 300);
|
||||
},
|
||||
[currentIndex, isTransitioning]
|
||||
);
|
||||
|
||||
// Auto-scroll functionality.
|
||||
useEffect(() => {
|
||||
if (!autoScroll || totalItems <= itemsVisible) return;
|
||||
|
||||
const interval = setInterval(nextSlide, autoScrollInterval);
|
||||
return () => clearInterval(interval);
|
||||
}, [autoScroll, autoScrollInterval, nextSlide, totalItems, itemsVisible]);
|
||||
|
||||
// Calculate transform for slide positioning.
|
||||
const getTransform = () => {
|
||||
return `translateX(-${currentIndex * (100 / itemsVisible)}%)`;
|
||||
const nextPage = () => {
|
||||
setCurrentPage((prev) => (prev + 1) % totalPages);
|
||||
};
|
||||
|
||||
const canGoPrev = currentIndex > 0;
|
||||
const canGoNext = currentIndex < maxIndex;
|
||||
const prevPage = () => {
|
||||
setCurrentPage((prev) => (prev - 1 + totalPages) % totalPages);
|
||||
};
|
||||
|
||||
const currentMovies = children.slice(
|
||||
currentPage * perView,
|
||||
(currentPage + 1) * perView
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={`relative ${className}`}>
|
||||
{/* Carousel container */}
|
||||
<div className="overflow-hidden" ref={carouselRef}>
|
||||
<div
|
||||
className="flex transition-transform duration-300 ease-out"
|
||||
style={{
|
||||
transform: getTransform(),
|
||||
marginRight: `-${gap}px`,
|
||||
}}
|
||||
>
|
||||
{children.map((child, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex-shrink-0 [&_article]:h-full"
|
||||
style={{
|
||||
paddingRight: `${gap}px`,
|
||||
width: `${100 / itemsVisible}%`,
|
||||
}}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
{heading && (
|
||||
<div className="flex items-center gap-3">
|
||||
{icon && (
|
||||
<div className={`p-2 rounded-lg ${colorsMap[colors]}`}>
|
||||
{icon}
|
||||
</div>
|
||||
)}
|
||||
<h2
|
||||
className={`text-3xl font-bold ${colorsMap[colors]} bg-clip-text text-transparent`}
|
||||
>
|
||||
{child}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{heading}
|
||||
</h2>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{totalPages > 1 && (
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={prevPage}
|
||||
className={`cursor-pointer p-3 rounded-full ${colorsMap[colors]} text-white transition-all duration-300`}
|
||||
>
|
||||
<FaChevronLeft size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={nextPage}
|
||||
className={`cursor-pointer p-3 rounded-full ${colorsMap[colors]} text-white transition-all duration-300 `}
|
||||
>
|
||||
<FaChevronRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Navigation arrows */}
|
||||
{showArrows && totalItems > itemsVisible && (
|
||||
<>
|
||||
<button
|
||||
onClick={prevSlide}
|
||||
disabled={!canGoPrev || isTransitioning}
|
||||
className="absolute left-2 top-1/2 -translate-y-1/2 z-10 p-4 bg-primary/50 hover:bg-primary cursor-pointer text-white rounded-full transition-all disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
>
|
||||
<FaChevronLeft size={20} />
|
||||
</button>
|
||||
<button
|
||||
onClick={nextSlide}
|
||||
disabled={!canGoNext || isTransitioning}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 z-10 p-4 bg-primary/50 hover:bg-primary cursor-pointer text-white rounded-full transition-all disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
>
|
||||
<FaChevronRight size={20} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
<div
|
||||
className="grid gap-6 grid-cols-[repeat(var(--i-sm),1fr)] md:grid-cols-[repeat(var(--i-md),1fr)] lg:grid-cols-[repeat(var(--i-lg),1fr)]"
|
||||
style={
|
||||
{
|
||||
"--i-sm": itemsPerViewMobile,
|
||||
"--i-md": itemsPerViewTablet,
|
||||
"--i-lg": itemsPerView,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
{currentMovies}
|
||||
</div>
|
||||
|
||||
{/* Dot indicators */}
|
||||
{showDots && totalItems > itemsVisible && (
|
||||
<div className="flex justify-center mt-4 gap-2">
|
||||
{Array.from({ length: Math.ceil(totalItems / itemsVisible) }).map(
|
||||
(_, index) => (
|
||||
{totalPages > 1 && (
|
||||
<div className="flex justify-center mt-8">
|
||||
<div className="flex gap-2">
|
||||
{Array.from({ length: totalPages }, (_, i) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => goToSlide(index * itemsVisible)}
|
||||
disabled={isTransitioning}
|
||||
className={`w-2 h-2 rounded-full transition-all duration-300 disabled:cursor-not-allowed cursor-pointer ${
|
||||
Math.floor(currentIndex / itemsVisible) === index
|
||||
? "bg-secondary scale-125"
|
||||
: "bg-white/30 hover:bg-secondary/50"
|
||||
key={i}
|
||||
onClick={() => setCurrentPage(i)}
|
||||
className={`cursor-pointer w-3 h-3 rounded-full transition-all duration-300 ${
|
||||
currentPage === i
|
||||
? `${colorsMap[colors]} scale-110`
|
||||
: "bg-white/30 hover:bg-white/50"
|
||||
}`}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const colorsMap = {
|
||||
yellow: "bg-gradient-to-r from-yellow-400 to-orange-400",
|
||||
blue: "bg-gradient-to-r from-blue-400 to-purple-400",
|
||||
green: "bg-gradient-to-r from-green-400 to-teal-400",
|
||||
red: "bg-gradient-to-r from-red-400 to-pink-400",
|
||||
purple: "bg-gradient-to-r from-purple-400 to-pink-400",
|
||||
orange: "bg-gradient-to-r from-orange-400 to-yellow-400",
|
||||
pink: "bg-gradient-to-r from-pink-400 to-purple-400",
|
||||
teal: "bg-gradient-to-r from-teal-400 to-green-400",
|
||||
gray: "bg-gradient-to-r from-gray-400 to-gray-400",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,68 +1,27 @@
|
|||
"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";
|
||||
import { FC } from "react";
|
||||
import { FaStar } from "react-icons/fa";
|
||||
import { Carousel } from "../Carousel";
|
||||
|
||||
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) => (
|
||||
<Carousel
|
||||
heading="Rekomendowane filmy"
|
||||
icon={<FaStar />}
|
||||
iconColor="bg-gradient-to-r from-yellow-500 to-orange-500"
|
||||
>
|
||||
{movies.results.map((movie) => (
|
||||
<MovieCard
|
||||
key={movie.id}
|
||||
layout="aurora"
|
||||
|
|
@ -84,25 +43,7 @@ export const RecommendedMovies: FC<Props> = ({ movies }) => {
|
|||
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>
|
||||
)}
|
||||
</Carousel>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@ export const Search = () => {
|
|||
const pathname = usePathname();
|
||||
|
||||
useEffect(() => {
|
||||
console.log("pathname", pathname);
|
||||
setIsSearchOpen(false);
|
||||
}, [pathname]);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue