feat: added Wishlist page

client/package.json

@@ -20,7 +20,8 @@
     "react-razorpay": "^2.0.1",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.16.0",
-    "redux-persist": "^6.0.0"
+    "redux-persist": "^6.0.0",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

client/src/App.jsx

@@ -14,6 +14,8 @@ import Retailer_home from "./pages/Retailer-home";
 import Product from "./pages/Product";
 import Cart from "./pages/Cart";
 import ScrollToTop from "./components/ScrollToTop";
+import Wishlist from "./pages/Wishlist/wishlist";
+import './App.css'
 function App() {
     return (
         <BrowserRouter>
@@ -30,7 +32,9 @@ function App() {
                     <Route path="about" element={<About />} />
                     <Route path="product" element={<Product />} />
                     <Route path="cart" element={<Cart />} />
+                    <Route path="wishlist" element={<Wishlist />} />
                     <Route path="retailer" element={<Layout_retailer />}>
+
                         <Route index element={<Retailer_home />} />
                     </Route>
                 </Route>

client/src/pages/Wishlist/wishlist.jsx

@@ -0,0 +1,62 @@
+// src/components/Wishlist.js
+import React, { useState } from 'react';
+import { v4 as uuidv4 } from 'uuid'; // For generating unique keys
+
+const Wishlist = () => {
+  const [wishlist, setWishlist] = useState([]);
+
+  const addToWishlist = (product) => {
+    if (!wishlist.some(item => item.id === product.id)) {
+      setWishlist(prevWishlist => [...prevWishlist, { ...product, id: uuidv4() }]);
+    }
+  };
+
+  const removeFromWishlist = (productId) => {
+    setWishlist(prevWishlist => prevWishlist.filter(item => item.id !== productId));
+  };
+
+  const products = [
+    { id: uuidv4(), name: 'Running Shoes' },
+    { id: uuidv4(), name: 'Basketball Shoes' },
+    { id: uuidv4(), name: 'Casual Shoes' },
+  ];
+
+  return (
+    <div className="p-4">
+      <h1 className="text-3xl font-bold mb-4">Wishlist</h1>
+      <div className="space-y-4">
+        {products.map(product => (
+          <div key={product.id} className="flex justify-between items-center bg-white p-4 rounded-lg shadow-md">
+            <span>{product.name}</span>
+            <button
+              onClick={() => addToWishlist(product)}
+              className="px-4 py-2 rounded bg-gray-300 text-gray-800 hover:bg-gray-400 hover:text-gray-900"
+            >
+              Add to Wishlist
+            </button>
+          </div>
+        ))}
+      </div>
+      <h2 className="text-2xl font-bold my-4">My Wishlist</h2>
+      {wishlist.length === 0 ? (
+        <p>No items in wishlist</p>
+      ) : (
+        <ul>
+          {wishlist.map(item => (
+            <li key={item.id} className="flex justify-between items-center bg-white p-4 rounded-lg shadow-md">
+              <span>{item.name}</span>
+              <button
+                onClick={() => removeFromWishlist(item.id)}
+                className="px-4 py-2 rounded bg-red-500 text-white"
+              >
+                Remove
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default Wishlist;