From bedd1419d52019b92c8ef4a19010a5f017a3f89e Mon Sep 17 00:00:00 2001
From: Francisco Pessano <franpessano1@gmail.com>
Date: Thu, 17 Oct 2024 22:29:42 -0300
Subject: [PATCH] Changed album styles

---
 src/app/_components/album-image.tsx    |   2 +-
 src/app/_components/album-showcase.tsx | 144 +++++++++++++++----------
 2 files changed, 87 insertions(+), 59 deletions(-)

diff --git a/src/app/_components/album-image.tsx b/src/app/_components/album-image.tsx
index ffd3062..f79b5a3 100644
--- a/src/app/_components/album-image.tsx
+++ b/src/app/_components/album-image.tsx
@@ -80,7 +80,7 @@ export function AlbumImage({
   return (
     <Tilt tiltMaxAngleX={10} tiltMaxAngleY={10} transitionSpeed={200}>
       <img
-        className="h-36 w-36 cursor-pointer rounded"
+        className="h-36 w-36 cursor-pointer rounded-xl"
         style={{
           display: showSpookyImage ? "none" : "block",
         }}
diff --git a/src/app/_components/album-showcase.tsx b/src/app/_components/album-showcase.tsx
index be6b5af..1017085 100644
--- a/src/app/_components/album-showcase.tsx
+++ b/src/app/_components/album-showcase.tsx
@@ -135,65 +135,93 @@ export default function AlbumShowcase({
     >
       <div
         onClick={() => setShowSpookyImage(!showSpookyImage)}
-        className="*:drag-none cursor-pointer *:select-none"
+        className="cursor-pointer *:select-none *:drag-none"
       >
-        <Swiper>
-          <SwiperSlide
-            className={`shadow-lg ${!showSpookyImage ? "swiper-no-swiping" : ""}`}
-          >
-            <AlbumImage
-              entry={entry}
-              showSpookyImage={showSpookyImage}
-              imageSource={imageSource}
-              spookyImageSource={spookyImageSource}
-              album={album}
-              generateSpookyImageData={generateSpookyImage.data as string}
-              lastSpookyImageLoaded={lastSpookyImageLoaded}
-              place={firstPlace}
-              loadGeneratedImage={
-                !!(
-                  spookyImageSource &&
-                  (generateSpookyImage.data
-                    ? lastSpookyImageLoaded >= firstPlace ||
-                      lastSpookyImageLoaded + 1 === firstPlace
-                    : true)
-                )
-              }
-              onQueue={lastSpookyImageLoaded < firstPlace - 1}
-              saveImage={saveImage}
-              setLastSpookyImageLoaded={setLastSpookyImageLoaded}
-              error={firstImageError}
-            />
-          </SwiperSlide>
-          <SwiperSlide
-            className={`shadow-lg ${!showSpookyImage ? "swiper-no-swiping" : ""}`}
-          >
-            <AlbumImage
-              number={2}
-              entry={secondEntry}
-              showSpookyImage={showSpookyImage}
-              imageSource={imageSource}
-              spookyImageSource={secondSpookyImageSource}
-              album={album}
-              generateSpookyImageData={generateSecondSpookyImage.data as string}
-              lastSpookyImageLoaded={lastSpookyImageLoaded}
-              place={secondPlace}
-              loadGeneratedImage={
-                !!(
-                  secondSpookyImageSource &&
-                  (generateSecondSpookyImage.data
-                    ? lastSpookyImageLoaded >= secondPlace ||
-                      lastSpookyImageLoaded + 1 === secondPlace
-                    : true)
-                )
-              }
-              onQueue={lastSpookyImageLoaded < secondPlace - 1}
-              saveImage={saveSecondImage}
-              setLastSpookyImageLoaded={setLastSpookyImageLoaded}
-              error={secondImageError}
-            />
-          </SwiperSlide>
-        </Swiper>
+        {showSpookyImage ? (
+          <Swiper>
+            <SwiperSlide
+              className={`shadow-lg ${!showSpookyImage ? "swiper-no-swiping" : ""}`}
+            >
+              <AlbumImage
+                entry={entry}
+                showSpookyImage={showSpookyImage}
+                imageSource={imageSource}
+                spookyImageSource={spookyImageSource}
+                album={album}
+                generateSpookyImageData={generateSpookyImage.data as string}
+                lastSpookyImageLoaded={lastSpookyImageLoaded}
+                place={firstPlace}
+                loadGeneratedImage={
+                  !!(
+                    spookyImageSource &&
+                    (generateSpookyImage.data
+                      ? lastSpookyImageLoaded >= firstPlace ||
+                        lastSpookyImageLoaded + 1 === firstPlace
+                      : true)
+                  )
+                }
+                onQueue={lastSpookyImageLoaded < firstPlace - 1}
+                saveImage={saveImage}
+                setLastSpookyImageLoaded={setLastSpookyImageLoaded}
+                error={firstImageError}
+              />
+            </SwiperSlide>
+            <SwiperSlide
+              className={`shadow-lg ${!showSpookyImage ? "swiper-no-swiping" : ""}`}
+            >
+              <AlbumImage
+                number={2}
+                entry={secondEntry}
+                showSpookyImage={showSpookyImage}
+                imageSource={imageSource}
+                spookyImageSource={secondSpookyImageSource}
+                album={album}
+                generateSpookyImageData={
+                  generateSecondSpookyImage.data as string
+                }
+                lastSpookyImageLoaded={lastSpookyImageLoaded}
+                place={secondPlace}
+                loadGeneratedImage={
+                  !!(
+                    secondSpookyImageSource &&
+                    (generateSecondSpookyImage.data
+                      ? lastSpookyImageLoaded >= secondPlace ||
+                        lastSpookyImageLoaded + 1 === secondPlace
+                      : true)
+                  )
+                }
+                onQueue={lastSpookyImageLoaded < secondPlace - 1}
+                saveImage={saveSecondImage}
+                setLastSpookyImageLoaded={setLastSpookyImageLoaded}
+                error={secondImageError}
+              />
+            </SwiperSlide>
+          </Swiper>
+        ) : (
+          <AlbumImage
+            entry={entry}
+            showSpookyImage={showSpookyImage}
+            imageSource={imageSource}
+            spookyImageSource={spookyImageSource}
+            album={album}
+            generateSpookyImageData={generateSpookyImage.data as string}
+            lastSpookyImageLoaded={lastSpookyImageLoaded}
+            place={firstPlace}
+            loadGeneratedImage={
+              !!(
+                spookyImageSource &&
+                (generateSpookyImage.data
+                  ? lastSpookyImageLoaded >= firstPlace ||
+                    lastSpookyImageLoaded + 1 === firstPlace
+                  : true)
+              )
+            }
+            onQueue={lastSpookyImageLoaded < firstPlace - 1}
+            saveImage={saveImage}
+            setLastSpookyImageLoaded={setLastSpookyImageLoaded}
+            error={firstImageError}
+          />
+        )}
       </div>
       <section className="flex h-36 flex-grow flex-col">
         <h4 className="mb-2 text-lg font-semibold leading-none">