50 lines
1.6 KiB
JavaScript
50 lines
1.6 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 './Book.module.css'
|
|
import ExternalLink from '../ExternalLink/ExternalLink'
|
|
|
|
function Book ({ attributes, html }) {
|
|
return (
|
|
<>
|
|
<h1>{attributes.title}<br /><small>by {attributes.author}</small></h1>
|
|
<Link href='./'>Back...</Link>
|
|
|
|
<article>
|
|
<NextSeo
|
|
title={attributes.title} description={attributes.desc} openGraph={
|
|
{
|
|
title: attributes.title,
|
|
description: attributes.desc,
|
|
type: 'article',
|
|
article: {
|
|
publishedTime: attributes.pubdate ?? null
|
|
}
|
|
}
|
|
}
|
|
/>
|
|
|
|
<div>
|
|
<div className={style.layout}>
|
|
{attributes.thumbnailUrl &&
|
|
<Image src={attributes.thumbnailUrl} width={250} height={580} alt='' className={style.thumbnail} />}
|
|
<div>
|
|
<div data-test='content' dangerouslySetInnerHTML={{ __html: html || '<p>(no review)</p>' }} />
|
|
<p>
|
|
<span className='bold'>Genres:</span> {attributes.tags}<br />
|
|
<span className='bold'>Rating:</span> {attributes.stars}/5<br />
|
|
<span className='bold'>Read on:</span> {formatDate(attributes.readDate)}
|
|
</p>
|
|
<p><ExternalLink href={attributes.url}>View on The StoryGraph</ExternalLink></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</>
|
|
|
|
)
|
|
}
|
|
|
|
export default Book
|