62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
|
import { Heart, LoaderCircle } from "lucide-react";
|
||
|
|
import { useEffect } from "react";
|
||
|
|
import { useI18n } from "../i18n";
|
||
|
|
import { useFavorites } from "./FavoritesProvider";
|
||
|
|
|
||
|
|
type FavoriteButtonProps = {
|
||
|
|
resourceId: string;
|
||
|
|
className?: string;
|
||
|
|
size?: "sm" | "md";
|
||
|
|
};
|
||
|
|
|
||
|
|
export function FavoriteButton({
|
||
|
|
resourceId,
|
||
|
|
className = "",
|
||
|
|
size = "md",
|
||
|
|
}: FavoriteButtonProps) {
|
||
|
|
const { t } = useI18n();
|
||
|
|
const favorites = useFavorites();
|
||
|
|
const status = favorites.statusFor(resourceId);
|
||
|
|
const pending = favorites.pendingIds.has(resourceId);
|
||
|
|
const isFavorite = status === "favorited";
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
void favorites.ensureFavoriteIds([resourceId]).catch(() => undefined);
|
||
|
|
}, [favorites, resourceId]);
|
||
|
|
|
||
|
|
const dimension = size === "sm" ? "h-9 w-9" : "h-10 w-10";
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={(event) => {
|
||
|
|
event.preventDefault();
|
||
|
|
event.stopPropagation();
|
||
|
|
void favorites.toggleFavorite(resourceId).catch(() => undefined);
|
||
|
|
}}
|
||
|
|
disabled={pending}
|
||
|
|
aria-pressed={isFavorite}
|
||
|
|
aria-label={isFavorite ? t("favoriteRemove") : t("favoriteAdd")}
|
||
|
|
title={isFavorite ? t("favoriteRemove") : t("favoriteAdd")}
|
||
|
|
className={[
|
||
|
|
"inline-flex shrink-0 items-center justify-center rounded-full border outline-none transition active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait disabled:opacity-70",
|
||
|
|
dimension,
|
||
|
|
isFavorite
|
||
|
|
? "border-ark-gold/60 bg-ark-gold text-black hover:bg-ark-gold2"
|
||
|
|
: "border-white/10 bg-[#191921]/90 text-white hover:border-ark-gold/50 hover:bg-ark-gold/10 hover:text-ark-gold",
|
||
|
|
className,
|
||
|
|
].join(" ")}
|
||
|
|
>
|
||
|
|
{pending ? (
|
||
|
|
<LoaderCircle className="h-5 w-5 animate-spin" strokeWidth={2.2} />
|
||
|
|
) : (
|
||
|
|
<Heart
|
||
|
|
className="h-5 w-5"
|
||
|
|
strokeWidth={2.2}
|
||
|
|
fill={isFavorite ? "currentColor" : "none"}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|