Function ImagesComponent

components/answer/ImagesComponent.tsx:33–154

({ images })

}

const ImagesComponent: React.FC<ImagesComponentProps> = ({ images }) => {
    const [loadedImages, setLoadedImages] = useState<boolean[]>([]);
    const [isOpen, setIsOpen] = useState(false);
    const [photoIndex, setPhotoIndex] = useState(0);

    useEffect(() => {
        setLoadedImages(Array(images.length).fill(false));
    }, [images]);

    const handleImageLoad = (index: number) => {
        setLoadedImages((prevLoadedImages) => {
            const updatedLoadedImages = [...prevLoadedImages];
            updatedLoadedImages[index] = true;
            return updatedLoadedImages;
        });
    };

    const ImagesSkeleton = () => (
        <div className="w-full p-1 ">
            <div className="w-full overflow-hidden aspect-video mt-5">
                <div className="w-full h-full bg-gray-300 dark:bg-gray-700 rounded animate-pulse"></div>
            </div>
        </div>
    );

    const currentImage = images[photoIndex];

    return (
        <div className="bg-white dark:bg-gray-800 shadow-lg rounded-lg mt-4 w-full px-2 flex items-center justify-center">
            <Carousel
                plugins={[
                    Autoplay({
                        delay: 2000,
                    }),
                ]}
                opts={{
                    align: "start",
                }}
                orientation="vertical"
                className="w-full max-w-xs"
            >
                <CarouselContent className="h-[175px]">
                    {images.length === 0 ? (
                        <ImagesSkeleton />
                    ) : (
                        images.map((image, index) => (
                            <CarouselItem key={image.link} className="py-5 md:basis-1/2">
                                <div className="p-1">
                                    <Card>
                                        <CardContent className="flex items-center justify-center p-0 h-[150px]">
                                            <div
                                                className="relative w-full h-full cursor-pointer"
                                                onClick={() => {
                                                    setPhotoIndex(index);
                                                    setIsOpen(true);
                                                }}
                                            >
                                                {!loadedImages[index] && (