fixed gallery like

src/components/Gallery.tsx

@@ -18,6 +18,8 @@ const Gallery: React.FC<MasonryGalleryProps> = ({
   const [hasMore, setHasMore] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
 
+  console.log({ prompts });
+
   const loadMorePrompts = async () => {
     if (isLoading) return; // Prevent multiple fetches
     setIsLoading(true);

src/components/GalleryItem.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { HeartIcon } from "@heroicons/react/24/outline";
+import React, { useState } from "react";
+import { Heart } from "lucide-react";
 import { Clipboard } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { useLike } from "@/hooks/useLike";
@@ -13,9 +13,24 @@ interface GalleryItemProps {
 
 const GalleryItem: React.FC<GalleryItemProps> = ({ prompt, index }) => {
   const navigate = useNavigate();
-  const { isLiked, handleLike } = useLike(false); // Pass initial state as needed
+  const { isLiked: initialIsLiked, handleLike } = useLike(prompt.liked);
   const { isCopied, handleCopy } = useCopy();
 
+  // Local state to track like status and like count
+  const [isLiked, setIsLiked] = useState(initialIsLiked);
+  const [likeCount, setLikeCount] = useState(prompt.prompt_likes_count);
+
+  const toggleLike = (e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    // Update the like status and like count in the UI
+    setIsLiked((prev) => !prev);
+    setLikeCount((prev) => (isLiked ? prev - 1 : prev + 1));
+
+    // Call the hook's handleLike function to handle backend update
+    handleLike(prompt.id);
+  };
+
   return (
     <div
       key={prompt.id}
@@ -44,26 +59,25 @@ const GalleryItem: React.FC<GalleryItemProps> = ({ prompt, index }) => {
             {index + 1}
           </div>
           <div className="text-white flex">
-            <div
-              className={`mr-2 p-2 rounded-full cursor-pointer ${isCopied ? "bg-green-500" : "hover:bg-white hover:bg-opacity-20"
-                }`}
+            <button
+              className={`p-2 rounded-full transition-colors ${isCopied ? "bg-green-500" : "hover:bg-white/20"}`}
               onClick={(e) => {
                 e.stopPropagation();
                 handleCopy(prompt.text);
               }}
+              aria-label="Copy prompt text"
             >
-              <Clipboard size={18} />
-            </div>
-            <div
-              className={`p-2 rounded-full cursor-pointer ${isLiked ? "text-red-500" : "hover:bg-white hover:bg-opacity-20"
-                }`}
-              onClick={(e) => {
-                e.stopPropagation();
-                handleLike(prompt.id);
-              }}
+              <Clipboard className="w-4 h-4" />
+            </button>
+
+            <button
+              className={`p-2 rounded-full transition-colors flex items-center gap-1 ${isLiked ? "text-red-500" : "hover:bg-white/20"}`}
+              onClick={toggleLike}
+              aria-label={isLiked ? "Unlike" : "Like"}
             >
-              <HeartIcon className="h-5 w-5" />
-            </div>
+              <Heart className={`w-4 h-4 ${isLiked ? "fill-current" : ""}`} />
+              <span className="text-xs">{likeCount}</span>
+            </button>
           </div>
         </div>
       </div>

src/index.css

@@ -24,19 +24,6 @@ body {
   background-color: hsl(225 10% 99%/var(--tw-bg-opacity));
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
-
 @layer base {
   :root {
     --radius: 0.5rem;

src/types/index.ts

@@ -20,6 +20,8 @@ export interface Prompt {
   style: string | null;
   url: string;
   images: string[];
+  prompt_likes_count: number;
+  liked: boolean;
 }
 
 export interface PromptsState {