refactor: release screenshots Flowbite -> Swiper

app/components/ReleaseInfo/ReleaseInfo.Screenshots.tsx

@@ -1,21 +1,63 @@
-import { Card, Carousel } from "flowbite-react";
+import { Card } from "flowbite-react";
 import Image from "next/image";
 
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import "swiper/css/autoplay";
+import { Navigation, Pagination, Autoplay } from "swiper/modules";
+
 export const ReleaseInfoScreenshots = (props: { images: string[] }) => {
   return (
     <Card>
-      <Carousel className="aspect-[16/10]">
+      <Swiper
-        {props.images.map((image: string, index: number) => (
+        modules={[Navigation, Pagination, Autoplay]}
-          <Image
+        spaceBetween={8}
-            key={index}
+        slidesPerView={2}
-            className="object-cover"
+        direction={"horizontal"}
-            src={image}
+        allowTouchMove={true}
-            width={400}
+        autoplay={true}
-            height={300}
+        pagination={true}
-            alt=""
+        breakpoints={{
-          />
+          1024: {
-        ))}
+            slidesPerView: 1,
-      </Carousel>
+          },
+        }}
+        style={{
+          height: "100%",
+          minHeight: 0,
+          maxHeight: "100%",
+          width: "100%",
+          minWidth: 0,
+          maxWidth: "100%",
+          overflow: "hidden",
+        }}
+      >
+        {props.images.map((image: string, index: number) => {
+          return (
+            <SwiperSlide
+              key={`release-screenshot-${index}`}
+              style={{
+                width: "fit-content",
+                flexShrink: 0,
+                display: "block",
+                height: "100%",
+                maxHeight: "100%",
+              }}
+            >
+              <Image
+                key={index}
+                className="object-cover"
+                src={image}
+                width={400}
+                height={225}
+                alt=""
+              />
+            </SwiperSlide>
+          );
+        })}
+      </Swiper>
     </Card>
   );
 };