From 73a5d0df6d7e7024c365c040614d4b72f2385b9d Mon Sep 17 00:00:00 2001
From: Masud Rana Sumon <mail.masudranasumon@gmail.com>
Date: Sat, 16 Mar 2024 15:58:12 +0600
Subject: [PATCH] Assignment completed.

---
 src/App.js                 |  3 +--
 src/components/Product.js  | 29 +++++++++++++++++++----------
 src/components/Products.js | 26 ++++++++++++++++++++++++++
 3 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/src/App.js b/src/App.js
index c6e5940..b2ec00b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,4 @@
 import React from 'react';
-
 import Products from './components/Products';
 
 const products = [
@@ -87,7 +86,7 @@ const App = () => {
   return (
     <div>
       <h1 className="title">BD Store</h1>
-      <Products  />
+      <Products products={products} />
     </div>
   );
 };
diff --git a/src/components/Product.js b/src/components/Product.js
index b497da4..34ca71d 100644
--- a/src/components/Product.js
+++ b/src/components/Product.js
@@ -1,18 +1,27 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 
-const Product = () => {
+const Product = (props) => {
+  // const id = props.id;
+  const title = props.title;
+  const price = props.price;
+  const description = props.description;
+  // const category = props.category;
+  const image = props.image;
+  const rating = props.rating;
   return (
+    <>
       <article className="product">
-      <img src="" alt="" />
-      <div className="product__details">
-        <h4 className="product__title">product title</h4>
-        <p>Price: $ product price</p>
-        <p>Rating: product rating rate/5</p>
-        <p className="product__desc">Description: product.description</p>
-        <button className="product__btn btn">Add to cart</button>
-      </div>
-    </article>
+        <img src={image} alt="" />
+        <div className="product__details">
+          <h4 className="product__title">{title}</h4>
+          <p>Price: ${price}</p>
+          <p>Rating:{rating}/5</p>
+          <p className="product__desc">Description: {description}</p>
+          <button className="product__btn btn">Add to cart</button>
+        </div>
+      </article>
+    </>
   );
 };
 
diff --git a/src/components/Products.js b/src/components/Products.js
index 3da8fdd..b53ead7 100644
--- a/src/components/Products.js
+++ b/src/components/Products.js
@@ -1 +1,27 @@
 /* eslint-disable react/prop-types */
+import Product from '../components/Product';
+
+const Products = (props) => {
+  const products = props.products;
+  return (
+    <div className="products">
+      {products.map((product, index) => {
+        const { id, title, price, description, category, image, rating } = product;
+        return (
+          <Product
+            key={index}
+            id={id}
+            title={title}
+            price={price}
+            description={description}
+            category={category}
+            image={image}
+            rating={rating.rate}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default Products;