41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import { forwardRef } from "react";
|
|
import type { ImageData } from "../types";
|
|
|
|
interface ImageCarouselProps {
|
|
images: ImageData["images"];
|
|
currentIndex: number;
|
|
onTogglePlay: () => void;
|
|
}
|
|
|
|
export const ImageCarousel = forwardRef<HTMLDivElement, ImageCarouselProps>(
|
|
({ images, currentIndex, onTogglePlay }, ref) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className="flex h-full w-full snap-x snap-mandatory overflow-x-auto overflow-y-hidden [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
|
|
>
|
|
{images.map((img, i) => (
|
|
<div
|
|
key={img.id}
|
|
className="relative h-full min-w-full snap-center flex items-center justify-center bg-black/70 cursor-pointer"
|
|
onClick={onTogglePlay}
|
|
>{
|
|
img.animated ? <video src={img.animated} autoPlay muted playsInline className="max-w-full max-h-full object-contain" /> : <img
|
|
src={img.url}
|
|
alt={`image-${i + 1}`}
|
|
className="max-w-full max-h-full object-contain"
|
|
style={{
|
|
width: img.width ? `${img.width}px` : undefined,
|
|
height: img.height ? `${img.height}px` : undefined,
|
|
}}
|
|
/>
|
|
}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
ImageCarousel.displayName = "ImageCarousel";
|