39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import { Bookmark } from 'lucide-react';
|
|
import { useBookmarkStore } from '../stores/bookmarkStore';
|
|
import { Article } from '../types';
|
|
|
|
interface BookmarkButtonProps {
|
|
article: Article;
|
|
className?: string;
|
|
}
|
|
|
|
export function BookmarkButton({ article, className = '' }: BookmarkButtonProps) {
|
|
const { isBookmarked, addBookmark, removeBookmark } = useBookmarkStore();
|
|
const bookmarked = isBookmarked(article.id);
|
|
|
|
const handleBookmark = () => {
|
|
if (bookmarked) {
|
|
removeBookmark(article.id);
|
|
} else {
|
|
addBookmark(article);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={handleBookmark}
|
|
className={`group relative p-2 rounded-full hover:bg-gray-100 transition-colors ${className}`}
|
|
aria-label={bookmarked ? 'Remove from bookmarks' : 'Add to bookmarks'}
|
|
>
|
|
<Bookmark
|
|
size={20}
|
|
className={`transition-colors ${
|
|
bookmarked ? 'fill-blue-600 text-blue-600' : 'text-gray-500 group-hover:text-gray-700'
|
|
}`}
|
|
/>
|
|
<span className="absolute -bottom-8 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
|
|
{bookmarked ? 'Убрать закладку' : 'Добавить закладку'}
|
|
</span>
|
|
</button>
|
|
);
|
|
} |