glubglub

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>
+  );
+};
+
+