src/components/PreviewCard.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

const imageURL = 'https://image.tmdb.org/t/p/original';
import Genre from "./Genre";
const baseURL ='https://api.themoviedb.org/3/'

const PreviewCard = ({ movie }) => {
    return (
        <div className="hover:z-10">
            <div className="rounded ring-white hover:ring-4 flex-col p-1 relative bg-cover h-32 w-60 shrink-0 flex justify-end cursor-pointer hover:scale-125 transition ease-in-out" style={{backgroundImage: `url(${imageURL}${movie?.backdrop_path})`}}>
             <div className="absolute h-full w-full inset-0 bg-gradient-to-t from-black/70"></div>
             <h3 className={"text-white text-sm relative"}>
               {movie.original_title}
             </h3>
            <Genre id={movie.id}/> 
                </div>
        </div>
          )}
        

export default PreviewCard