Files
Internet-programming/Lab4/lab4/src/components/screens/Basket/components/BasketItem.jsx
2024-01-12 16:21:31 +04:00

44 lines
1.7 KiB
JavaScript

import { Link } from "react-router-dom";
import Image from "../../../../assets/Images/album.jpg";
function BasketItem() {
return (
<div className="card rounded-3 mb-4">
<div className="card-body p-4">
<div className="row d-flex justify-content-between align-items-center">
<div className="col-md-2 col-lg-2 col-xl-2">
<img src={Image} className="img-fluid rounded-3" alt="Koreans" />
</div>
<div className="col-md-3 col-lg-3 col-xl-3">
<p className="lead fw-normal mb-2">Название альбома</p>
<p><span className="text-muted">Описание</span></p>
</div>
<div className="col-md-3 col-lg-3 col-xl-2 d-flex">
<button className="btn-link px-2"
// onClick="this.parentNode.querySelector('input[type=number]').stepDown()"
>
<i className="fas fa-minus"></i>
</button>
<input id="form1" min="0" name="quantity" defaultValue="2" type="number"
className="form-control form-control-sm text-center" />
<button className="btn-link px-2"
// onClick="this.parentNode.querySelector('input[type=number]').stepUp()"
>
<i className="fas fa-plus"></i>
</button>
</div>
<div className="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
<h5 className="mb-0">Цена </h5>
</div>
<div className="col-md-1 col-lg-1 col-xl-1 text-end">
<Link to="#" className="text-black"><i className="far fa-circle-xmark"></i></Link>
</div>
</div>
</div>
</div>
);
}
export default BasketItem;