diff --git a/src/Components/Item.jsx b/src/Components/Item.jsx
index 44adfe4..8a13266 100644
--- a/src/Components/Item.jsx
+++ b/src/Components/Item.jsx
@@ -1,13 +1,18 @@
-import React from "react";
+import React, { useContext } from "react";
import { Link } from "react-router-dom";
+import { SavedContext } from "../Context/SavedContext"
+import filled_Wishlist from '../assets/filled_wishlist.png'
+import outlined_Wishlist from '../assets/outlined_wishlist.png'
const Item = (props) => {
const { image, name, new_price, old_price, id } = props.data;
+ const { AddToList, listItem } = useContext(SavedContext);
return (
-
+
+
-
+
{
+
);
};
diff --git a/src/Components/Popular.jsx b/src/Components/Popular.jsx
index d645947..cfe90be 100644
--- a/src/Components/Popular.jsx
+++ b/src/Components/Popular.jsx
@@ -4,14 +4,18 @@ import Item from "./Item";
const Popular = () => {
return (
-
+
Popular In Women
-
- {dataProduct.map((item) => {
- return
;
- })}
+
+
+
+ {dataProduct.map((item) => {
+ return ;
+ })}
+
+
);
};
diff --git a/src/Context/SavedContext.jsx b/src/Context/SavedContext.jsx
index 267d3e2..065418b 100644
--- a/src/Context/SavedContext.jsx
+++ b/src/Context/SavedContext.jsx
@@ -13,9 +13,10 @@ const defaultWishlist = () => {
const SavedContextProvider = (props) => {
const [listItem, setListItem] = useState(defaultWishlist());
const AddToList = (id) => {
+
setListItem((prev) => {
- const updatedState = { ...prev, [id]: true };
+ const updatedState = { ...prev, [id]: !listItem[id] };
console.log(updatedState);
return updatedState;
diff --git a/src/assets/filled_wishlist.png b/src/assets/filled_wishlist.png
new file mode 100644
index 0000000..3200eac
Binary files /dev/null and b/src/assets/filled_wishlist.png differ
diff --git a/src/assets/outlined_wishlist.png b/src/assets/outlined_wishlist.png
new file mode 100644
index 0000000..68a171d
Binary files /dev/null and b/src/assets/outlined_wishlist.png differ