neroshitron/components/ui/gallery_thumbnail.tsx

import { useState, useEffect } from 'react';

interface GalleryThumbnailProps {
    id: number;
    onSelect: (id:number) => void;
}

const GalleryThumbnail = ({ id, onSelect }: GalleryThumbnailProps) => {
    const [galleryId, setGalleryId] = useState(id as number);
    const [thumbnailUrl, setThumbnailUrl] = useState('' as string);
    const [isLoading, setIsLoading] = useState(true);
    const toggleModal = () => {
        onSelect(galleryId);
    };

    const getData = async () => {
      setIsLoading(true);
      const thumbnailResponse = await fetch('/api/galleries/'+galleryId+'/thumbnail');
      const thumbnailUrl = await thumbnailResponse.text();
      setThumbnailUrl(thumbnailUrl);
      setIsLoading(false);
    }

    useEffect(() => {
      getData();
    }, []);

    return (
        <div className="py-3 sm:max-w-xl sm:mx-auto flex-3">
            <div className="h-48 overflow-visible w-full relative hover:scale-105 shadow-lg bg-gray-400 rounded-3xl">
                {!isLoading && <img
                    className={`aspect-content rounded-3xl`}
                    src={thumbnailUrl}
                    alt=""
                    onClick={toggleModal}
                    style={{ width: '20rem', height: '20rem', objectFit: 'cover' }}
                />}
            </div>
        </div>
    );
}

export default GalleryThumbnail;