Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-07 16:54:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

refactor: release screenshots Flowbite -> Swiper

Browse source
This commit is contained in:
Kentai Radiquum 2025-04-06 18:08:14 +05:00
parent 5bc65da8e3
commit 3f85d0e340
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
1 changed files with 55 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
app/components/ReleaseInfo/ReleaseInfo.Screenshots.tsx
View file

@ -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]">
{props.images.map((image: string, index: number) => (
<Image
key={index}
className="object-cover"
src={image}
width={400}
height={300}
alt=""
/>
))}
</Carousel>
<Swiper
modules={[Navigation, Pagination, Autoplay]}
spaceBetween={8}
slidesPerView={2}
direction={"horizontal"}
allowTouchMove={true}
autoplay={true}
pagination={true}
breakpoints={{
1024: {
slidesPerView: 1,
},
}}
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>
);
};