Liked product

src/Favourite/liked.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from "react";
+import { supabase } from "../utils/client"; // Adjust the path as necessary
+import { useNavigate } from "react-router-dom";
+
+interface LikedProduct {
+  id: number;
+  name: string;
+  image: string;
+  price: number;
+  desc: string;
+  created_at: string;
+}
+
+function Liked() {
+  const [likedProducts, setLikedProducts] = useState<LikedProduct[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchLikedProducts = async () => {
+      const { data, error } = await supabase
+        .from('liked_products') // Replace with your table name
+        .select('*');
+
+      if (error) {
+        setError('Failed to fetch liked products');
+        console.error('Error fetching liked products:', error);
+      } else {
+        setLikedProducts(data || []);
+      }
+      setLoading(false);
+    };
+
+    fetchLikedProducts();
+  }, []);
+
+  const navigate = useNavigate();
+
+  const handleAddToCart = (product: LikedProduct) => {
+    navigate("/home/shop/product", { state: product });
+  };
+
+  if (loading) {
+    return <p>Loading...</p>;
+  }
+
+  if (error) {
+    return <p>{error}</p>;
+  }
+
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl font-bold mb-4">Liked Products</h1>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        {likedProducts.length === 0 ? (
+          <p>No liked products found.</p>
+        ) : (
+          likedProducts.map((product) => (
+            <div key={product.id} className="relative bg-white border border-gray-300 rounded-lg shadow-lg overflow-hidden">
+              <img
+                src={product.image}
+                alt={product.name}
+                className="w-full h-64 object-cover"
+              />
+              <div className="p-4">
+                <h3 className="text-lg font-semibold text-gray-800">{product.name}</h3>
+                <p className="text-gray-600 mt-2">{product.desc}</p>
+                <p className="text-xl font-bold text-gray-900 mt-2">₹{product.price}</p>
+                <button
+                  onClick={() => handleAddToCart(product)}
+                  className="mt-4 px-4 py-2 bg-blue-500 text-white font-bold rounded hover:bg-blue-600 border border-gray-300"
+                >
+                  Add to Cart
+                </button>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Liked;

src/components/Product.tsx

@@ -1,4 +1,7 @@
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { HiHeart } from "react-icons/hi";
+import { supabase } from "../utils/client";
 
 interface Data {
   name: string;
@@ -9,27 +12,49 @@ interface Data {
 
 function Product({ name, image, price, desc }: Data) {
   const navigate = useNavigate();
+  const [liked, setLiked] = useState<boolean>(false);
 
   const handleNavigate = () => {
     navigate("/home/shop/product", { state: { name, image, price, desc } });
   };
+  const handleLike = async () => {
+    setLiked(!liked);
+        // If product is liked, add it to Supabase
+    if (!liked) {
+      const { error } = await supabase
+        .from("liked_products")
+        .insert([
+          { name, image, price, desc, created_at: new Date().toISOString() }
+        ]);
+        if(error){
+          console.error("error inserting product into supabase",error)
+        }
+    }
+  };
   return (
     <>
       <div className="flex flex-col">
+        <div
+          className={`relative top-[10%] left-[75%] p-2 z-10 rounded-full ${
+            liked ? "text-red-500" : "text-gray-500"
+          } hover:text-red-500 transition-colors duration-300 cursor-pointer`}
+          onClick={handleLike}
+        >
+          <HiHeart size={24} color={liked ? "red" : "white"} />
+        </div>
         <button onClick={handleNavigate}>
           <div className="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-h-8 xl:aspect-w-7">
             <img
               src={image}
               alt="Tall slender porcelain bottle with natural clay textured body and cork stopper."
-              className="h-[500px] w-full object-cover object-center group-hover:opacity-75 hover:duration-300"
+              className="h-[500px] w-full object-cover object-center  "
             />
           </div>
+
           <h3 className="mt-4 text-sm text-gray-700">{name}</h3>
           <p className="mt-1 text-lg font-medium text-gray-900">₹{price}</p>
         </button>
-
       </div>
-
     </>
   );
 }

src/pages/Profile/Profile.tsx

@@ -6,6 +6,7 @@ import { useNavigate } from "react-router-dom";
 import Head from "../../components/Head";
 import Loader from "../../components/Loader/Loader";
 import EditProfileModal from "./EditProfileModal";
+import Liked from "../../Favourite/liked";
 
 interface USER {
   username: string;
@@ -66,7 +67,14 @@ function Profile() {
 
       <div className="avatar">
         <div className="w-24 sm:w-80 rounded-full">
-          <img src={userData.profilepicture ? userData.profilepicture : "/images/winter2.jpg"} alt="" />
+          <img
+            src={
+              userData.profilepicture
+                ? userData.profilepicture
+                : "/images/winter2.jpg"
+            }
+            alt=""
+          />
         </div>
       </div>
       <div className="w-full text-center">
@@ -137,8 +145,10 @@ function Profile() {
                 </span>
               </div>
             </div>
+
           </div>
         </div>
+            <Liked />
       </div>
     </div>
   );