vic commit

package.json

@@ -15,6 +15,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "antd": "^5.15.4",
     "axios": "^1.6.7",
     "bootstrap": "^5.3.3",
     "react": "^18.2.0",

src/components/item/ItemBox.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 // Composant Image atomique
 const Image = ({ src, alt }) => {
-  return <img src={src} alt={alt} />;
+  return <img src={src} alt={alt} style={{ display: 'block', margin: 'auto' }} />;
 };
 
 // Composant Description atomique

src/components/item/ItemGrid.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Col, Row } from 'antd';
+import { ItemBox } from './ItemBox';
+
+const GridCell = () => (
+  <ItemBox 
+    imageUrl="https://www.shutterstock.com/image-vector/default-ui-image-placeholder-wireframes-600nw-1037719192.jpg"
+    brandName="GlubGlub GabGalab"
+    price={666}
+    modelName="Satanus"
+    purchaseDate="-6 avant Marcel PAGNOL"
+  />
+);
+
+export const ItemGrid = () => (
+  <>
+    <Row gutter={16}>
+      <Col span={6}><GridCell /></Col>
+      <Col span={6}><GridCell /></Col>
+      <Col span={6}><GridCell /></Col>
+      <Col span={6}><GridCell /></Col>
+    </Row>
+  </>
+);
+
+export default ItemGrid;

src/components/item/ItemPage.jsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { ItemBox } from './ItemBox'; // Assurez-vous que le chemin d'importation soit correct
+
+const itemsPerPage = 4; // Nombre total d'items par page
+const itemsPerRow = 2; // Nombre d'items par rangée
+
+// Fonction pour diviser le tableau d'items en rangées
+const chunkArray = (arr, size) => {
+  const chunkedArr = [];
+  for (let i = 0; i < arr.length; i += size) {
+    chunkedArr.push(arr.slice(i, i + size));
+  }
+  return chunkedArr;
+};
+
+// Composant d'affichage de la page
+export const ItemPage = ({ items }) => {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const handleNextPage = () => {
+    setCurrentPage(prevPage => prevPage + 1);
+  };
+
+  const handlePrevPage = () => {
+    setCurrentPage(prevPage => prevPage - 1);
+  };
+
+  // Divise les items en rangées
+  const chunkedItems = chunkArray(items, itemsPerRow);
+  // Calcule l'index de la première et de la dernière rangée à afficher sur la page courante
+  const startIndex = (currentPage - 1) * (itemsPerPage / itemsPerRow);
+  const endIndex = startIndex + (itemsPerPage / itemsPerRow);
+  // Sélectionne les rangées à afficher sur la page courante
+  const rowsToDisplay = chunkedItems.slice(startIndex, endIndex);
+
+  return (
+    <div>
+      {rowsToDisplay.map((row, index) => (
+        <div key={index} className="item-row">
+          {row.map(item => (
+            <ItemBox key={item.id} {...item} />
+          ))}
+        </div>
+      ))}
+      <div className="pagination">
+        <button onClick={handlePrevPage} disabled={currentPage === 1}>Previous</button>
+        <span>Page {currentPage}</span>
+        <button onClick={handleNextPage} disabled={endIndex >= chunkedItems.length}>Next</button>
+      </div>
+    </div>
+  );
+};
+

src/pages/home.jsx

@@ -1,23 +1,33 @@
 import React from "react";
 
 import { useAuth } from "../hooks";
-import { ItemBox } from "../components/item/item";
+import { ItemPage } from "../components/item/ItemPage";
+
 
 export const Home = () => {
   const { user } = useAuth();
-
   return (
     <div>
+
       <h1>Home page</h1>
       {user && <h2>Hello {user.user.username}</h2>}
-      <ItemBox 
+      <ItemPage items={
-        imageUrl={//"https://static.wikia.nocookie.net/battle-fighters-the-ultimate-fighters/images/4/4b/Globglogabgalab.png/revision/latest?cb=20180829050629"}
+        [
-          "https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/578bae69-d8ef-497b-a717-98873dd69814/dc9u91c-fd73ab67-bc8e-49e4-92f0-7367d361f2fd.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU3OGJhZTY5LWQ4ZWYtNDk3Yi1hNzE3LTk4ODczZGQ2OTgxNFwvZGM5dTkxYy1mZDczYWI2Ny1iYzhlLTQ5ZTQtOTJmMC03MzY3ZDM2MWYyZmQucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.NY_H3uLiv4l0MgogmSxt30irVbaMH5JXR62q898y6LI"}
+          {
-        brandName={"GlubGlub GabGalab"}
+            brandName:"GlubGlub GabGalab"
-        price={666}
+          },{
-        modelName={"Satanus"}
+            brandName:"GlubGlub GabGalab2"
-        purchaseDate={"-6 avant Marcel PAGNOL"}
+          },{
-      />
+            brandName:"GlubGlub GabGalab"
+          },{
+            brandName:"GlubGlub GabGalab2"
+          },{
+            brandName:"GlubGlub GabGalab"
+          },{
+            brandName:"GlubGlub GabGalab2"
+          }
+      ]
+      }></ItemPage>
     </div>
   );
 };