fb6e2e8b5d
* fix className errors by replacing class= with className= in templates; remove unused imports * fix component key warning by adding the node.id key to the component
39 lines
1.2 KiB
JavaScript
39 lines
1.2 KiB
JavaScript
import PropTypes from "prop-types"
|
|
import React from "react"
|
|
import StarRatings from 'react-star-ratings';
|
|
|
|
const BookCard = ({ book }) => (
|
|
<div className="w-56 rounded overflow-hidden shadow-lg m-3">
|
|
<img className="w-full" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1414347376l/18050143.jpg" alt="Sunset in the mountains" />
|
|
<div className="px-6 py-4">
|
|
<div className="font-bold text-xl mb-0">{ book.title }</div>
|
|
<div className="text-gray-700 font-bold text-base mb-1">
|
|
<span className="mr-2 align-middle">{ book.year }</span>
|
|
<StarRatings
|
|
rating={ parseFloat(book.rating) }
|
|
numberOfStars={5}
|
|
starDimension="18px"
|
|
starSpacing="1px"
|
|
starRatedColor="#fa604a"
|
|
/>
|
|
</div>
|
|
<p class="text-gray-700 text-base">
|
|
{ book.author }
|
|
</p>
|
|
</div>
|
|
<div className="px-6 py-4">
|
|
<span className="inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{book.category}</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
BookCard.propTypes = {
|
|
siteTitle: PropTypes.object,
|
|
}
|
|
|
|
BookCard.defaultProps = {
|
|
book:{},
|
|
}
|
|
|
|
export default BookCard
|