wip emoji reactions

src/app/feed/components/PostItem.tsx

@@ -44,10 +44,63 @@ export default function PostItem({ post }: PostItemProps) {
           ))}
         </div>
       )}
+
+      <PostReactions post={post} />
     </article>
   )
 }
 
+interface PostReactionsProps {
+  post: Post
+}
+
+function PostReactions({ post }: PostReactionsProps) {
+  // State to track user's reactions
+  const [userReactions, setUserReactions] = useState<Set<string>>(new Set())
+
+  // Function to format reaction count
+  const formatCount = (count: number): string => {
+    if (count < 1000) return count.toString()
+    if (count < 10000) return `${(count / 1000).toFixed(1)}K`
+    return `${Math.floor(count / 1000)}K`
+  }
+
+  // Function to handle reaction click
+  const handleReactionClick = (emoji: string) => {
+    setUserReactions((prev) => {
+      const newReactions = new Set(prev)
+      if (newReactions.has(emoji)) {
+        newReactions.delete(emoji)
+      } else {
+        newReactions.add(emoji)
+      }
+      return newReactions
+    })
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2 mt-3 justify-end">
+      {post.reactions.map((reaction) => {
+        const isSelected = userReactions.has(reaction.emoji)
+        return (
+          <button
+            key={reaction.emoji}
+            onClick={() => handleReactionClick(reaction.emoji)}
+            className={`flex items-center px-2 py-1 rounded-full border ${
+              isSelected ? 'bg-gray-100 border-gray-400' : 'bg-white border-gray-200'
+            } hover:bg-gray-100 transition-colors`}
+          >
+            <span className="mr-1">{reaction.emoji}</span>
+            <span className="text-xs text-gray-600">
+              {formatCount(reaction.count + (isSelected ? 1 : 0))}
+            </span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
 interface PostMediaProps {
   media: PostMedia
 }