Function VideosComponent

components/answer/VideosComponent.tsx:23–116

({ videos })

// 3. Define the 'VideosComponent' functional component that accepts 'VideosComponentProps'
const VideosComponent: React.FC<VideosComponentProps> = ({ videos }) => {
    // 4. Declare state variables using the 'useState' hook
    const [loadedImages, setLoadedImages] = useState<boolean[]>([]);
    const [selectedVideo, setSelectedVideo] = useState<string | null>(null);

    // 5. Use the 'useEffect' hook to initialize the 'loadedImages' state based on the number of videos
    useEffect(() => {
        setLoadedImages(Array(videos.length).fill(false));
    }, [videos]);

    // 6. Define the 'handleImageLoad' function to update the 'loadedImages' state when an image is loaded
    const handleImageLoad = (index: number) => {
        setLoadedImages((prevLoadedImages) => {
            const updatedLoadedImages = [...prevLoadedImages];
            updatedLoadedImages[index] = true;
            return updatedLoadedImages;
        });
    };

    // 7. Define the 'handleVideoSelect' function to set the 'selectedVideo' state when a thumbnail is clicked
    const handleVideoSelect = (link: string) => {
        setSelectedVideo(link);
    };

    // 8. Define the 'VideosSkeleton' component to display a loading skeleton while videos are loading
    const VideosSkeleton = () => (
        <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>
    );

    // 9. Render the 'VideosComponent' JSX
    return (
        <div className="bg-white dark:bg-gray-800 shadow-lg rounded-lg mt-4 w-full px-2 flex items-center justify-center">
            {/* 10. Render the video carousel */}
            <Carousel
                opts={{
                    align: "start",
                }}
                orientation="vertical"
                className="w-full max-w-xs"
            >
                <CarouselContent className=" h-[175px] mx-auto">
                    {videos.length === 0 ? (
                        <VideosSkeleton />
                    ) : (
                        videos.map((video, index) => {
                            const videoId = getYouTubeVideoId(video.link);
                            const imageUrl = `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`;

                            return (
                                <CarouselItem key={index} className="py-5 md:basis-1/2 ">
                                    <div className="p-1">
                                        <Card>
                                            <CardContent className="flex items-center justify-center p-0  h-[150px]">
                                                {selectedVideo === video.link ? (