Movie_Search/movie-search/src/common/components/MovieCard.tsx
2024-06-02 01:21:21 -04:00

33 lines
1018 B
TypeScript

import FavoriteBtn from "@/common/components/FavoriteBtn";
import ImgCard from "@/common/components/ImgCard";
import Link from "next/link";
import { primaryBtn } from "../classes";
interface IMovieCardProps {
movie: IMovieSearch;
}
export default function MovieCard({ movie }: IMovieCardProps) {
return (
<ImgCard
classNames={`w-full h-full flex flex-col justify-between`}
width={140}
height={160}
src={movie.Poster !== "N/A" ? movie.Poster : ""}
alt={`${movie.Title} Movie Poster`}
>
<div className="flex flex-col gap-4">
<h3 className=" text-lg font-semibold">{movie.Title}</h3>
<p data-testid='MovieCard-Year' className=" text-sm text-gray-700">Circa: {movie.Year}</p>
<div className="flex gap-3 justify-around">
<Link href={`/Movie?i=${movie.imdbID}`}>
<button className={primaryBtn}>Movie Details</button>
</Link>
<FavoriteBtn movie={movie} />
</div>
</div>
</ImgCard>
);
}