zetaloop
36 lines
983 B
TypeScript
36 lines
983 B
TypeScript
"use client"
|
|
|
|
import { Heart } from "lucide-react"
|
|
import { useState } from "react"
|
|
import { useRequireAuth } from "@/lib/use-require-auth"
|
|
|
|
interface PostLikeButtonProps {
|
|
initialLiked: boolean
|
|
initialCount: number
|
|
}
|
|
|
|
export function PostLikeButton({ initialLiked, initialCount }: PostLikeButtonProps) {
|
|
const { requireAuth } = useRequireAuth()
|
|
const [liked, setLiked] = useState(initialLiked)
|
|
const [count, setCount] = useState(initialCount)
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className="flex items-center gap-1 hover:text-foreground transition-colors"
|
|
onClick={() =>
|
|
requireAuth(() => {
|
|
setLiked((prevLiked) => {
|
|
const nextLiked = !prevLiked
|
|
setCount((prevCount) => (nextLiked ? prevCount + 1 : Math.max(0, prevCount - 1)))
|
|
return nextLiked
|
|
})
|
|
})
|
|
}
|
|
>
|
|
<Heart className={`h-4 w-4 ${liked ? "fill-red-500 text-red-500" : ""}`} />
|
|
{count}
|
|
</button>
|
|
)
|
|
}
|