feat: enhance Carousel component with heading, icon, and color options; update movie sections in Odkrywaj page for improved UI consistency

src/app/odkrywaj/page.tsx

@@ -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 heading="Teraz w kinach" icon={<FaPlay />}>
-          <Carousel>
             {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">
+          <Carousel
-            Nadchodzące filmy
+            heading="Nadchodzące filmy"
-          </h2>
+            icon={<FaCalendar />}
-          <Carousel>
+            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">
+          <Carousel heading="Popularne filmy" icon={<FaFire />} colors="red">
-            Popularne filmy
-          </h2>
-          <Carousel>
             {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 heading="Trendy dnia" icon={<FaChartLine />} colors="green">
-          <Carousel>
             {trendingMovies.map((movie) => (
               <MovieCard
                 key={movie.id}

src/components/atoms/BackButton/index.tsx

@@ -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} />

src/components/molecules/Carousel/index.tsx

@@ -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,
+    itemsPerViewMobile = 1,
-    itemsPerViewTablet = 3,
+    itemsPerViewTablet = 2,
-    gap = 20,
-    showArrows = true,
-    showDots = true,
-    autoScroll = false,
-    autoScrollInterval = 5000,
   } = options;
 
-  const [currentIndex, setCurrentIndex] = useState(0);
+  const [perView, setPerView] = useState(itemsPerView);
-  const [isTransitioning, setIsTransitioning] = useState(false);
+  const [currentPage, setCurrentPage] = useState(0);
-  const [itemsVisible, setItemsVisible] = useState(itemsPerView);
+  const totalPages = Math.ceil(children.length / perView);
-  const carouselRef = useRef<HTMLDivElement>(null);
 
-  const totalItems = children.length;
-  const maxIndex = Math.max(0, totalItems - itemsVisible);
-
-  // Responsive items per view.
   useEffect(() => {
-    const updateItemsPerView = () => {
+    const handleResize = () => {
-      if (window.innerWidth < 640) {
+      if (window.matchMedia("(min-width: 1024px)").matches) {
-        setItemsVisible(itemsPerViewMobile);
+        setPerView(itemsPerView);
-      } else if (window.innerWidth < 1024) {
+      } else if (window.matchMedia("(min-width: 768px)").matches) {
-        setItemsVisible(itemsPerViewTablet);
+        setPerView(itemsPerViewTablet);
       } else {
-        setItemsVisible(itemsPerView);
+        setPerView(itemsPerViewMobile);
       }
     };
 
-    updateItemsPerView();
+    handleResize();
-    window.addEventListener("resize", updateItemsPerView);
+    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", updateItemsPerView);
-  }, [itemsPerView, itemsPerViewMobile, itemsPerViewTablet]);
 
-  const nextSlide = useCallback(() => {
+    return () => window.removeEventListener("resize", handleResize);
-    if (isTransitioning) return;
+  }, []);
 
-    setIsTransitioning(true);
+  const nextPage = () => {
-    setCurrentIndex((prev) => {
+    setCurrentPage((prev) => (prev + 1) % totalPages);
-      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 canGoPrev = currentIndex > 0;
+  const prevPage = () => {
-  const canGoNext = currentIndex < maxIndex;
+    setCurrentPage((prev) => (prev - 1 + totalPages) % totalPages);
+  };
+
+  const currentMovies = children.slice(
+    currentPage * perView,
+    (currentPage + 1) * perView
+  );
 
   return (
-    <div className={`relative ${className}`}>
+    <div>
-      {/* Carousel container */}
+      <div className="flex items-center justify-between mb-8">
-      <div className="overflow-hidden" ref={carouselRef}>
+        {heading && (
-        <div
+          <div className="flex items-center gap-3">
-          className="flex transition-transform duration-300 ease-out"
+            {icon && (
-          style={{
+              <div className={`p-2 rounded-lg ${colorsMap[colors]}`}>
-            transform: getTransform(),
+                {icon}
-            marginRight: `-${gap}px`,
-          }}
-        >
-          {children.map((child, index) => (
-            <div
-              key={index}
-              className="flex-shrink-0 [&_article]:h-full"
-              style={{
-                paddingRight: `${gap}px`,
-                width: `${100 / itemsVisible}%`,
-              }}
-            >
-              {child}
               </div>
-          ))}
+            )}
-        </div>
+            <h2
-      </div>
+              className={`text-3xl font-bold ${colorsMap[colors]} bg-clip-text text-transparent`}
-
-      {/* 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} />
+              {heading}
-          </button>
+            </h2>
-          <button
+          </div>
-            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>
-        </>
         )}
 
-      {/* Dot indicators */}
+        {totalPages > 1 && (
-      {showDots && totalItems > itemsVisible && (
+          <div className="flex gap-2">
-        <div className="flex justify-center mt-4 gap-2">
-          {Array.from({ length: Math.ceil(totalItems / itemsVisible) }).map(
-            (_, index) => (
             <button
-                key={index}
+              onClick={prevPage}
-                onClick={() => goToSlide(index * itemsVisible)}
+              className={`cursor-pointer p-3 rounded-full ${colorsMap[colors]} text-white transition-all duration-300`}
-                disabled={isTransitioning}
+            >
-                className={`w-2 h-2 rounded-full transition-all duration-300 disabled:cursor-not-allowed cursor-pointer ${
+              <FaChevronLeft size={16} />
-                  Math.floor(currentIndex / itemsVisible) === index
+            </button>
-                    ? "bg-secondary scale-125"
+            <button
-                    : "bg-white/30 hover:bg-secondary/50"
+              onClick={nextPage}
+              className={`cursor-pointer p-3 rounded-full ${colorsMap[colors]} text-white transition-all duration-300 `}
+            >
+              <FaChevronRight size={16} />
+            </button>
+          </div>
+        )}
+      </div>
+
+      <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>
+
+      {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={`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",
+};

src/components/molecules/RecommendedMovies/index.tsx

@@ -1,68 +1,27 @@
 "use client";
-
 import { SearchResult } from "@/lib/tmdb/types";
 import { MovieCard } from "@/components/atoms/MovieCard";
-import { FC, useState } from "react";
+import { FC } from "react";
-import { FaChevronLeft, FaChevronRight, FaStar } from "react-icons/fa";
+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">
+          <Carousel
-            <div className="flex items-center gap-3">
+            heading="Rekomendowane filmy"
-              <div className="p-2 rounded-lg bg-gradient-to-r from-yellow-500 to-orange-500">
+            icon={<FaStar />}
-                <FaStar className="text-white" size={20} />
+            iconColor="bg-gradient-to-r from-yellow-500 to-orange-500"
-              </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} />
+            {movies.results.map((movie) => (
-                </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"
@@ -84,25 +43,7 @@ export const RecommendedMovies: FC<Props> = ({ movies }) => {
                 favorite={false}
               />
             ))}
-          </div>
+          </Carousel>
-
-          {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>

src/components/organisms/Navbar/components/Search/index.tsx

@@ -22,7 +22,6 @@ export const Search = () => {
   const pathname = usePathname();
 
   useEffect(() => {
-    console.log("pathname", pathname);
     setIsSearchOpen(false);
   }, [pathname]);