Add Swiper component and AlbumImage for enhanced album display

src/app/_components/album-showcase.tsx

@@ -1,12 +1,14 @@
 "use client";
 
-import { use, useEffect, useState } from "react";
-import Tilt from "react-parallax-tilt";
+import { useEffect, useState } from "react";
 import { TrackByAlbum } from "./spotify-data";
 import { api } from "@/trpc/react";
 import { quantum } from "ldrs";
 import { ring2 } from "ldrs";
 import { pulsar } from "ldrs";
+import Swiper from "./swiper";
+import { SwiperSlide } from "swiper/react";
+import AlbumImage from "./album-image";
 
 pulsar.register();
 ring2.register();
@@ -104,80 +106,36 @@ export default function AlbumShowcase({
     >
       <div
         onClick={() => setShowSpookyImage(!showSpookyImage)}
-        className="cursor-pointer"
+        className="cursor-pointer *:select-none"
       >
-        <Tilt tiltMaxAngleX={10} tiltMaxAngleY={10} transitionSpeed={200}>
-          <img
-            className="h-36 w-36 cursor-pointer rounded"
-            style={{
-              display: showSpookyImage ? "none" : "block",
-            }}
-            src={imageSource}
-            alt={album.name}
-          />
-          {spookyImageSource &&
-            (generateSpookyImage.data
-              ? lastSpookyImageLoaded >= place ||
-                lastSpookyImageLoaded + 1 === place
-              : true) && (
-              <img
-                className="h-36 w-36 cursor-pointer rounded"
-                style={{
-                  display:
-                    showSpookyImage && spookyImageLoaded ? "block" : "none",
-                }}
-                src={spookyImageSource}
-                alt={album.name}
-                onLoad={onImageLoad}
-                onError={() => {
-                  onImageLoad();
-                }}
-              />
-            )}
-          {showSpookyImage && !spookyImageLoaded && (
-            <div className="flex h-36 w-36 items-center justify-center rounded bg-slate-300 bg-opacity-10">
-              <div>
-                {(() => {
-                  if (generateSpookyImage.data) {
-                    if (lastSpookyImageLoaded < place - 1) {
-                      return (
-                        <>
-                          <l-pulsar
-                            size="100"
-                            speed="1.75"
-                            color="white"
-                          ></l-pulsar>{" "}
-                          <p className="text-center">On queue...</p>
-                        </>
-                      );
-                    }
-                    return (
-                      <>
-                        <l-quantum
-                          size="100"
-                          speed="1.75"
-                          color="white"
-                        ></l-quantum>
-                        <p className="text-center">Generating...</p>
-                      </>
-                    );
-                  } else {
-                    return (
-                      <>
-                        <l-ring-2
-                          size="100"
-                          speed="1.75"
-                          color="white"
-                        ></l-ring-2>
-                        <p className="text-center">Getting image...</p>
-                      </>
-                    );
-                  }
-                })()}
-              </div>
-            </div>
-          )}
-        </Tilt>
+        <Swiper>
+          <SwiperSlide>
+            <AlbumImage
+              showSpookyImage={showSpookyImage}
+              imageSource={imageSource}
+              spookyImageSource={spookyImageSource}
+              album={album}
+              generateSpookyImageData={generateSpookyImage.data as string}
+              lastSpookyImageLoaded={lastSpookyImageLoaded}
+              place={place}
+              spookyImageLoaded={spookyImageLoaded}
+              onImageLoad={onImageLoad}
+            />
+          </SwiperSlide>
+          <SwiperSlide>
+            <AlbumImage
+              showSpookyImage={showSpookyImage}
+              imageSource={imageSource}
+              spookyImageSource={spookyImageSource}
+              album={album}
+              generateSpookyImageData={generateSpookyImage.data as string}
+              lastSpookyImageLoaded={lastSpookyImageLoaded}
+              place={place}
+              spookyImageLoaded={spookyImageLoaded}
+              onImageLoad={onImageLoad}
+            />
+          </SwiperSlide>
+        </Swiper>
       </div>
       <section className="flex h-36 flex-grow flex-col">
         <h4 className="mb-2 text-lg font-semibold leading-none">