44 lines
1.1 KiB
JavaScript
44 lines
1.1 KiB
JavaScript
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>
|
|
);
|
|
};
|
|
|
|
|