ajout du boutton pour loader plus d'items

GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js

@@ -1,18 +1,27 @@
+import { Button } from 'react-bootstrap';
 import Item from './Item';
 
 const ItemList = ({ items }) => {
 
     return (
-        <div className='item-list'>
+        <>
-            {items.map((item) => 
+            <div className='item-list'>
-                <Item   imageUrl={item.imageUrl} 
+                {items.map((item) =>
-                        name={item.name} 
+                    <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>
+        </>
+
     )
 }
 

GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js

@@ -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,

GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css

@@ -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
 /* -------------------------------------------------------- */