61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import { FaEye } from "react-icons/fa";
|
|
import type { Movie, MovieDetail } from "../../../types";
|
|
|
|
interface CardMoviesListItemProps {
|
|
movie: MovieDetail;
|
|
}
|
|
|
|
export default function CardMoviesListItem({ movie }: CardMoviesListItemProps) {
|
|
return (
|
|
<div
|
|
className="cardshadow"
|
|
style={{
|
|
backgroundImage: `url(${movie.movie.poster_path})`,
|
|
backgroundPosition: "center",
|
|
backgroundSize: "cover",
|
|
height: "320px",
|
|
borderRadius: "5px",
|
|
}}
|
|
>
|
|
<div style={{ height: "100%", width: "100%" }} className="movieitem">
|
|
<div style={{ height: "100%" }} className="row justify-content-center">
|
|
<div style={{ height: "100%" }} className="col align-self-center">
|
|
<div style={{ height: "50%" }} className="row">
|
|
<div className="col align-self-end">
|
|
<h5 style={{ textAlign: "center", verticalAlign: "center" }}>
|
|
{movie.movie.title}
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style={{ height: "50%" }}
|
|
className="row justify-content-center"
|
|
>
|
|
<div className="col-8 align-self-center">
|
|
<div className="d-grid">
|
|
{movie.stats ? (
|
|
<span className="badge text-bg-success mb-2">
|
|
Disponible
|
|
</span>
|
|
) : (
|
|
<span className="badge text-bg-secondary mb-2">
|
|
Bientot dispo.
|
|
</span>
|
|
)}
|
|
|
|
<br />
|
|
<a
|
|
href={`/home/movies/${movie.movie.id}`}
|
|
className="btn btn-primary"
|
|
>
|
|
<FaEye />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|