From 983a362b80cef0db274440161352c138c64f86c6 Mon Sep 17 00:00:00 2001
From: Norbert Maciaszek <norbert@ambiscale.com>
Date: Sun, 17 Aug 2025 14:37:44 +0200
Subject: [PATCH] Update MovieCard component to support "aurora" layout
 enhancements: add layout prop to MovieCard instances in the Odkrywaj page,
 and adjust AuroraLayout to conditionally render status indicators based on
 the simpleToggle prop. Refactor MovieList grid layout for improved
 responsiveness.

---
 src/app/odkrywaj/page.tsx                     | 28 +++++++--
 .../atoms/MovieCard/layouts/AuroraLayout.tsx  | 59 ++++++++++---------
 src/components/molecules/MovieList/index.tsx  |  2 +-
 3 files changed, 56 insertions(+), 33 deletions(-)

diff --git a/src/app/odkrywaj/page.tsx b/src/app/odkrywaj/page.tsx
index 75ceb7f..d9c8201 100644
--- a/src/app/odkrywaj/page.tsx
+++ b/src/app/odkrywaj/page.tsx
@@ -45,7 +45,12 @@ export default async function Home() {
           <h2 className="text-3xl font-bold text-white mb-8">Teraz w kinach</h2>
           <Carousel>
             {nowPlayingMovies.map((movie) => (
-              <MovieCard key={movie.id} {...movie} simpleToggle />
+              <MovieCard
+                key={movie.id}
+                {...movie}
+                simpleToggle
+                layout="aurora"
+              />
             ))}
           </Carousel>
         </section>
@@ -56,7 +61,12 @@ export default async function Home() {
           </h2>
           <Carousel>
             {upcomingMovies.map((movie) => (
-              <MovieCard key={movie.id} {...movie} simpleToggle />
+              <MovieCard
+                key={movie.id}
+                {...movie}
+                simpleToggle
+                layout="aurora"
+              />
             ))}
           </Carousel>
         </section>
@@ -67,7 +77,12 @@ export default async function Home() {
           </h2>
           <Carousel>
             {popularMovies.map((movie) => (
-              <MovieCard key={movie.id} {...movie} simpleToggle />
+              <MovieCard
+                key={movie.id}
+                {...movie}
+                simpleToggle
+                layout="aurora"
+              />
             ))}
           </Carousel>
         </section>
@@ -76,7 +91,12 @@ export default async function Home() {
           <h2 className="text-3xl font-bold text-white mb-8">Trendy dnia</h2>
           <Carousel>
             {trendingMovies.map((movie) => (
-              <MovieCard key={movie.id} {...movie} simpleToggle />
+              <MovieCard
+                key={movie.id}
+                {...movie}
+                simpleToggle
+                layout="aurora"
+              />
             ))}
           </Carousel>
         </section>
diff --git a/src/components/atoms/MovieCard/layouts/AuroraLayout.tsx b/src/components/atoms/MovieCard/layouts/AuroraLayout.tsx
index 7e9b638..f0bbcae 100644
--- a/src/components/atoms/MovieCard/layouts/AuroraLayout.tsx
+++ b/src/components/atoms/MovieCard/layouts/AuroraLayout.tsx
@@ -36,6 +36,7 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
   handleFavorite,
   daysSinceRelease,
   releaseDate,
+  simpleToggle,
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -78,7 +79,7 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
           {!!vote_average && (
             <div className="absolute top-4 right-4 transform rotate-3 group-hover:rotate-0 transition-transform duration-300">
               <div
-                className={`bg-gradient-to-r ${scoreColor} p-3 rounded-xl shadow-lg backdrop-blur-sm`}
+                className={`bg-gradient-to-r ${scoreColor} p-2 rounded-xl shadow-lg backdrop-blur-sm`}
               >
                 <div className="flex items-center gap-2 text-white font-bold">
                   <span className="text-xl">★</span>
@@ -100,39 +101,41 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
 
           {/* Days left to release */}
           {(!isReleased || daysSinceRelease < 35) && (
-            <div className="absolute bottom-4 right-4 flex justify-center">
-              <div className="text-white bg-black/60 backdrop-blur-sm px-3 py-2 rounded-xl border border-white/20">
-                <span className="text-xs font-medium">
-                  {isReleased &&
-                    daysSinceRelease < 35 &&
-                    `od ${daysSinceRelease} dni`}
-                  {!isReleased && `za ${daysSinceRelease} dni`}
-                </span>
-              </div>
+            <div className="absolute bottom-4 left-4 flex justify-center">
+              <p className="text-white bg-black/60 backdrop-blur-sm px-2.5 leading-[2] rounded-xl border border-white/20 text-xs">
+                {isReleased &&
+                  daysSinceRelease < 35 &&
+                  `od ${daysSinceRelease} dni`}
+                {!isReleased && `za ${daysSinceRelease} dni`}
+              </p>
             </div>
           )}
 
           {/* Status indicators */}
           {alreadyInStore && (
-            <div className="absolute bottom-4 left-4 flex gap-2">
+            <div className="absolute bottom-4 right-4 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+              {!simpleToggle && (
+                <>
+                  <div
+                    className={`${
+                      seen ? "bg-emerald-500/90" : "bg-white/20"
+                    } backdrop-blur-sm p-2 rounded-full animate-pulse cursor-pointer hover:bg-emerald-400 transition-colors`}
+                    onClick={handleSeen}
+                  >
+                    <RxEyeOpen size={16} className="text-white" />
+                  </div>
+                  <div
+                    className={`${
+                      favorite ? "bg-rose-500/90" : "bg-white/20"
+                    } backdrop-blur-sm p-2 rounded-full animate-pulse cursor-pointer hover:bg-rose-400 transition-colors`}
+                    onClick={handleFavorite}
+                  >
+                    <MdFavorite size={16} className="text-white" />
+                  </div>
+                </>
+              )}
               <div
-                className={`${
-                  seen ? "bg-emerald-500/90" : "bg-white/20"
-                } backdrop-blur-sm p-2 rounded-full animate-pulse cursor-pointer`}
-                onClick={handleSeen}
-              >
-                <RxEyeOpen size={16} className="text-white" />
-              </div>
-              <div
-                className={`${
-                  favorite ? "bg-rose-500/90" : "bg-white/20"
-                } backdrop-blur-sm p-2 rounded-full animate-pulse cursor-pointer`}
-                onClick={handleFavorite}
-              >
-                <MdFavorite size={16} className="text-white" />
-              </div>
-              <div
-                className={`bg-white/20 backdrop-blur-sm p-2 rounded-full animate-pulse cursor-pointer`}
+                className={`bg-white/20 backdrop-blur-sm p-2 rounded-full animate-pulse cursor-pointer hover:bg-red-400 transition-colors`}
                 onClick={handleRemove}
               >
                 <FaTrash size={16} className="text-white" />
diff --git a/src/components/molecules/MovieList/index.tsx b/src/components/molecules/MovieList/index.tsx
index 57d4998..ce71044 100644
--- a/src/components/molecules/MovieList/index.tsx
+++ b/src/components/molecules/MovieList/index.tsx
@@ -103,7 +103,7 @@ export const MovieList: FC<Props> = ({
         )}
         {filteredMovies.length > 0 && (
           <div
-            className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-y-6 gap-3 sm:gap-6 mt-8 justify-center"
+            className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-y-6 gap-3 sm:gap-6 mt-8 justify-center"
             ref={parent}
           >
             {sortedMovies.map((movie) => (