Changed album styles

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",
         }}

src/app/_components/album-showcase.tsx

@@ -135,8 +135,9 @@ export default function AlbumShowcase({
     >
       <div
         onClick={() => setShowSpookyImage(!showSpookyImage)}
-        className="*:drag-none cursor-pointer *:select-none"
+        className="cursor-pointer *:select-none *:drag-none"
       >
+        {showSpookyImage ? (
           <Swiper>
             <SwiperSlide
               className={`shadow-lg ${!showSpookyImage ? "swiper-no-swiping" : ""}`}
@@ -175,7 +176,9 @@ export default function AlbumShowcase({
                 imageSource={imageSource}
                 spookyImageSource={secondSpookyImageSource}
                 album={album}
-              generateSpookyImageData={generateSecondSpookyImage.data as string}
+                generateSpookyImageData={
+                  generateSecondSpookyImage.data as string
+                }
                 lastSpookyImageLoaded={lastSpookyImageLoaded}
                 place={secondPlace}
                 loadGeneratedImage={
@@ -194,6 +197,31 @@ export default function AlbumShowcase({
               />
             </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">