glubglub

package-lock.json

@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "axios": "^1.6.7",
+        "bootstrap": "^5.3.3",
         "react": "^18.2.0",
         "react-cookie": "^7.0.2",
         "react-dom": "^18.2.0",
@@ -758,6 +759,16 @@
         "node": ">=16"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.14.2",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.2.tgz",
@@ -1663,6 +1674,24 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "axios": "^1.6.7",
+    "bootstrap": "^5.3.3",
     "react": "^18.2.0",
     "react-cookie": "^7.0.2",
     "react-dom": "^18.2.0",

src/components/item/item.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+// Composant Image atomique
+const Image = ({ src, alt }) => {
+  return <img src={src} alt={alt} />;
+};
+
+// Composant Description atomique
+const Description = ({ title, children }) => {
+  return (
+    <div className="description">
+      <h2>{title}</h2>
+      {children}
+    </div>
+  );
+};
+
+// Composant Caractéristique atomique
+const Characteristic = ({ label, value }) => {
+  return (
+    <div className="characteristic">
+      <strong>{label}:</strong> {value}
+    </div>
+  );
+};
+
+// Composant Détails du Produit (combinaison atomique)
+export const ItemBox = ({ imageUrl, modelName, brandName, purchaseDate, price, onEdit }) => {
+  return (
+    <div className="product-details">
+      <Image src={imageUrl} alt="Product" />
+      <Description title="Product Information">
+        <Characteristic label="Model" value={modelName} />
+        <Characteristic label="Brand" value={brandName} />
+        <Characteristic label="Purchase Date" value={purchaseDate} />
+        <Characteristic label="Price" value={price} />
+      </Description>
+      <button onClick={onEdit}>Edit</button>
+    </div>
+  );
+};
+
+

src/pages/home.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { useAuth } from "../hooks";
+import { ItemBox } from "../components/item/item";
 
 export const Home = () => {
   const { user } = useAuth();
@@ -9,6 +10,14 @@ export const Home = () => {
     <div>
       <h1>Home page</h1>
       {user && <h2>Hello {user.user.username}</h2>}
+      <ItemBox 
+        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"}
+        price={666}
+        modelName={"Satanus"}
+        purchaseDate={"-6 avant Marcel PAGNOL"}
+      />
     </div>
   );
 };