From c9e7f8a00b46b186f4ed0039291e540223be29d7 Mon Sep 17 00:00:00 2001
From: Naieem-55 <naieemislam27@gmail.com>
Date: Fri, 18 Aug 2023 21:31:06 +0600
Subject: [PATCH] Assignment complete

---
 src/App.js                 |  3 +--
 src/components/Product.js  | 13 +++++++------
 src/components/Products.js | 14 ++++++++++++++
 src/index.css              | 23 ++++++++++-------------
 4 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/src/App.js b/src/App.js
index c6e5940..39d2f6c 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..8ccb19d 100644
--- a/src/components/Product.js
+++ b/src/components/Product.js
@@ -1,15 +1,16 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 
-const Product = () => {
+const Product = ({product}) => {
+
   return (
       <article className="product">
-      <img src="" alt="" />
+      <img src={product.image}/>
       <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>
+        <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>
diff --git a/src/components/Products.js b/src/components/Products.js
index 3da8fdd..173d360 100644
--- a/src/components/Products.js
+++ b/src/components/Products.js
@@ -1 +1,15 @@
 /* eslint-disable react/prop-types */
+import React from "react";
+import Product from "./Product";
+
+function Products(props){
+    const{products} = props;
+    return(
+        <div className="products"> 
+         {products.map((product) =>
+         <Product key={product.id} product={product}></Product>)}
+        </div>
+    );
+}
+
+export default Products;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ee9f4f7..f3a537f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,9 +1,9 @@
 :root {
   --border-radius: 0.6rem;
-  --text-color: #fff;
+  --text-color: #9cdfd9;
 }
 
-* {
+*{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
@@ -16,7 +16,7 @@ html {
 }
 
 body {
-  background-color: #4c4c4c;
+  background-color: #8adaee;
 }
 
 img {
@@ -31,12 +31,12 @@ img {
   transition: all 0.3s;
 
   width: 5rem;
-  color: rgb(195, 154, 77);
+  color: rgb(224, 180, 202);
 }
 
 .btn:hover {
-  background-color: orange;
-  color: black;
+  background-color: rgb(199, 25, 132);
+  color: rgb(0, 0, 0);
 }
 
 .title {
@@ -53,12 +53,11 @@ img {
   padding: 0.5rem;
 }
 .product {
-  background-color: #2c2c2c;
+  background-color: #8cb5f3;
   display: flex;
   flex-direction: column;
 }
-.product__img {
-}
+
 .product__details {
   padding: 0.5rem;
   display: flex;
@@ -69,12 +68,10 @@ img {
 
 .product__desc {
   font-size: 0.8rem;
-  color: white;
-  font-family: fantasy;
+  color: rgb(7, 7, 7);
 }
 .product__title {
-  color: white;
-  font-family: 'Roboto', sans-serif;
+  color: rgb(216, 155, 155);
 }
 .product__price {
   color: orange;