81 lines
2.1 KiB
JavaScript
81 lines
2.1 KiB
JavaScript
import { formatDate } from "@/lib/helpers";
|
|
import { NextSeo } from "next-seo";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import React from "react";
|
|
import style from "./BookReview.module.css";
|
|
import ExternalLink from "../ExternalLink/ExternalLink";
|
|
|
|
function BookReview({ review, html }) {
|
|
const { title, image, author, description, url, tags, rating, readDate } =
|
|
review;
|
|
|
|
const imageUrl = image
|
|
? `${process.env.NEXT_PUBLIC_CONTENT_API_BASE_URL}/assets/${image}`
|
|
: undefined;
|
|
|
|
return (
|
|
<>
|
|
<h1>
|
|
{title}
|
|
<br />
|
|
<small>by {author}</small>
|
|
</h1>
|
|
<Link href="./">Back...</Link>
|
|
|
|
<article>
|
|
<NextSeo
|
|
title={title}
|
|
description={description}
|
|
openGraph={{
|
|
title,
|
|
description,
|
|
type: "article",
|
|
article: {
|
|
publishedTime: readDate ?? null,
|
|
},
|
|
}}
|
|
/>
|
|
|
|
<div>
|
|
<div className={style.layout}>
|
|
{imageUrl && (
|
|
<Image
|
|
src={imageUrl}
|
|
width={250}
|
|
height={580}
|
|
alt=""
|
|
className={style.thumbnail}
|
|
/>
|
|
)}
|
|
<div>
|
|
<div
|
|
data-test="content"
|
|
dangerouslySetInnerHTML={{
|
|
__html: html || "<p>(no review)</p>",
|
|
}}
|
|
/>
|
|
<p>
|
|
{tags?.length && (
|
|
<>
|
|
<span className="bold">Genres:</span> {tags.join(",")}
|
|
<br />
|
|
</>
|
|
)}
|
|
<span className="bold">Rating:</span> {rating}/5
|
|
<br />
|
|
<span className="bold">Read on:</span>
|
|
{formatDate(readDate)}
|
|
</p>
|
|
<p>
|
|
<ExternalLink href={url}>View on The StoryGraph</ExternalLink>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default BookReview;
|