77 lines
2.8 KiB
TypeScript
77 lines
2.8 KiB
TypeScript
import React, { ReactElement } from "react";
|
|
import PropTypes from "prop-types";
|
|
import ellipsize from "ellipsize";
|
|
import Card from "../Carda";
|
|
import convert from "html-to-text";
|
|
|
|
export const ComicVineDetails = (comicVineData): ReactElement => {
|
|
const { data } = comicVineData;
|
|
return (
|
|
<div className="columns">
|
|
<div className="column">
|
|
<div className="comic-detail issue-metadata">
|
|
<dl>
|
|
<dd>
|
|
<div className="columns mt-2">
|
|
<div className="column is-3">
|
|
<Card
|
|
imageUrl={data.comicvine.image.small_url}
|
|
orientation={"vertical"}
|
|
hasDetails={false}
|
|
// cardContainerStyle={{ maxWidth: 200 }}
|
|
/>
|
|
</div>
|
|
<div className="column">
|
|
<dl>
|
|
<dt>
|
|
<h6 className="name has-text-weight-medium mb-1">
|
|
{ellipsize(data.name, 18)}
|
|
</h6>
|
|
</dt>
|
|
<dd>
|
|
<h6>{data.comicvine.name && data.comicvine.name}</h6>
|
|
<span className="is-size-7">
|
|
Is a part of{" "}
|
|
<span className="has-text-weight-semibold">
|
|
{data.comicvine.volumeInformation.name}
|
|
</span>
|
|
</span>
|
|
</dd>
|
|
|
|
<dd className="is-size-7 mt-2">
|
|
<div className="field is-grouped is-grouped-multiline">
|
|
<div className="control">
|
|
<span className="tags">
|
|
<span className="tag is-success is-light has-text-weight-semibold">
|
|
{data.comicvine.volumeInformation.start_year}
|
|
</span>
|
|
<span className="tag is-success is-light">
|
|
{data.comicvine.volumeInformation.count_of_issues}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div className="control">
|
|
<div className="tags has-addons">
|
|
<span className="tag is-primary is-light">
|
|
ComicVine ID
|
|
</span>
|
|
<span className="tag is-info is-light">
|
|
{data.comicvine.id}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ComicVineDetails;
|