ajout du boutton pour loader plus d'items
This commit is contained in:
parent
64b97f23c4
commit
6eb27b319b
@ -1,18 +1,27 @@
|
||||
import { Button } from 'react-bootstrap';
|
||||
import Item from './Item';
|
||||
|
||||
const ItemList = ({ items }) => {
|
||||
|
||||
return (
|
||||
<div className='item-list'>
|
||||
{items.map((item) =>
|
||||
<Item imageUrl={item.imageUrl}
|
||||
name={item.name}
|
||||
<>
|
||||
<div className='item-list'>
|
||||
{items.map((item) =>
|
||||
<Item imageUrl={item.imageUrl}
|
||||
name={item.name}
|
||||
price={item.price}
|
||||
status={item.status}
|
||||
newPrice={item.newPrice}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Button className='btn-load-more'>
|
||||
...
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -15,6 +15,7 @@ const Morceaux = () => {
|
||||
|
||||
const products = [
|
||||
{
|
||||
"id":0,
|
||||
"name": "Ceinture flèchée",
|
||||
"status": 0,
|
||||
"price": 85.86,
|
||||
@ -22,6 +23,7 @@ const Morceaux = () => {
|
||||
"imageUrl": "/images/ceintureflechee.jpg"
|
||||
},
|
||||
{
|
||||
"id":1,
|
||||
"name": "Chandail de nowel",
|
||||
"status": 2,
|
||||
"price": 69.50,
|
||||
@ -29,6 +31,7 @@ const Morceaux = () => {
|
||||
"imageUrl": "/images/chandailquetaine.jpg"
|
||||
},
|
||||
{
|
||||
"id":2,
|
||||
"name": "Pantoufles du Canadien en Phentex",
|
||||
"status": 5,
|
||||
"price": 15.64,
|
||||
@ -36,6 +39,7 @@ const Morceaux = () => {
|
||||
"imageUrl": "/images/pantouflesCH.jpg"
|
||||
},
|
||||
{
|
||||
"id":3,
|
||||
"name": "Jean-Luc Mongrain",
|
||||
"status": 1,
|
||||
"price": 1453.12,
|
||||
@ -43,6 +47,7 @@ const Morceaux = () => {
|
||||
"imageUrl": "/images/jeanlucmongrain.jpg"
|
||||
},
|
||||
{
|
||||
"id":4,
|
||||
"name": "Mitaines de laine",
|
||||
"status": 4,
|
||||
"price": 24.99,
|
||||
@ -50,6 +55,7 @@ const Morceaux = () => {
|
||||
"imageUrl": "/images/mitaines.jpg"
|
||||
},
|
||||
{
|
||||
"id":5,
|
||||
"name": "Sous-vêtements coquins",
|
||||
"status": 3,
|
||||
"price": 19.99,
|
||||
@ -57,6 +63,7 @@ const Morceaux = () => {
|
||||
"imageUrl": "/images/kokin.jpg"
|
||||
},
|
||||
{
|
||||
"id":6,
|
||||
"name": "Doudou douce et grise",
|
||||
"status": 3,
|
||||
"price": 99.99,
|
||||
|
@ -346,6 +346,28 @@ html {
|
||||
}
|
||||
|
||||
|
||||
.btn-primary{
|
||||
background-color: purple;
|
||||
color:beige;
|
||||
border-color: darkslateblue;
|
||||
}
|
||||
|
||||
.btn-primary:hover{
|
||||
background-color: plum !important;
|
||||
border-color: purple !important;
|
||||
color:darkslateblue !important;
|
||||
}
|
||||
|
||||
.btn-load-more{
|
||||
display: block;
|
||||
margin-left:auto;
|
||||
margin-right: auto;
|
||||
margin-top:10px;
|
||||
margin-bottom: 10px;
|
||||
width:85%;
|
||||
}
|
||||
|
||||
|
||||
/* -------------------------------------------------------- */
|
||||
/* specification pour les moyennes écrans
|
||||
/* -------------------------------------------------------- */
|
||||
|
Loading…
Reference in New Issue
Block a user