65 lines
2.4 KiB
JavaScript
65 lines
2.4 KiB
JavaScript
import { Button, Card } from 'react-bootstrap';
|
||
import { BiCart, BiEdit, BiTrash } from 'react-icons/bi';
|
||
|
||
const BookComponent = ({ book, onEdit, onDelete, onAddToCart }) => {
|
||
const displayPrice = book.price === 0 ? "Бесплатно" : `${book.price || 0} руб.`;
|
||
return (
|
||
<div className="col-md-6 mb-4">
|
||
<Card className="h-100 border-0 shadow-sm">
|
||
<div className="row g-0 h-100">
|
||
<div className="col-md-4">
|
||
<Card.Img
|
||
variant="top"
|
||
src={book.image || "images/default-book.jpg"}
|
||
alt={book.title || "Без названия"}
|
||
className="h-100 rounded-start"
|
||
style={{ objectFit: 'cover' }}
|
||
onError={(e) => { e.target.src = 'images/default-book.jpg' }}
|
||
/>
|
||
</div>
|
||
<div className="col-md-8">
|
||
<Card.Body className="d-flex flex-column h-100">
|
||
<Card.Title>{book.title || "Без названия"}</Card.Title>
|
||
<Card.Subtitle className="mb-2 text-muted">
|
||
{book.author || "Автор не указан"}
|
||
</Card.Subtitle>
|
||
<Card.Text className="flex-grow-1">
|
||
{book.description || "Описание отсутствует"}
|
||
</Card.Text>
|
||
<div className="d-flex justify-content-between align-items-center">
|
||
<Card.Text className="h5 me-2 mb-2">
|
||
{displayPrice}
|
||
</Card.Text>
|
||
<div>
|
||
<Button
|
||
variant="primary"
|
||
className="me-2 mb-2"
|
||
onClick={() => onAddToCart(book.id)}
|
||
>
|
||
<BiCart /> В корзину
|
||
</Button>
|
||
<Button
|
||
variant="outline-secondary"
|
||
className="me-2 mb-2"
|
||
onClick={() => onEdit(book.id)}
|
||
>
|
||
<BiEdit /> Редактировать
|
||
</Button>
|
||
<Button
|
||
variant="outline-danger"
|
||
className="mb-2"
|
||
onClick={() => onDelete(book.id)}
|
||
>
|
||
<BiTrash /> Удалить
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Card.Body>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default BookComponent; |