From 6eb27b319bbeb857101446098819b7d1d9ab7b4d Mon Sep 17 00:00:00 2001
From: Medenos <masfervic@hotmail.com>
Date: Sun, 16 Oct 2022 20:57:12 -0400
Subject: [PATCH] ajout du boutton pour loader plus d'items

---
 .../src/components/ItemList.js                | 23 +++++++++++++------
 .../grosses-mitaines-ui/src/pages/Morceaux.js |  7 ++++++
 .../src/stylesheets/site.css                  | 22 ++++++++++++++++++
 3 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js b/GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js
index 4424818..44ca1fc 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js
+++ b/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) => 
-                <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>
+        </>
+
     )
 }
 
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
index bae1402..4baa99f 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
+++ b/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,
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
index e14ee52..6d1d056 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/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
 /* -------------------------------------------------------- */