From 8384ce27ccd74ed5ab3bd835d9a7be3ddd458818 Mon Sep 17 00:00:00 2001
From: hosead6168 <dominique11h@yahoo.com>
Date: Mon, 21 Mar 2022 04:35:52 -0500
Subject: [PATCH] feat(*): added related products

---
 src/Components/Product/DetailProduct.jsx   |  73 +++++++-------
 src/Components/Product/ProductItem.css     |   8 ++
 src/Components/Product/RelatedProducts.css |  74 +++++++++++++++
 src/Components/Product/RelatedProducts.jsx | 105 +++++++++++++++++++++
 4 files changed, 228 insertions(+), 32 deletions(-)
 create mode 100644 src/Components/Product/RelatedProducts.css
 create mode 100644 src/Components/Product/RelatedProducts.jsx

diff --git a/src/Components/Product/DetailProduct.jsx b/src/Components/Product/DetailProduct.jsx
index a9842d30..065ce17a 100644
--- a/src/Components/Product/DetailProduct.jsx
+++ b/src/Components/Product/DetailProduct.jsx
@@ -2,9 +2,11 @@ import React, { useContext, useState, useEffect } from 'react';
 
 import { useParams, Link } from 'react-router-dom';
 
-import ProductItem from './ProductItem';
+import RelatedProducts from './RelatedProducts';
 import { GlobalState } from '../../GlobalState';
 import './DetailProduct.css';
+import NavBar from '../../Components/NavBar/NavBar';
+import Footer from '../../Components/Footer/Footer';
 
 const DetailProduct = () => {
     const params = useParams()
@@ -25,38 +27,45 @@ const DetailProduct = () => {
     const { images, title, price, description, content, sold, category, product_id } = detailProduct;
     return (
         <>
-            <div className="shop-container">
-                <div>
-                    <div className="detail">
-                        <img src={images.url} alt="Product Detail" />
-                        <div className="box-detail">
-                            <div className="row">
-                                <h2>{title}</h2>
-                                <h6>#id: {product_id}</h6>
-                            </div>
-                            <span>$ {price}</span>
-                            <p>{description}</p>
-                            <p>{content}</p>
-                            <p>Sold: {sold}</p>
-                            <Link to="/cart" className="cart"
-                                onClick={() => addCart(detailProduct)}>
-                                Buy Now
-                            </Link>
-                        </div>
-                    </div>
-                    <div>
-                        <h2>Related Products</h2>
-                        <div className="products">
-                            {
-                                products.map(product => {
-                                    return product.category === category
-                                        ? <ProductItem key={product._id} product={product} /> : null
-                                })
-                            }
-                        </div>
-                    </div>
-                </div>
+          <NavBar/>
+
+          <div className="container">
+            <div className="row my-5">
+              <div className="col-md-6 text-center">
+                <img src={images.url} width={'2000rem'}  alt='product' />
+              </div>
+              <div className="col-md-6">
+                <h2>{title || "No Title"}</h2>
+                <h6>#id: {product_id}</h6>
+                <p className="text-wrap">
+                  {description || "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}
+                </p>
+                <p>{content || "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}</p>
+                <h2>Categories</h2>
+                {/* {category.map(item => <span class="badge rounded-pill bg-info text-dark mb-3 me-2">{item}</span>)} */}
+              <span class="badge rounded-pill bg-info text-dark mb-3 me-2">{category || "software"}</span>
+                <h2>Price</h2>
+                <h4>${price || "25"} </h4>
+                <p>Sold: {sold}</p>
+                <Link to="/cart" className="cart"
+                  onClick={() => addCart(detailProduct)}>
+                    Buy Now
+                </Link>
+              </div>
+            </div>
+          </div>
+          <div>
+            <h2>Related Products</h2>
+            <div>
+            {
+              products.map(product => {
+              return product.category === category
+              ? <RelatedProducts key={product._id} product={product} /> : null
+            })
+            }
             </div>
+          </div>
+          <Footer/>
         </>
     )
 }
diff --git a/src/Components/Product/ProductItem.css b/src/Components/Product/ProductItem.css
index 82839bc0..2d5b7ab5 100644
--- a/src/Components/Product/ProductItem.css
+++ b/src/Components/Product/ProductItem.css
@@ -1,3 +1,10 @@
+.related {
+  display: flex;
+  justify-content: center;
+  width: fit-content;
+  padding: 0px 20px 0px 20px;
+}
+
 .product_card {
   max-width: 300px;
   margin: 20px 0;
@@ -18,6 +25,7 @@
   opacity: 0;
   transition: 0.5s;
 }
+
 .product_box:hover {
   opacity: 1;
 }
diff --git a/src/Components/Product/RelatedProducts.css b/src/Components/Product/RelatedProducts.css
new file mode 100644
index 00000000..af662155
--- /dev/null
+++ b/src/Components/Product/RelatedProducts.css
@@ -0,0 +1,74 @@
+#team {
+  padding: 60px 0;
+  text-align: center;
+  background-color: #6f85ff;
+  color: #fff;
+}
+#team h2 {
+  position: relative;
+  padding: 0px 0px 15px;
+}
+#team p {
+  font-size: 15px;
+  font-style: italic;
+  padding: 0px;
+  margin: 25px 0px 40px;
+}
+#team h2::after {
+  content: "";
+  border-bottom: 2px solid #fff;
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
+  left: 0px;
+  width: 90px;
+  margin: 0 auto;
+  display: block;
+}
+#team .member {
+  margin-bottom: 20px;
+  position: relative;
+  overflow: hidden;
+  background-color: #ffffff;
+  padding: 10px;
+  border-radius: 15px 0px 15px 0px;
+  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.4);
+}
+#team .member .member-info {
+  display: block;
+  position: absolute;
+  bottom: 0px;
+  left: -200px;
+  transition: 0.4s;
+  padding: 15px 0;
+  background: rgba(0, 0, 0, 0.4);
+}
+#team .member:hover .member-info {
+  left: 0px;
+  right: 0px;
+}
+#team .member h4 {
+  font-weight: 700;
+  margin-bottom: 2px;
+  font-size: 18px;
+  color: #fff;
+}
+#team .member span {
+  font-style: italic;
+  display: block;
+  font-size: 13px;
+}
+#team .member .social-links {
+  margin-top: 15px;
+}
+#team .member .social-links a {
+  transition: none;
+  color: #fff;
+}
+#team .member .social-links a:hover {
+  color: #ffc107;
+}
+#team .member .social-links i {
+  font-size: 18px;
+  margin: 0 2px;
+}
diff --git a/src/Components/Product/RelatedProducts.jsx b/src/Components/Product/RelatedProducts.jsx
new file mode 100644
index 00000000..91571dc5
--- /dev/null
+++ b/src/Components/Product/RelatedProducts.jsx
@@ -0,0 +1,105 @@
+import React from 'react';
+
+import './ProductItem.css';
+import './RelatedProducts.css';
+
+const RelatedProducts = ({ product}) => {
+
+    return (
+        <>
+            <div className='related' style={{backgroundSize:'cover', backgroundRepeat:'no-repeat',backgroundImage:`url(${product.images.url})`}}>
+                {/* this image is needed in order for the div's height to scale to the image */}
+                <img src={product.images.url} alt="product" style={{visibility: "hidden", maxWidth:"100%", maxHeight:'100%'}}/>
+            </div>
+            <section id="team">
+              <div class="container">
+                  <div class="row justify-content-center">
+                      <div class="col-md-6">
+                        <h2>Meet Our Team</h2>
+                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text</p>
+                      </div>
+                  </div>
+                  <div class="row">
+                      <div class="col-lg-3 col-md-6">
+                          <div class="member">
+                            <div class="member-img">
+                                <img src="/images/img-500x500-1.jpg" class="img-fluid" alt=""/>
+                            </div>
+                              <div class="member-info">
+                                  <h4>Gaurav Kumar</h4>
+                                  <span>Web Designer</span>
+                                  <div class="social-links">
+                                      <a href="#"><i class="fab fa-facebook-f"></i></a>
+                                      <a href="#"><i class="fab fa-twitter"></i></a>
+                                      <a href="#"><i class="fab fa-linkedin-in"></i></a>
+                                      <a href="#"><i class="fab fa-pinterest-p"></i></a>
+                                      <a href="#"><i class="fab fa-instagram"></i></a>
+                                  </div>
+                              </div>
+                          </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-6">
+                          <div class="member">
+                            <div class="member-img">
+                                <img src="/images/img-500x500-1.jpg" class="img-fluid" alt=""/>
+                            </div>
+                              <div class="member-info">
+                                  <h4>Parveen Singh</h4>
+                                  <span>Web Developer</span>
+                                  <div class="social-links">
+                                      <a href="#"><i class="fab fa-facebook-f"></i></a>
+                                      <a href="#"><i class="fab fa-twitter"></i></a>
+                                      <a href="#"><i class="fab fa-linkedin-in"></i></a>
+                                      <a href="#"><i class="fab fa-pinterest-p"></i></a>
+                                      <a href="#"><i class="fab fa-instagram"></i></a>
+                                  </div>
+                              </div>
+                          </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-6">
+                          <div class="member">
+                            <div class="member-img">
+                                <img src="/images/img-500x500-1.jpg" class="img-fluid" alt=""/>
+                            </div>
+                              <div class="member-info">
+                                  <h4>Pardeep Kumar</h4>
+                                  <span>SEO Expert</span>
+                                  <div class="social-links">
+                                      <a href="#"><i class="fab fa-facebook-f"></i></a>
+                                      <a href="#"><i class="fab fa-twitter"></i></a>
+                                      <a href="#"><i class="fab fa-linkedin-in"></i></a>
+                                      <a href="#"><i class="fab fa-pinterest-p"></i></a>
+                                      <a href="#"><i class="fab fa-instagram"></i></a>
+                                  </div>
+                              </div>
+                          </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-6">
+                          <div class="member">
+                            <div class="member-img">
+                                <img src="/images/img-500x500-1.jpg" class="img-fluid" alt=""/>
+                            </div>
+                              <div class="member-info">
+                                  <h4>Gurdeep Singh</h4>
+                                  <span>ISO Developer</span>
+                                  <div class="social-links">
+                                      <a href="#"><i class="fab fa-facebook-f"></i></a>
+                                      <a href="#"><i class="fab fa-twitter"></i></a>
+                                      <a href="#"><i class="fab fa-linkedin-in"></i></a>
+                                      <a href="#"><i class="fab fa-pinterest-p"></i></a>
+                                      <a href="#"><i class="fab fa-instagram"></i></a>
+                                  </div>
+                              </div>
+                          </div>
+                      </div>
+                  </div>
+              </div>
+          </section>
+        </>
+    )
+}
+
+export default RelatedProducts;