Initial commit

src/components/shared/FavoriteButton.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { memo, useState, useCallback } from "react";
+import { Heart } from "lucide-react";
+import { cls } from "@/lib/utils";
+
+interface FavoriteButtonProps {
+    initialFavorited?: boolean;
+    onToggle?: () => void;
+    className?: string;
+}
+
+const FavoriteButton = memo(({
+    initialFavorited = false,
+    onToggle,
+    className = "",
+}: FavoriteButtonProps) => {
+    const [isFavorited, setIsFavorited] = useState(initialFavorited);
+
+    const handleClick = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        setIsFavorited(prev => !prev);
+        onToggle?.();
+    }, [onToggle]);
+
+    return (
+        <button
+            onClick={handleClick}
+            className={cls(
+                "absolute cursor-pointer top-4 right-4 card h-8 w-auto aspect-square rounded-theme flex items-center justify-center z-10",
+                className
+            )}
+            aria-label={isFavorited ? "Remove from favorites" : "Add to favorites"}
+            type="button"
+        >
+            <div className="relative z-1 w-full h-full flex items-center justify-center">
+                <Heart
+                    className={cls(
+                        "h-4/10 text-foreground transition-all duration-300",
+                        isFavorited ? "opacity-0 blur-xs" : "opacity-100 blur-0"
+                    )}
+                    fill="none"
+                    strokeWidth={1.5}
+                />
+                <Heart
+                    className={cls(
+                        "h-4/10 text-accent absolute transition-all duration-300",
+                        isFavorited ? "opacity-100 blur-0" : "opacity-0 blur-xs"
+                    )}
+                    fill="currentColor"
+                    strokeWidth={0}
+                />
+            </div>
+        </button>
+    );
+});
+
+FavoriteButton.displayName = "FavoriteButton";
+
+export default FavoriteButton;