Made Product detail page dynamic

src/App.jsx

@@ -120,6 +120,7 @@ export default function App() {
           <Route path="help" element={<Help />} /> {/* Help page route */}
           <Route path="privacy" element={<Privacy />} /> {/* Privacy policy page route */}
           <Route path="cart" element={<Cart />} /> {/* Cart page route */}
+          <Route path="productDetails/:productId" element={<ProductDetails />} /> {/* Product details route */}
           <Route path="wishlist" element={<Wishlist />} /> {/* Wishlist page route */}
           <Route path="contact" element={<Contact />} /> {/* Contact page route */}
           <Route path="forgot-password" element={<ForgotPasswordForm />} /> {/* Forgot password page route */}
@@ -153,7 +154,6 @@ export default function App() {
             <Route path="orderDetails" element={<OrderDetails />} /> {/* Order details route */}
             <Route path="myOrders" element={<MyOrders />} /> {/* My orders route */}
             <Route path="checkout" element={<Checkout />} /> {/* Checkout route */}
-            <Route path="productDetails" element={<ProductDetails />} /> {/* Product details route */}
             <Route path="payment" element={<Payment />} /> {/* Payment route */}
             <Route path="dashboard-order" element={<DashboardOrders />} />
             {/* Dashboard orders route */}

src/User/components/Popular_Categories/ProductGrid.jsx

@@ -8,12 +8,7 @@ import { FaHeart, FaRegHeart } from "react-icons/fa";
 
 // ProductGrid component to display a grid of products
 function ProductGrid({ products, headingText }) {
-  // Function to get a random discount percentage
-  function getRandomDiscountPercent(price) {
-    return (price % 40) + 10;
-  }
 
-  // Function to calculate the new price after discount
   function getNewPrice(discountPercent, actualPrice) {
     return ((100 - discountPercent) * actualPrice / 100).toFixed(2);
   }
@@ -25,10 +20,8 @@ function ProductGrid({ products, headingText }) {
       </h1>
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 ml-10">
         {products.map((product) => {
-          const discountPercent = getRandomDiscountPercent(product.price);
-          product.discountPercent = discountPercent;
-          product.newPrice = getNewPrice(discountPercent, product.price);
-          return <ProductCard key={product.id} product={product} />;
+          product.newPrice = getNewPrice(product.discountPercentage, product.price)
+          return <ProductCard key={product.id} product={product} />
         })}
       </div>
     </div>
@@ -42,9 +35,8 @@ function ProductCard({ product }) {
   const cartItems = useSelector((state) => state.cart.items);
   const wishlistItems = useSelector((state) => state.wishlist.items);
 
-  // Function to handle product click and navigate to product details page
-  const handleClick = () => {
-    navigate("/productDetails");
+  const handleClick = (productId) => {
+    navigate(`/productDetails/${productId}`);
   };
 
   // Function to add product to cart
@@ -86,7 +78,7 @@ function ProductCard({ product }) {
       )}
       {/* Product image */}
       <img
-        onClick={handleClick}
+        onClick={() => handleClick(product.id)}
         src={product.image}
         alt={product.title}
         className="w-full h-60 object-contain"