71 lines
2.2 KiB
JavaScript
71 lines
2.2 KiB
JavaScript
import React from "react";
|
|
import PropTypes from "prop-types";
|
|
import { Map } from "immutable";
|
|
import { connect } from "react-redux";
|
|
|
|
import { isWishlisted } from "../../../utils";
|
|
|
|
import { showWishlistToggle } from "../../../actions/shows";
|
|
|
|
import { Plot } from "../../details/plot";
|
|
import { Rating } from "../../details/rating";
|
|
import { ReleaseDate } from "../../details/releaseDate";
|
|
import { Title } from "../../details/title";
|
|
import { TrackingLabel } from "../../details/tracking";
|
|
|
|
import { ImdbBadge } from "../../buttons/imdb";
|
|
|
|
export const header = props => (
|
|
<div className="card col-12 col-md-10 offset-md-1 mt-n3 mb-3">
|
|
<div className="d-flex flex-column flex-md-row">
|
|
<div className="d-flex justify-content-center">
|
|
<img
|
|
className="overflow-hidden object-fit-cover"
|
|
src={props.data.get("poster_url")}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div className="card-body">
|
|
<p className="card-title">
|
|
<Title
|
|
title={props.data.get("title")}
|
|
wishlisted={isWishlisted(props.data)}
|
|
wishlist={() =>
|
|
props.showWishlistToggle(
|
|
isWishlisted(props.data),
|
|
props.data.get("imdb_id")
|
|
)
|
|
}
|
|
/>
|
|
</p>
|
|
<p className="card-text">
|
|
<ReleaseDate date={props.data.get("year")} />
|
|
</p>
|
|
<p className="card-text">
|
|
<Rating rating={props.data.get("rating")} />
|
|
</p>
|
|
<p className="card-text">
|
|
<ImdbBadge imdbId={props.data.get("imdb_id")} />
|
|
</p>
|
|
<p className="card-text">
|
|
<TrackingLabel
|
|
inLibrary={false}
|
|
trackedSeason={props.data.get("tracked_season")}
|
|
trackedEpisode={props.data.get("tracked_episode")}
|
|
/>
|
|
</p>
|
|
<p className="card-text">
|
|
<Plot plot={props.data.get("plot")} />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
header.propTypes = {
|
|
data: PropTypes.instanceOf(Map),
|
|
showWishlistToggle: PropTypes.func
|
|
};
|
|
|
|
export const Header = connect(null, { showWishlistToggle })(header);
|