Assignment complete

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

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>

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;

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;