[FIX] #157 Implemented 'Buy Now' & 'Add to Cart' Buttons

package.json

@@ -22,8 +22,8 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^5.2.1",
     "react-hook-form": "^7.51.4",
+    "react-icons": "^5.2.1",
     "react-image-zoom": "^1.3.1",
     "react-inner-image-zoom": "^3.0.2",
     "react-lazy-load-image-component": "^1.6.0",

src/components/Buttons/buttons.css

@@ -0,0 +1,40 @@
+/* src/components/buttons.css */
+.button-container {
+    display: flex;
+    gap: 10px;
+  }
+
+  .buy-now-button, .add-to-cart-button {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s;
+  }
+
+  .buy-now-button {
+    background-color: #ff5722;
+    color: white;
+  }
+
+  .buy-now-button:hover {
+    background-color: #e64a19;
+  }
+
+  .add-to-cart-button {
+    background-color: #009688;
+    color: white;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .add-to-cart-button:hover {
+    background-color: #00796b;
+  }
+
+  .cart-icon {
+    font-size: 18px;
+  }
+

src/components/Buttons/buttons.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { FaShoppingCart } from 'react-icons/fa';
+import './buttons.css';
+
+const Buttons = () => {
+  return (
+    <div className="button-container">
+      <button className="buy-now-button">Buy Now</button>
+      <button className="add-to-cart-button">
+        <FaShoppingCart className="cart-icon" /> Add to Cart
+      </button>
+    </div>
+  );
+};
+
+export default Buttons;

src/pages/Home/TopProducts/index.js

@@ -1,3 +1,4 @@
+// src/components/TopProducts.jsx
 import React from 'react';
 import './style.css';
 
@@ -6,6 +7,7 @@ import img2 from '../../../assets/images/thumbnail-1.webp';
 import img3 from '../../../assets/images/thumbnail-1.webp';
 import { Link } from 'react-router-dom';
 import Rating from '@mui/material/Rating';
+import Buttons from '../../../components/Buttons/buttons';
 
 const TopProducts = (props) => {
   return (
@@ -16,7 +18,7 @@ const TopProducts = (props) => {
         <div className="items d-flex align-items-center">
           <div className="img">
             <Link to="">
-              <img src={img1} className="w-100" />
+              <img src={img1} className="w-100" alt="Product 1" />
             </Link>
           </div>
 
@@ -34,13 +36,14 @@ const TopProducts = (props) => {
               <span className="price text-g font-weight-bold">$28.85</span>{' '}
               <span className="oldPrice">$32.8</span>
             </div>
+            <Buttons /> {/* Add the Buttons component here */}
           </div>
         </div>
 
         <div className="items d-flex align-items-center">
           <div className="img">
             <Link to="">
-              <img src={img1} className="w-100" />
+              <img src={img1} className="w-100" alt="Product 2" />
             </Link>
           </div>
 
@@ -58,13 +61,14 @@ const TopProducts = (props) => {
               <span className="price text-g font-weight-bold">$28.85</span>{' '}
               <span className="oldPrice">$32.8</span>
             </div>
+            <Buttons /> {/* Add the Buttons component here */}
           </div>
         </div>
 
         <div className="items d-flex align-items-center">
           <div className="img">
             <Link to="">
-              <img src={img1} className="w-100" />
+              <img src={img1} className="w-100" alt="Product 3" />
             </Link>
           </div>
 
@@ -82,6 +86,7 @@ const TopProducts = (props) => {
               <span className="price text-g font-weight-bold">$28.85</span>{' '}
               <span className="oldPrice">$32.8</span>
             </div>
+            <Buttons /> {/* Add the Buttons component here */}
           </div>
         </div>
       </div>