diff --git a/src/Components/SavedItems.jsx b/src/Components/SavedItems.jsx
new file mode 100644
index 0000000..15eb4cc
--- /dev/null
+++ b/src/Components/SavedItems.jsx
@@ -0,0 +1,109 @@
+
+import React from "react"
+import {useContext} from "react"
+import {SavedContext} from "../Context/SavedContext"
+import { ShopContext } from "../Context/ShopContext";
+
+
+const SavedItems=()=>{
+ const {all_products,listItem,AddToList,RemoveFromList,getListQuantity}=useContext(SavedContext)
+ const {AddToCart}=useContext(ShopContext)
+
+
+ return(
+ <>
+
+
Total products Wishlisted:
{getListQuantity()}
+
+
+ {
+ all_products.map((item) => {
+ if (listItem[item.id] > 0) {
+ return(
+
+
+
+
+ {(item.name.length > 40) ? (
+ // Truncate the name to the maximum length
+ item.name.substring(0, 40) + "..."
+ ): (item.name)
+ }
+
+
Category: {item.category}
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+ })
+ }
+
+
+
+
+
+ >
+ )
+}
+
+export default SavedItems;
+
+/*function CardComponent(item){
+ return(
+
+
+
+
{item.name}
+
#Category:{item.category}
+
+
${item.new_price}
+
${item.old_price}
+
+
+
+
+
+ )
+}*/
+
+
+
+/*
+ {
+ all_products.map((item) => {
+ if (listItem[item.id] > 0) {
+ return(
+
+ )
+ }
+ })
+ }
+
+
+
+
*/
+
+
+/*
+
+
+
*/
diff --git a/src/Context/SavedContext.jsx b/src/Context/SavedContext.jsx
new file mode 100644
index 0000000..267d3e2
--- /dev/null
+++ b/src/Context/SavedContext.jsx
@@ -0,0 +1,75 @@
+import react, { createContext, useState } from "react";
+import all_products from "../assets/all_product";
+export const SavedContext = createContext(null); //ContextAPI for providing state variables to components of Wishlist
+
+const defaultWishlist = () => {
+ let list = {};
+ for (let index = 0; index < all_products.length; index++) {
+ list[index] = false;
+ }
+ return list;
+};
+
+const SavedContextProvider = (props) => {
+ const [listItem, setListItem] = useState(defaultWishlist());
+ const AddToList = (id) => {
+ setListItem((prev) => {
+
+ const updatedState = { ...prev, [id]: true };
+ console.log(updatedState);
+ return updatedState;
+
+
+ });
+ };
+
+ const RemoveFromList = (id) => {
+ if (listItem[id]) {
+ setListItem((prev) => {
+
+ const updatedState = { ...prev, [id]: false };
+
+ console.log(updatedState);
+ return updatedState;
+ });
+ }
+ };
+
+ /*const getCartTotalAmount = () => {
+ let totalAmount = 0;
+ for (const item in cartItem) {
+ if (cartItem[item] > 0) {
+ let itemInfo = all_products.find(
+ (product) => product.id === Number(item)
+ );
+ totalAmount += cartItem[item] * itemInfo.new_price;
+ }
+ }
+ return totalAmount;
+ };*/
+
+ const getListQuantity = () => {
+ let totalQuantity = 0;
+ for (const item in listItem) {
+ if (listItem[item]) {
+ totalQuantity ++;
+ }
+ }
+ return totalQuantity;
+ };
+
+ const contextValue = {
+ all_products,
+ listItem,
+ AddToList,
+ RemoveFromList,
+ getListQuantity,
+ };
+ return (
+
+ {props.children}
+
+ );
+};
+
+export default SavedContextProvider;
diff --git a/src/Pages/WishList.jsx b/src/Pages/WishList.jsx
new file mode 100644
index 0000000..616bd37
--- /dev/null
+++ b/src/Pages/WishList.jsx
@@ -0,0 +1,13 @@
+import React from "react"
+import SavedItems from "../Components/SavedItems"
+
+
+const Saved=()=>{
+ return(
+
+
+
+ )
+}
+export default Saved;
+
diff --git a/src/assets/wishlist_icon.png b/src/assets/wishlist_icon.png
new file mode 100644
index 0000000..67a9e4f
Binary files /dev/null and b/src/assets/wishlist_icon.png differ
diff --git a/src/main.jsx b/src/main.jsx
index b14ad48..2d772bb 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -3,9 +3,13 @@ import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import ShopContextProvider from './Context/ShopContext.jsx'
+import SavedContextProvider from './Context/SavedContext.jsx';
ReactDOM.createRoot(document.getElementById('root')).render(
-
+
+
+
+
,
)