71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import { cn } from '@/lib/utils';
|
|
import { useForm, usePage } from '@inertiajs/react';
|
|
import { MessageCircle, ThumbsDown, ThumbsUp } from 'lucide-react';
|
|
import { useEffect } from 'react';
|
|
import { BlogShowProps } from '../show';
|
|
|
|
const BlogLikeDislike = () => {
|
|
const { props } = usePage<BlogShowProps>();
|
|
const { blog, likesCount, dislikesCount, userReaction, commentsCount, translate } = props;
|
|
const { button, common } = translate;
|
|
|
|
const { data, setData, post, processing } = useForm({
|
|
blog_id: blog.id,
|
|
type: '',
|
|
});
|
|
|
|
const handleReaction = (type: 'like' | 'dislike') => {
|
|
if (processing) return;
|
|
|
|
setData('type', type);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (data.type === 'like' || data.type === 'dislike') {
|
|
post(route('blogs.like-dislike.toggle'), {
|
|
preserveScroll: true,
|
|
});
|
|
}
|
|
}, [data]);
|
|
|
|
return (
|
|
<div className="flex w-full items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant={userReaction === 'like' ? 'default' : 'outline'}
|
|
size="sm"
|
|
onClick={() => handleReaction('like')}
|
|
disabled={processing}
|
|
className={cn('flex items-center gap-2 transition-colors', userReaction === 'like' && 'bg-blue-500 text-white hover:bg-blue-600')}
|
|
>
|
|
<ThumbsUp className="h-4 w-4" />
|
|
<span>{likesCount}</span>
|
|
<span className="sr-only">{button.like}</span>
|
|
</Button>
|
|
|
|
<Button
|
|
variant={userReaction === 'dislike' ? 'default' : 'outline'}
|
|
size="sm"
|
|
onClick={() => handleReaction('dislike')}
|
|
disabled={processing}
|
|
className={cn('flex items-center gap-2 transition-colors', userReaction === 'dislike' && 'bg-red-500 text-white hover:bg-red-600')}
|
|
>
|
|
<ThumbsDown className="h-4 w-4" />
|
|
<span>{dislikesCount}</span>
|
|
<span className="sr-only">{button.dislike}</span>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<MessageCircle className="h-5 w-5" />
|
|
<h3 className="text-lg font-semibold">
|
|
{commentsCount} {commentsCount > 1 ? common.comments : common.comment}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BlogLikeDislike;
|