frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🔎 Search page scaffold

Browse Source
This commit is contained in:
Rishi Ghan
2021-08-10 08:22:18 -07:00
parent 3c8a330336
commit 4080572c44
6 changed files with 138 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/client/components/ComicDetail.tsx
View File

@@ -61,54 +61,68 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
};
const [active, setActive] = useState(0);
const createDescriptionMarkup = (html) => {
return { __html: html };
};
// Tab groups for ComicVine metadata
const tabGroup = [
{
id: 0,
name: "Volume Information",
content: !isNil(comicBookDetailData.sourcedMetadata) && (
<div className="columns">
<div className="column is-narrow">
<figure className="card-image">
<img
src={
comicBookDetailData.sourcedMetadata.comicvine
.volumeInformation.image.thumb_url
}
/>
</figure>
</div>
<div className="column is-4">
<dl>
<dt>
Is a part of{" "}
<span className="has-text-info">
<>
<div className="columns">
<div className="column is-narrow">
<figure className="card-image">
<img
src={
comicBookDetailData.sourcedMetadata.comicvine
.volumeInformation.image.thumb_url
}
/>
</figure>
</div>
<div className="column is-4">
<dl>
<dt>
Is a part of{" "}
<span className="has-text-info">
{
comicBookDetailData.sourcedMetadata.comicvine
.volumeInformation.name
}
</span>
</dt>
<dd>
Published by
<span className="has-text-weight-semibold">
{" "}
{
comicBookDetailData.sourcedMetadata.comicvine
.volumeInformation.publisher.name
}
</span>
</dd>
<dd>
Total issues in this volume:{" "}
{
comicBookDetailData.sourcedMetadata.comicvine
.volumeInformation.name
.volumeInformation.count_of_issues
}
</span>
</dt>
<dd>
Published by
<span className="has-text-weight-semibold">
{" "}
{
comicBookDetailData.sourcedMetadata.comicvine
.volumeInformation.publisher.name
}
</span>
</dd>
<dd>
Total issues in this volume:{" "}
{
comicBookDetailData.sourcedMetadata.comicvine
.volumeInformation.count_of_issues
}
</dd>
</dl>
</dd>
</dl>
</div>
</div>
</div>
<div className="columns">
<div
className="column is-three-quarters"
dangerouslySetInnerHTML={createDescriptionMarkup(
comicBookDetailData.sourcedMetadata.comicvine.volumeInformation
.description,
)}
></div>
</div>
</>
),
},
{