zetaloop
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { Heart } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { useRequireAuth } from "@/lib/use-require-auth"
|
|
import { useAuthStore } from "@/store/auth"
|
|
import { useFavoriteStore } from "@/store/favorites"
|
|
|
|
interface FavoriteButtonProps {
|
|
initialFavorited: boolean
|
|
targetType: "player" | "shop"
|
|
targetId: string
|
|
}
|
|
|
|
export function FavoriteButton({ initialFavorited, targetType, targetId }: FavoriteButtonProps) {
|
|
const { requireAuth } = useRequireAuth()
|
|
const userId = useAuthStore((s) => s.user?.id)
|
|
const favoritedInStore = useFavoriteStore((state) =>
|
|
userId ? state.isFavorited(userId, targetType, targetId) : false,
|
|
)
|
|
const toggleFavorite = useFavoriteStore((state) => state.toggleFavorite)
|
|
const favorited = userId ? favoritedInStore : initialFavorited
|
|
|
|
return (
|
|
<Button
|
|
variant={favorited ? "default" : "outline"}
|
|
size="sm"
|
|
className="gap-1.5"
|
|
onClick={() =>
|
|
requireAuth(() => {
|
|
if (!userId) return
|
|
toggleFavorite(userId, targetType, targetId)
|
|
})
|
|
}
|
|
>
|
|
<Heart className={`h-4 w-4 ${favorited ? "fill-current" : ""}`} />
|
|
{favorited ? "已收藏" : "收藏"}
|
|
</Button>
|
|
)
|
|
}
|