File size: 2,122 Bytes
f888423 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
const { useState } = React;
import Swal from 'sweetalert2'
import withReactContent from 'sweetalert2-react-content'
import { FaStar, FaGoodreads } from "react-icons/fa";
import { GenreTag } from './GenreTag';
import Heart from '@react-sandbox/heart'
const showDesc = (title, message) => {
withReactContent(
Swal.fire({
title: title,
text: message,
icon: "info",
width: '40rem',
grow: "fullscreen"
})
)
}
export default function BookCard({ title, author_name, avg_rating, genres, description, imageUrl, url, model }) {
const [active, setActive] = useState(false)
return (
<div className="book-card__container">
<div className="book-card__cover">
<img className="book-card__cover__image" src={imageUrl} alt={title} />
</div>
<div className="book-card__info-section">
<div className="book-card__info-section__genre-section">
{genres.map((genre) => (
<GenreTag genre={genre} />
))}
</div>
<h3 className="book-card__info-section__title">{title}</h3>
<p className="book-card__info-section__author">{author_name}</p>
<div className="book-card__info-section__rating">
<FaStar className='book-card__info-section__rating-icon' />
<span className='book-card__info-section__rating-icon-rating'>{avg_rating}</span>
<a href={url} target="_blank" rel="noopener noreferrer">
<FaGoodreads className='book-card__info-section__rating-icon' />
</a>
</div>
<button
className="book-card__info-section__show-description-btn btn btn-sm"
onClick={() => showDesc(title, description)}
>
Show Description
</button>
<Heart
width={34}
height={34}
active={active}
onClick={() => {
Shiny.setInputValue("app-recommend_books-myval", {
title: title,
model: model,
genres: genres
})
console.log()
setActive(!active)}
}
/>
</div>
</div>
);
}
|