book sections

src/components/Books/Books.js

@@ -1,11 +1,43 @@
 import React from 'react';
-import './Books.js.css'
+// import './Product.css';
+
+// context api
+import { useStateValue } from '../../state/StateProvider';
+
+const Books = ({ id, title, image, price, rating }) => {
+    const [{ cart }, dispatch] = useStateValue();
+    // cart from state
+
+    const addToCart = () => {
+        // dispatch the item into the data layer
+        dispatch({
+            type: 'ADD_TO_CART',
+            item: {id, title, image, price, rating}
+        })
+    };
 
-const Books = () => {
     return (
-        <div>
-
-        </div>
+        <section className="product">
+            <div className="product__info">
+                <p>{title}</p>
+                <p className="product__price">
+                    <small>$</small>
+                    <strong>{price}</strong>
+                </p>
+
+                <div className="product__rating">
+                    {
+                        Array(rating).fill().map((_, i) => (
+                            <span key={id + i} role="img" aria-label="Rating">⭐</span>
+                        ))
+                    }
+                </div>
+            </div>
+
+            <img src={image} alt="productImg" width="150px" height="200px"/>
+
+            <button onClick={addToCart}>Add to Cart</button>
+        </section>
     )
 }
 

src/components/CartItem/CartItem.css

@@ -13,7 +13,7 @@
     width: 100%;
     object-fit: contain; /* size by ratio */
     margin-bottom: 15px;
-    z-index: 999;
+    z-index: 99;
 }
 
 .cartItem__info {

src/components/Home/Home.js

@@ -2,6 +2,7 @@ import React from 'react';
 import './Home.css';
 import Product from '../Product/Product';
 import DiscoverItem from '../DiscoverItem/DiscoverItem';
+import Books from '../Books/Books';
 
 // images and icons
 import homeImg from '../../img/homeImg.jpg';
@@ -19,7 +20,14 @@ import fees from '../../img/discover/fees.jpg';
 import track from '../../img/discover/track.jpg';
 import service from '../../img/discover/service.jpg';
 // images for books
+import algo from '../../img/books/algo.jpg';
+import htmlCss from '../../img/books/htmlCss.jpg';
 import js from '../../img/books/js.jpg';
+import reactjs from '../../img/books/reactjs.jpg';
+import reactNative from '../../img/books/reactNative.jpg';
+import nodejs from '../../img/books/nodejs.jpg';
+import expressjs from '../../img/books/expressjs.jpg';
+
 
 const Home = () => {
     const dataRow1 = [
@@ -69,7 +77,59 @@ const Home = () => {
             price: 1094.98,
             rating: 4
         }
-    ]
+    ];
+    const books = [
+        {
+            id: "4000001",
+            title: "Algorithms",
+            image: algo,
+            price: 99.99,
+            rating: 5
+        },
+        {
+            id: "4000001",
+            title: "HTML & CSS",
+            image: htmlCss,
+            price: 89.99,
+            rating: 5
+        },
+        {
+            id: "4000001",
+            title: "JavaScript",
+            image: js,
+            price: 120.98,
+            rating: 5
+        },
+        {
+            id: "4000001",
+            title: "React Js",
+            image: reactjs,
+            price: 105.99,
+            rating: 4
+        },
+        {
+            id: "4000001",
+            title: "React Native",
+            image: reactNative,
+            price: 110.99,
+            rating: 5
+        },
+        {
+            id: "4000001",
+            title: "Node Js",
+            image: nodejs,
+            price: 150.99,
+            rating: 4
+        }
+        ,
+        {
+            id: "4000001",
+            title: "Express Js",
+            image: expressjs,
+            price: 79.99,
+            rating: 5
+        }
+    ];
     return (
         <section className="home">
             <div className="home__container">
@@ -138,7 +198,19 @@ const Home = () => {
                     />
                 </div>
 
-                <div className="home__row"></div>
+                <div className="home__row" style={{backgroundColor: 'white'}}>
+                    {
+                        Array(7).fill().map((_, i) => (
+                            <Books 
+                                id={books[i].id}
+                                title={books[i].title}
+                                image={books[i].image}
+                                price={books[i].price}
+                                rating={books[i].rating}
+                            />
+                        ))
+                    }
+                </div>
             </div>
         </section>
     )