diff --git a/src/components/WishlistCard.tsx b/src/components/WishlistCard.tsx
new file mode 100644
index 00000000..769018e2
--- /dev/null
+++ b/src/components/WishlistCard.tsx
@@ -0,0 +1,114 @@
+import { useAppDispatch, useAppSelector } from '@/app/hooks';
+import Button from './form/Button';
+import { Product } from '@/types/Product';
+import { IoClose } from 'react-icons/io5';
+import { removeFromWishlist } from '@/features/Products/ProductSlice';
+
+const WishlistCard = ({ product }: { product: Product }) => {
+ const { token } = useAppSelector((state) => state.signIn);
+ const dispatch = useAppDispatch();
+ return (
+
+
dispatch(removeFromWishlist({ token, id: product.id }))}
+ />
+
+
+
+
+
+ {product.quantity > 0 ? 'In Stock' : 'Out of Stock'}
+
+
+ {product.name.slice(0, 20)}
+ {product.name.length > 20 ? '...' : ''}
+
+
+
+
{product.averageRating}
+ {Array.from({ length: Math.floor(product.averageRating) }).map(
+ (_, index) => {
+ return (
+
+ );
+ }
+ )}
+
+
+ {Array.from({ length: Math.floor(4 - product.averageRating) }).map(
+ (_, index) => {
+ return (
+
+ );
+ }
+ )}
+
+
+ ${500}
+ ${700}
+
+
+
+
+ );
+};
+
+export default WishlistCard;
diff --git a/src/components/home/ProductCard.tsx b/src/components/home/ProductCard.tsx
index a6841df7..a0f53df7 100644
--- a/src/components/home/ProductCard.tsx
+++ b/src/components/home/ProductCard.tsx
@@ -1,10 +1,15 @@
+import { useAppDispatch, useAppSelector } from '@/app/hooks';
+import { addToWishlist } from '@/features/Products/ProductSlice';
import { Product } from '@/types/Product';
+import { useEffect } from 'react';
interface ProductCardProps {
product: Product;
}
function ProductCard({ product }: ProductCardProps) {
+ const dispatch = useAppDispatch();
+ const { token } = useAppSelector((state) => state.signIn);
return (
18 && '...'}